vue2和vue3的不同

甜甜的嘛.

已于 2023-07-25 11:45:08 修改

阅读量29

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-07-24 11:20:58 首次发布

本文链接：https://blog.csdn.net/weixin_49734970/article/details/131892472

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、生命周期函数钩子不同

vue2中的生命周期

beforeCreate—— 创建之前
created ———— 创建之后
beforeMount —— 挂载之前
mounted ———— 挂载之后
beforeUpdate—— 更新之前
updated ———— 更新之后

vue3中的生命周期

setup —————— 创建
onBeforeMount —— 挂载之前
onMounted ———— 挂载之后
onBeforeUpdate ——更新之前
onUpdated ———— 更新之后

2、数据双向绑定（响应式）原理不同

vue2中的响应式

核心是通过ES5的Object.defineProperty中的访问器属性中的 get 和 set 方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 Watcher，观察者 Watcher自动触发重新render 当前组件（子组件不会重新渲染），生成新的虚拟 DOM 树，Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟DOM树中每个节点的差别并记录下来，最后加载操作，将所有记录的不同点局部修改到真实 DOM 树上。

缺点：Object.defineProperty需要深度遍历data中的每个属性，这种方式对于数组很不友好，而且对象观测后，新增的属性就不是响应式的，不过可以用Vue.set()来添加新的属性；

vue3中的响应式

通过使用 ES6 的 Proxy 对象来实现，当一个组件被创建时，Vue 会为组件的 data 对象创建一个响应式代理对象。这个代理对象可以监听到数据的变化，并在数据变化时更新视图。当组件的 data 对象发生变化时，代理对象会收到变化通知，然后将变化传递给相关的组件和子组件，从而触发组件的重新渲染。

使用Proxy，Proxy可以劫持整个data对象，然后递归返回属性的值的代理即可实现响应式；代理对象和反射对象要相互配合来实现响应式。