计算属性深入浅出，全面解析Vue2.0源码原理

2024-02-27 09:38:21

计算属性原理

作为Vue2.0响应式系统的重要组成部分，计算属性扮演着关键角色。它允许开发者定义依赖于其他响应式数据的衍生数据，且这些衍生数据同样具有响应性。

计算属性的原理基于Vue2.0的响应式系统。在编译阶段，Vue2.0会将计算属性的getter函数封装成一个“getter函数包装器”。这个包装器负责追踪依赖于该计算属性的响应式数据，当这些数据发生改变时，包装器会重新执行getter函数，更新计算属性的值。

手写Vue2.0源码

让我们通过手写Vue2.0源码来深入理解计算属性的实现。

class Vue {
  constructor(options) {
    // ...

    // 监听计算属性
    this._initComputed(options.computed);
  }

  _initComputed(computed) {
    Object.keys(computed).forEach(key => {
      this._defineComputed(key, computed[key]);
    });
  }

  _defineComputed(key, getter) {
    const definition = {
      get: getter,
      enumerable: true,
      configurable: true
    };

    Object.defineProperty(this, key, definition);
  }
}

实例演示

以下代码演示了如何使用计算属性：

const app = new Vue({
  data: {
    count: 0
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  }
});

console.log(app.doubleCount); // 0
app.count++;
console.log(app.doubleCount); // 2