Vue2 和 Vue3 有什么区别？

1. 数据双向绑定的响应式原理不同

• vue2 在初始化的时候，对 data 中的每个属性使用 Object.defineProperty() 调用 get 和 set 使之变为响应式对象。
  如果属性值为对象，需要递归调用 defineProperty 使之变为响应式对象。
  缺陷：Object.defineProperty() 后添加的属性是劫持不到的，所以在 methods 方法里操作（添加或删除）对象属性值时，会造成数据更新，视图不更新。
  • 使用 this.$set(this.obj, ‘c’, ‘3’)
• vue3 使用 ES6 的 new Proxy() （对数据进行代理）对象重写响应式。
  即使后添加的也可以劫持到，不会造成数据更新，视图不更新。
  proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，在多层属性嵌套时，只有访问某个属性才会递归处理下一级的属性。
• 响应式原理改成了用proxy，解决了数组无法通过下标修改，无法监听到对象属性的新增和删除问题。也提升了响应式的效率
• vue3并不是完全抛弃了defineProperty，通过reactive定义的响应式数据使用proxy包装出来，而ref还是用的defineProperty去给一个空对象，定义了一个value属性来做的响应式。

2. 是否支持碎片？组件模版和语法扩展

• vue2 支持单个根元素，不支持碎片
• vue3 引入 fragment 支持多个根节点，template模版可以不包在一个根div里

3. API 设计不同

• vue2 选项式API
• vue3 组合式API（setup语法糖形式），没有this
• 用组合式API替换选项式API，方便逻辑更加的聚合。
• 组合式api的写法下，源码改成了函数式编程，方便按需引入，因为tree-shaking功能必须配合按需引入写法。所以vue3更好滴配合tree-shaking能让打包体积更小。

4. 定义数据变量方法不同

• vue2 数据放在 data 里，方法放在 method 里
• vue3 使用 setup，在组件初始化时触发

5. 生命周期钩子函数不同

• 生命周期没有creat，setup等同于create，卸载改成unmount

6. 传值不同

• v-model应用于自定义组件时，监听的事件和传递的值不同
  • vue2中v-model传递的是value，监听的是change或input
  • vue3中v-model传递的是modelValue，监听updata: modelValue

7. 指令和插槽不同

• vue3中v-if高于v-for的优先级

8. main.js 不同

• 根实例的创建从new app变成了createApp方法
• 一些全局注册，比如mixin，注册全局组件，use改成了用app实例调用，而不是vue类调用

9. 性能优化

• vue3增加了静态节点标记。会标记静态节点，不对静态节点进行比对。从而增加效率。
• vue3不推荐使用mixin进行复用逻辑提取，而是推荐写成hook
  • vue2
    
  • vue3
    

10. ts更好地配合

11. vue3没有this.$set

12. webpack 和 vite 的不同

13. 新增了传送门teleport组件

teleport组件

14. mixin 和 hooks

• mixin
• hooks