vue2与vue3的区别

vue2 的双向数据绑定是利⽤es5 的⼀个 API ，Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。

vue3 中使⽤了 es6 的 proxy API 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从⽽ 实现对数据的监控。

这⾥是引相⽐于vue2版本，使⽤proxy的优势如下

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

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

3.可以监听数组，不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美⽀持对数组的监听。 （vue3.x可以检测到数组内部数据的变化）

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

vue2：

 vue3：

Vue2使⽤的是选项类型API（Options API），Vue3使⽤的是组合式API（Composition API）

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

setup函数可以说是Vue3的属性和方法入口。在Vue2中，使用的是data、methods、computed。在Vue3中我们把属性和方法都放在setup函数中。setup函数中有以下几个特点：

 1.setup(props,context):接收两个参数

(1) props ：接收来自父组件传来的参数

(2) context ：上下文，主要包含3个使用参数：attrs,emits,slots，相当于Vue2中this的 attrs,emits,slots

2.有返回值，返回值可以是两种：

 (1) 返回 对象 ，返回的对象中的属性方法，可在模板中直接使用；

 (2) 返回 渲染函数 ，可以自定义渲染的内容；

3.函数内部没有this； 

 4.当内部有异步函数，需要使用到await的时候，可以直接使用，不需要在setup前面加async

• 若组件被包含，则多出下面两个钩子函数。

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

（1）父传子

vue2：console.log(‘props’,this.xxx)
vue3：setup(props,context){ console.log(‘props’,props) }

1. 父组件提供数据

2. 父组件将数据传递给子组件

3. 子组件通过defineProps进行接收

4. 子组件渲染父组件传递的数据

// 父组件








// 子组件

（2）子传父

vue2：this.$emit()
vue3：setup(props,context){context.emit()}

1. 在子组件中获取emit , defineEmits()

2. 子组件中用emit发送事件

3. 父组件要监听子组件的事件

4. 父组件提供事件的处理函数

// 父组件






// 子组件