vue 3.0一些理解

时间：2021-02-05 10:28:53 收藏：0 阅读：0

性能优化

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

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

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

编译时优化

slot默认编译为函数
vnode的创建函数保持参数一致化
编译时生成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)

vue 3.0一些理解

新增composition-api，