vue2和vue3的区别

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

vue2的双向数据绑定利用es6的一个apiobjectdefinepropert()对数据进行劫持,结合发布订阅者的方式来实现的

vue3中使用了es6的proxyapi对数据进行代理

想比与vue2,使用proxy的优势如下:

1.defineProperty只能监听某个属性,不能对全对象监听

2.可以省去for,in,闭包等内容来提升效率(直接绑定整个对象即可)

3.可以监听数组,不用再去单独的对数组做特异性操作 vue3可以检测到数组内部数据的变化

2.vue3支持碎片化

就是说组件可以拥有多个根节点,而vue2只能有一个根节点

3.composition API

vue2和vue3的最大区别--vue2使用的选项型API,对比vue3组合式API

旧的选项型API在代码里分割了不同的属性,data,computed属性,methods等等,而vue3组合式api能让我们用方法来分割,相比于旧的API使用属性来分组,这样代码会更加简便和整洁

4.建立数据data

vue2把数据放入data属性中

在vue3,我就需要用一个新的setup方法,此方法在组件爱你初始化构造的时候触发

使用以下三点来建立反应性数据

1.从vue引入reactive

2.使用reactive()方法来声明我们的数据为响应式数据

3.使用setup()方法来返回我们的响应式数据,从而我们的template可以获取这些响应式数据

5.生命周期钩子函数

选项式对比组合式

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

6.父子传参不同

vue3父向子传值

 子向父传值

基本思路

1. 父组件中给子组件标签通过@绑定事件
2. 子组件内部通过 emit 方法触发事件

1. 1. const emit = defineEmits(['事件名1', '事件名2'])
   2. emit('事件名1', 值1)