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)
上一篇:vue3 中 ref 和reactive 的区别


下一篇:Vue3:组合API-reactive函数