vue 3.0一些理解

性能优化

• 观察者机制的变化：Proxy 替代 object.defineProperty  

  • 　Vue 2.x使用 Object.defineProperty 的 getter 和 setter。 但是，Vue 3 将使用 ES2015 Proxy 作为其观察者机制。 这消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。

• virtual DOM重构（比2.5快一倍） 【和模版大小有关 --> 和模版内的动态内容数量相关】

 

1. 传统：组件 update时，整个vdom树需要重新创建，然后遍历进行diff, update
2. 新的更新策略： block tree
3. 区分动态节点和静态节点
4. 基于动态节点指令（v-if, v-for,  {{ name }}等）更新        

• 编译时优化

1. slot默认编译为函数
2. vnode的创建函数保持参数一致化
3. 编译时生成vnode的类型标记

   新增composition-api，

   https://composition-api.vuejs.org/

   可以在vue2.x的项目中通过安装@vue/composition-api包来使用composition-api.

   • reactive：reactive的作用是将对象包装成响应式对象——通过 Proxy代理后的对象。
   • ref：由传入值返回一个响应式的、可变的且只有value一个属性的ref对象。

   当ref被作为render context被返回，在template中使用该ref对象时，自动获取内部的值，不需要使用.value属性。

   <template>
     <div>{{ count }}</div>
   </template>
   
   <script>
     export default {
       setup() {
         return {
           count: ref(0)
         }
       }
     }
   </script>
   

   当ref对象被作为属性，传入响应式对象reactive时，会自动获取其内部的值（表现得像普通的属性值，而非对象）。

const count = ref(0)
const state = reactive({
  count
})

console.log(state.count) // 0

state.count = 1
console.log(count.value) // 1

　　

reactive属性绑定新的ref对象后，原来ref的value不变（断开了）。

const otherCount = ref(2)

state.count = otherCount
console.log(state.count) // 2
console.log(count.value) // 1
其他情况获取ref时需要带.value

onst arr = reactive([ref(0)])
// need .value here
console.log(arr[0].value)

const map = reactive(new Map([['foo', ref(0)]]))
// need .value here
console.log(map.get('foo').value)