Vue响应式机制：深入理解与源码解析

2023-12-21 22:03:09

Vue响应式系统简介

Vue.js 响应式系统是 Vue.js 框架的核心之一，它允许 Vue.js 组件自动地更新视图，当组件的数据发生改变时。Vue.js 响应式系统通过 Object.defineProperty() 来实现，它将组件的数据属性包装成一个 getter 和 setter 函数，当数据发生改变时，setter 函数会触发视图更新。

Vue响应式系统源码分析

2.1 Vue2中的响应式实现

Vue2 中的响应式系统是基于 Object.defineProperty() 实现的，它将组件的数据属性包装成一个 getter 和 setter 函数，当数据发生改变时，setter 函数会触发视图更新。

Object.defineProperty(data, key, {
  get: function () {
    return this[key]
  },
  set: function (newVal) {
    this[key] = newVal
    this._updateView() // 触发视图更新
  }
})

2.2 Vue3中的响应式实现

Vue3 中的响应式系统是基于 Proxy 对象实现的，它比 Vue2 中的响应式系统更加高效。Vue3 中的响应式系统可以自动收集依赖，当数据发生改变时，它只需要更新那些依赖于该数据变化的视图。

const proxy = new Proxy(data, {
  get: function (target, key) {
    track(target, key) // 收集依赖
    return target[key]
  },
  set: function (target, key, newVal) {
    target[key] = newVal
    trigger(target, key) // 触发视图更新
  }
})