「这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战」
一、 vue2和vue3双向数据绑定原理发生了改变
1. Vue2: object.defineProperty()
vue2数据双向绑定是由数据劫持结合发布-订阅的模式实现的，通过object.defineProperty()来劫持对象属性的getter和setter操作，在数据变动时发布消息给订阅者，触发响应的监听回调。
object.defineProperty(obj, name,{
get:function resultGetter() {
},
set:function resultSetter() {
}
})
observer：数据监听器，监听数据对象进行遍历，包括子属性对象的属性都加上getter和setter。compile：解析模板指令，将模板中的遍历替换成数据，然后初始化渲染页面视图，并将每个指令对应节点绑定更新函数，添加监听数据的订阅者，一旦数据又变化，收到通知，更新视图。watcher：订阅者是observer和compile之间的通信桥梁，在自身实例化时往消息订阅器dep里添加自己，自身必须有个updata()方法，待属性变动dep.notice()通知时，能调用自身的updata()方法，并触发compiler中绑定的回调。depend: 消息订阅器，当有多个订阅者的时候，需要有一个统一维护者。depend用来收集订阅者，内部维护了一个数组。
2. Vue3: Proxy
vue3中使用了ES6的Proxy 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生命周期在调用前需要先进行引入。
