细说vue2与vue3的区别

1、组件间的数据传递方式不一致。

Vue2中：

父传子：父组件通过:属性名=值的方式将数据传给子组件，子组件通过props 属性进行接收。

子传父：父组件中定义一个自定义函数，子组件通过this.$emit方法进行调用， 以形参的形式来改变父组件的数据结果。

Vue3中：

父传子：父组件通过:属性名=值的方式将数据传给子组件，子组件通过props 属性进行接收，在setup方法中定义第一个形参props 如（setup(props)）,

通过形参props.属性名称获取到父组件传给子组件的结果。

子传父：父组件中定义一个自定义函数，子组件通过setup中的第二个参数 如 （setup(props,_this)）里面的_this.emit方法进行父组件自定义函数的调用。

2、Vue2中不能通过嵌套组件进行数据传递，而Vue3可以。

通过Vue3中的依赖注入进行实现，在父组件中定义provide方法

如provide("database",username)，在需要的子组件或者孙子组件中调用inject方法

如let dabases2= inject("database")。

3、Vue2与Vue3的生命周期不一致。

Vue3中的生命周期方法可以多次使用。

Vue3中的生命周期方法必须写成箭头函数。

4、Vue2不支持 ’碎片’，Vue3支持 ’碎片’ 

在vue2中不支持‘碎片’，意思就是在vue2中它是单一根节点

而在vue3中支持‘碎片’，指的是它能支持多个根节点

5、API类型不同

在vue2中是选项式API（options API），一个逻辑会散乱在文件的不同位置（data、props、computed、watch、生命周期等），这样导致代码的可读性差，需要上下来会跳转文件位置。

在vue3组合式API（composition API）则很好的解决了这个问题，可将同一逻辑的内容写到一起。

6、数据的双向数据绑定原理不同

Vue双向数据绑定的原理：通过Object.defineProperty方法中的get与set方法实现响应式数据原理。

Object.defineProperty方法中的属性：

是否可以修改属性（重写属性）

writable:true,

属性中的value值

value:"张三",

是否可以循环遍历

enumerable:true,

是否可以删除属性

configurable:true,

Object.defineProperty方法中的方法：

get方法用于属性值的获取和调用。

Set方法用于属性值的修改和设置。

Vue2的缺陷：

1. 只能监听指定的属性，不能监听到对象中其它的属性值的操作，比如删除、 新增。
2. 一次性递归多个Object.defineProperty方法的开销很大，如果属性比较多， 大量的递归导致调用栈溢出。

Vue3双向数据绑定的原理：通过new Proxy(数据代理)对象中的get、set、 deleteProperty方法进行数据的操作，实现响应式。

获取、查询数据：get

修改、新增数据：set

删除数据: deleteProperty