Vue2与Vue3：双向绑定原理与生命周期对比
需积分: 1 150 浏览量
更新于2024-08-03
收藏 21KB DOCX 举报
"本文将探讨Vue2与Vue3之间的主要区别，特别是它们在双向数据绑定原理上的差异，以及Vue2和Vue3的生命周期钩子。"
Vue2与Vue3是两个非常流行的前端框架版本，它们各自有其独特的特性和工作原理。在数据绑定方面，Vue2依赖于`Object.defineProperty`来实现双向数据绑定。Vue2会劫持每个属性的getter和setter，当数据变化时，通过Dep对象通知相关的Watcher更新视图。然而，这种方式存在局限性，如无法检测到对象属性的动态添加或删除，以及对数组变化的处理需要特殊方法。
Vue3则引入了ES6的`Proxy`和`Reflect`，这使得数据绑定更加灵活和高效。`Proxy`可以创建一个代理对象，监控所有对原始数据的访问和修改，从而提供更强大的数据响应能力。依赖收集和派发更新过程也更为直观，同时Vue3能更好地处理数组和对象的变化，提高了性能。
在生命周期钩子方面，Vue2的生命周期如下：
1. `beforeCreate`：实例刚刚创建，属性尚未初始化。
2. `created`：实例创建完成，属性绑定，但DOM未生成。
3. `beforeMount`：模板编译完成，但未挂载到DOM。
4. `mounted`：模板已挂载到DOM，可以进行DOM操作。
5. `beforeUpdate`：数据改变，但视图未更新。
6. `updated`：数据和视图都已经更新。
7. `beforeDestroy`：实例销毁前。
8. `destroyed`：实例已被销毁。
9. `activated/deactivated`：对于被`keep-alive`缓存的组件，这两个钩子分别在激活和停用时调用。
Vue3对生命周期钩子进行了调整和优化，引入了新的钩子如`setup()`，并且移除了部分旧的钩子。Vue3的生命周期更加简洁，鼓励开发者使用Composition API，以更模块化的方式组织代码。
Vue3在响应式系统和生命周期管理上都有显著改进，提供了更好的性能和开发体验。理解这些差异对于决定何时升级项目或者选择合适的Vue版本至关重要。
一、vue2 和 vue3 双向数据绑定的原理区别
Vue2 的双向数据绑定原理：
Vue2 的双向数据绑定主要是通过数据劫持和发布订阅模式实现的。
1.数据劫持：Vue2 会用 Object.defineProperty 方法劫持每个属性的 getter 和 setter，当数据
发生变化时触发 setter。
2.发布订阅模式：通过 Dep（依赖）收集所有的 Watcher（观察者），当数据变化后，通过 Dep
通知所有的 Watcher，然后执行相应的视图更新函数。
如果模板中使用了这个数据，那么会被解析为一个 Watcher，然后通过 getter 进行依赖收集，
收集到 Dep 中。
这样，当数据发生变化时，就可以通过 Dep 通知到每个 Watcher，然后更新视图。但是，
由于 Object.defineProperty 的限制，Vue2 无法检测到对象属性的添加或删除，以及数组的
变化。
缺点：
深度监听需要一次性递归
无法监听新增删除属性
无法原生监听数组，需要特殊处理
Vue3 的双向数据绑定原理：
Vue3 则是通过 Proxy 和 Reflect 这两个 ES6 的新特性来实现的双向数据绑定。
1.数据劫持：Vue3 通过 Proxy 创建一个代理对象，来劫持用户的数据。
2.依赖收集：当我们把这个数据绑定在视图上时，Vue3 会通过 getter 函数进行依赖收集，
把当前的数据添加到对应的观察者列表中。
3.派发更新：当数据发生变化时，Vue3 会通过 setter 函数，通知对应的观察者，然后观察
者会去更新视图。
相比于 Vue2，Vue3 的双向数据绑定机制能够更好的处理数组和对象的变化，并且性能更优。
二、vue2 和 vue 生命周期钩子
vue2 生命周期钩子：
beforeCreate：实例刚在内存中被创建出来，还未初始化属性
created：实例已经创建完成，属性已经绑定，但 DOM 还未生成
beforeMount：模板已经编译完成，但还未挂载到页面中
mounted：模板已经挂载到页面中，用户已经可以看到渲染结果
下载后可阅读完整内容，剩余7页未读，立即下载
2023-09-07 上传
2021-10-20 上传
2023-09-16 上传
2023-03-22 上传
2021-01-20 上传
2023-07-06 上传
2023-07-09 上传
2023-04-20 上传
2023-07-11 上传
沉默是金~
- 粉丝: 492
- 资源: 41
我的内容管理
展开
