vue2和vue3的比较

315 阅读1分钟

1.响应式原理发生了变化,vue2是用的Object.defineProperty监听对象属性的变化,从而实现响应式;vue3使用的是Proxy

见官网响应式代理 vs. 原始值

export default { 
    data() {
       return { 
         someObject: {} 
       } 
     }, 
    mounted() {
        const newObject = {}
        this.someObject = newObject
        console.log(newObject === this.someObject) // false 
    } 
}

当你在赋值后再访问 this.someObject,此值已经是原来的 newObject 的一个响应式代理。与 Vue 2 不同的是,这里原始的 newObject 不会变为响应式:请确保始终通过 this 来访问响应式状态。

2.diff算法,渲染算法的改变。 Vue3优化diff算法。不再像vue2那样比对所有dom,而采用了block tree的做法?(todo)。此外重新渲染的算法里也做了改进,利用了闭包来进行缓存。这使得vue3的速度比vue2快了6倍。

3.vue2使用的是option api(选项式api),有data,methods,computed。vue3有2种不同的书写风格:选项式 API 和组合式 API。推荐使用组合式api。

4.vue2创建响应式数据必须在data中声明,而vue3中需要使用ref或reactive

5.vue2中this指向组件实例,获取props的值可以直接this.props.;vue3中this已不再指向组件实例,如果需要访问props,则可以通过setup的参数

export default { 
  setup(props, { attrs, slots, emit, expose })
    { ... } 
  }

如果需要访问组件实例,则可以通过

 const vm = getCurrentInstance()!.proxy;

6.v-model的使用也有变化哦,突然发现还用vue2的写法,在vue3里面实现不了

staging-cn.vuejs.org/guide/compo…

vue2中的modal选项好像没用了,换成下面这种
 props: ['title'],
  emits: ['update:title']

vue3中v-model可以添加参数和修饰符,一个组件上可以使用多个v-model

7.vue3中.sync好像没有了

image.png