[Vue] 第1449天 Vue响应式探秘从Vue2到Vue3

什么是响应式？

响应式指当数据发生变化时，UI会自动更新内容。通俗地说就是数据和视图之间的联动。

Vue2 响应式的实现原理

Vue2.x 的响应式系统是通过 Object.defineProperty() 来实现的。

举个栗子：

let data = { name: '张三', age: 20 }
Object.defineProperty(data, 'name', {
  get() {
    console.log('get name')
    return this.name
  },
  set(val) {
    console.log('set name')
    this.name = val
  }
})

这里通过 Object.defineProperty() 为 data 对象的 name 属性设置了 getter 和 setter 方法，从而实现对 name 属性的劫持。当我们访问或者修改 name 属性时，会触发它的 getter 和 setter 方法，并且在这些方法中加入相应的操作。

Vue2.x 的响应式系统可以使用该特性监听数据变化。但它有一些限制和不足。比如，它只能监听对象和数组的变化，且无法检测到原生的添加或删除元素的方法。

Vue3响应式的实现原理

Vue3.x 通过使用ES6的 Proxy 来实现响应式。Proxy 是ES6中新增的一个特性，它可以拦截并重写目标对象的底层操作，并提供了一些附加方法。

举个栗子：

let data = { name: '张三', age: 20 }
let reactiveData = new Proxy(data, {
  get(target, key) {
    console.log(`get ${key}`)
    return Reflect.get(target, key)
  },
  set(target, key, value) {
    console.log(`set ${key}=${value}`)
    return Reflect.set(target, key, value)
  }
})

这里通过使用 Proxy，为 data 对象创建了代理对象 reactiveData，从而可以在访问和修改 data 对象时，触发相应的 get 和 set 事件。

Vue3 使用了 Proxy 作为其响应式系统的核心，从而解决了 Vue2.x 中存在的一些限制和不足。因为 Proxy 可以代理整个对象，所以 Vue3 可以监听到数据的所有变化，甚至包括对象属性的添加或删除。

总结

Vue3 使用 Proxy 作为其响应式系统的核心，相较于 Vue2.x 的 Object.defineProperty()，它可以监听到数据的所有变化，包括添加或删除对象属性等操作。此外，Vue3 的响应式系统还支持更高效的数据更新算法，从而提高了应用的性能。

更多题目

juejin.cn/column/7201…

这篇好文章是转载于：学新通技术网