Vue2和Vue3的区别

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

• vue2的双向数据绑定是利用了ES5的一个API(Object.definePropert())对数据劫持+发布订阅模式的方法来实现的.
• vue3中使用了ES6的Proxy API对数据代理

2.Vue3支持碎片化(Fragments)

• 就是说在组件可以拥有多个根节点

3.建立数据data

• Vue2 : 这里把数据放入data属性中
• Vue3 : 需要使用一个新的setup方法,此方法在组件初始化构造的时候触发
• 使用以下三步来建立数据

1.  从vue引入reactive
2. 使用reactive()方法来声明我们的数据为响应式数据
3. 使用setup()方法来返回我们的响应式数据,从而我们的template可以获取这些响应式数据

4.生命周期钩子

• setup() : 开始创建组件之前,在beforeCreate和created之前执行.创建的是data和method
• onBeforeMount() : 组件挂载到节点上之前执行的函数
• onMounted() : 组件挂载完成后执行的函数
• onBeforeUpdate() : 组件更新之前执行的函数
• onUpdated() : 组件更新完成之后执行的函数
• onBeforeUnmount() : 组件卸载之前执行的函数
• onUnmounted() : 组件卸载完成后执行的函数

若组件被<keep-alive>包含,则多出下面两个钩子

• onActivated() : 被包含在组件中,会多出两个生命周期钩子函数.被激活时执行
• onDeactivated() :比如从A组件,切换到B组件,A组件消失时执行

5.父子传参不同