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
- vue2
10. ts更好地配合
11. vue3没有this.$set
12. webpack 和 vite 的不同
13. 新增了传送门teleport组件
teleport组件