vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue的Computed实现原理

Vue中的Computed实现原理分析

作者:秦JaccLink

这篇文章主要介绍了Vue中的Computed实现原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

在 Vue.js 中,computed 属性是一种强大的特性,用于定义依赖于其他响应式数据的计算值。

computed 属性不仅能够简化模板中的表达式,还能够缓存计算结果,避免不必要的重复计算,从而提高性能。

将深入探讨 Vue 中 computed 属性的实现原理,包括其工作机制、依赖追踪、缓存策略等方面。

1. Computed 属性概述

Computed 属性是 Vue 实例中的一个特殊属性,它允许开发者定义一个计算值,该值依赖于其他响应式数据。

Computed 属性具有以下特点:

2. Computed 属性的基本用法

在 Vue 实例中,可以通过 computed 选项来定义 computed 属性。

new Vue({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

在上述代码中,fullName 是一个 computed 属性,它依赖于 firstNamelastName

firstNamelastName 发生变化时,fullName 会自动重新计算。

3. Computed 属性的实现原理

3.1 依赖追踪

Vue 的 computed 属性实现依赖于 Vue 的响应式系统。

Vue 通过 Object.definePropertyProxy 来劫持数据的变化,并在数据变化时通知依赖该数据的观察者。

3.1.1 响应式数据劫持

Vue 在初始化数据时,会通过 Object.definePropertyProxy 对数据进行劫持,使其变为响应式数据。

function defineReactive(obj, key, val) {
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      if (Dep.target) {
        dep.depend();
      }
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify();
    }
  });
}

在上述代码中,defineReactive 函数通过 Object.defineProperty 劫持了对象的属性,并在 getset 方法中分别收集和通知依赖。

3.1.2 依赖收集

在 computed 属性被访问时,Vue 会通过 Dep.target 来收集依赖。

functionWatcher(vm, expOrFn, cb) {
  this.vm = vm;
  this.getter = parsePath(expOrFn);
  this.cb = cb;
  this.value = this.get();
}

Watcher.prototype.get = function() {
  Dep.target = this;
  const value = this.getter.call(this.vm, this.vm);
  Dep.target = null;
  return value;
};

Watcher.prototype.update = function() {
  const oldValue = this.value;
  this.value = this.get();
  this.cb.call(this.vm, this.value, oldValue);
};

在上述代码中,Watcher 实例在 get 方法中将自身设置为 Dep.target,然后访问 computed 属性,从而触发依赖数据的 get 方法,完成依赖收集。

3.2 缓存策略

Computed 属性具有缓存机制,只有在依赖数据发生变化时,才会重新计算。

3.2.1 缓存实现

Vue 通过 Watcher 实例的 dirty 属性来控制缓存。

function Watcher(vm, expOrFn, cb, options) {
  this.vm = vm;
  this.getter = expOrFn;
  this.cb = cb;
  this.dirty = this.lazy = !!options.lazy;
  this.value = this.lazy ? undefined : this.get();
}

Watcher.prototype.evaluate = function() {
  this.value = this.get();
  this.dirty = false;
};

Watcher.prototype.get = function() {
  pushTarget(this);
  let value;
  const vm = this.vm;
  try {
    value = this.getter.call(vm, vm);
  } finally {
    popTarget();
  }
  return value;
};

Watcher.prototype.update = function() {
  if (this.lazy) {
    this.dirty = true;
  } else {
    this.run();
  }
};

在上述代码中,Watcher 实例的 dirty 属性用于标记 computed 属性是否需要重新计算。

当依赖数据发生变化时,Watcherupdate 方法会将 dirty 设置为 true,表示需要重新计算。

3.2.2 惰性求值

Computed 属性在首次访问时才会进行计算,之后会根据 dirty 属性决定是否重新计算。

function createComputedGetter(key) {
  return function computedGetter() {
    const watcher = this._computedWatchers && this._computedWatchers[key];
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate();
      }
      if (Dep.target) {
        watcher.depend();
      }
      return watcher.value;
    }
  };
}

在上述代码中,createComputedGetter 函数返回一个 computed 属性的 getter 函数。

在访问 computed 属性时,如果 dirtytrue,则会调用 watcher.evaluate 方法进行计算,并将 dirty 设置为 false,表示计算结果已缓存。

4. Computed 属性的优化

4.1 避免不必要的计算

在定义 computed 属性时,应尽量避免不必要的计算。

例如,如果 computed 属性的计算逻辑较为复杂,可以考虑将其拆分为多个简单的 computed 属性。

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  formattedName() {
    return this.fullName.toUpperCase();
  }
}

4.2 使用 Watcher 进行性能优化

在某些情况下,可以使用 watch 选项来替代 computed 属性,以实现更细粒度的控制和性能优化。

watch: {
  firstName: 'updateFullName',
  lastName: 'updateFullName'
},
methods: {
  updateFullName() {
    this.fullName = `${this.firstName} ${this.lastName}`;
  }
}

5. 总结

Vue 的 computed 属性通过依赖追踪和缓存策略,实现了响应式计算和性能优化。

在实现原理上,computed 属性依赖于 Vue 的响应式系统,通过 Watcher 实例进行依赖收集和缓存控制。

通过深入理解和掌握 computed 属性的实现原理,开发者可以更好地利用这一特性,提高应用的性能和可维护性。

在实际开发中,应根据具体需求合理使用 computed 属性,并结合其他优化手段,如避免不必要的计算和使用 Watcher 进行细粒度控制,从而构建高效、稳定的 Vue 应用。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文