快来看~~(面试必备)浅谈vue2和vue3的几点区别

2,086 阅读2分钟

「这是我参与11月更文挑战的第21天,活动详情查看:2021最后一次更文挑战

一、 vue2和vue3双向数据绑定原理发生了改变

1. Vue2: object.defineProperty()

vue2数据双向绑定是由数据劫持结合发布-订阅的模式实现的,通过object.defineProperty()来劫持对象属性的gettersetter操作,在数据变动时发布消息给订阅者,触发响应的监听回调。

object.defineProperty(obj, name,{
    get:function resultGetter() {
        
    },
    set:function resultSetter() {
        
    }
})
  • observer:数据监听器,监听数据对象进行遍历,包括子属性对象的属性都加上gettersetter
  • compile:解析模板指令,将模板中的遍历替换成数据,然后初始化渲染页面视图,并将每个指令对应节点绑定更新函数,添加监听数据的订阅者,一旦数据又变化,收到通知,更新视图。
  • watcher:订阅者是observer和compile之间的通信桥梁,在自身实例化时往消息订阅器dep里添加自己,自身必须有个updata()方法,待属性变动dep.notice()通知时,能调用自身的updata()方法,并触发compiler中绑定的回调。
  • depend: 消息订阅器,当有多个订阅者的时候,需要有一个统一维护者。depend用来收集订阅者,内部维护了一个数组。

2. Vue3: Proxy

vue3中使用了ES6Proxy API对数据代理。

相比vue2.x,使用proxy的优势如下:

  • defineProperty只能监听某个属性,不能对全对象监听
  • 可以省去for in,闭包等内容来提升效率(直接绑定整个对象即可)
  • 可以监听数组,不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。

二、vue2和vue3定义数据变量和方法的改变

  • vue2:定义数据变量是data(){},创建的方法要在methods:{}中。

  • vue3:直接在setup(){}中,在这里面定义的变量和方法因为最终要在模板中使用,所以最后都得 return

 三、vue2和vue3生命周期钩子函数的不同

vue2中的生命周期

  • beforeCreate 组件创建之前
  • created 组件创建之后
  • beforeMount 组价挂载到页面之前执行
  • mounted 组件挂载到页面之后执行
  • beforeUpdate 组件更新之前
  • updated 组件更新之后

vue3中的生命周期

  • setup 开始创建组件
  • onBeforeMount 组价挂载到页面之前执行
  • onMounted 组件挂载到页面之后执行
  • onBeforeUpdate 组件更新之前
  • onUpdated 组件更新之后
    而且Vue3.x 生命周期在调用前需要先进行引入。