Vue 源码解析之 Computed 原理解密

2023-11-27 00:52:02

前言

在 Vue.js 中，Computed 计算属性是一个非常重要的概念，它允许你通过其他属性计算出一个新的属性。这可以极大地简化你的代码，使你的应用程序更加清晰易读。在本文中，我们将从源码的角度深入探索 Computed 计算属性的原理，帮助你更深入地理解 Vue.js 的内部机制。

Computed 计算属性的语法

首先，我们先来回顾一下 Computed 计算属性的语法。Computed 计算属性是一个函数，它返回一个值。这个函数可以依赖于其他属性的值，当这些属性的值发生变化时，Computed 计算属性的值也会发生变化。

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

在上面的示例中，我们定义了一个名为 fullName 的 Computed 计算属性，它依赖于 firstName 和 lastName 这两个属性。当 firstName 或 lastName 的值发生变化时，fullName 的值也会发生变化。

Computed 计算属性的实现原理

那么，Vue.js 是如何实现 Computed 计算属性的呢？让我们从源码中寻找答案。

在 Vue.js 的源码中，Computed 计算属性的实现主要集中在 src/core/instance/state.js 文件中。在这个文件中，有一个名为 initComputed 的方法，它负责初始化 Computed 计算属性。

initComputed: function () {
  var vm = this
  vm._computedWatchers = {}
  var computed = vm.$options.computed
  for (var key in computed) {
    var userDef = computed[key]
    var getter = typeof userDef === 'function' ? userDef : userDef.get
    if (getter === undefined) {
      warn(
        'Getter is missing for computed property "' + key + '".',
        vm
      )
    }
    // create internal property
    var watcher = vm._createWatcher(getter, null, null, key)
    if (!watcher.filters) {
      watcher.filters = []
    }
    vm._computedWatchers[key] = watcher
    defineComputed(vm, key, userDef)
  }
},

在 initComputed 方法中，Vue.js 会为每个 Computed 计算属性创建一个 Watcher 实例。Watcher 实例负责监听 Computed 计算属性依赖的属性的变化，当这些属性的值发生变化时，Watcher 实例就会触发回调函数，重新计算 Computed 计算属性的值。

Computed 计算属性的优势

使用 Computed 计算属性可以带来很多好处，包括：

简化代码：Computed 计算属性可以让你将复杂的计算逻辑封装成一个函数，从而使你的代码更加清晰易读。
提高性能：Computed 计算属性可以避免不必要的重新渲染。只有当 Computed 计算属性依赖的属性发生变化时，Computed 计算属性才会重新计算。
增强响应性：Computed 计算属性可以使你的应用程序更加响应。当 Computed 计算属性依赖的属性发生变化时，Computed 计算属性的值会立即更新，从而使你的应用程序能够及时地响应用户的操作。