Vue2 和 Vue3 响应式上有什么区别?

Vue2 使用的是 Object.defineProperty() 来实现的响应式,它需要递归的对所有的属性进行拦截,重写 getter 和 setter 函数。

而且只能劫持已有的属性,对于新增属性和删除属性是拦截不到的,必须额外通过 $set、 $delete 这些 API 来手动触发页面的更新。

在 Vue 2 中,当一个对象被设置为响应式对象时,会通过 Object.defineProperty() 方法把每个属性都转换成 getter和 setter,当属性值发生变化时,会触发 setter,进而通知所有引用该属性的组件更新视图。

而 Vue3 使用 ES6 的 proxy 代理的方式来处理响应式。 它和 Vue2 的区别在于,它不需要对所有属性重写 getter 和 setter,还能监听到属性的删除和新增,而且能够直接监听数组的变化,不需要对数组进行特殊的处理。

相比之下,Vue 3 中的响应式系统在使用上更加方便、高效和完善。

相比之下,Proxy更强大,它可以拦截到更多的操作。包括添加、删除和遍历属性等。此外,它还能够直接监听数组的变化,而不需要进行特殊的处理。这意味着,在Vue3中,开发者可以更加方便地使用响应式数据,提高开发效率。

Vue 3.x 中对于新增属性和删除属性的响应式处理更加完善和高效,无需使用 Vue.set 方法,而Vue 2.x 中需要手动使用这些方法才能保证新增或删除属性的响应式效果。

Vue 3 中使用了递归遍历 Proxy 对象的属性,因此在访问嵌套属性时会更加方便和高效,而 Vue2则需要通过 watch 或 computed 等方式才能实现嵌套属性的响应式

Vue 3 中的响应式系统支持了 reactive() 和 readonly 等 API,方便开发者创建只读或可变的响应式对象。而在 Vue 2.x 中则没有这些 API。

你可能感兴趣的:(前端,javascript,vue.js)