由浅入深，解读Vue.js中的计算属性

2023-10-01 16:32:44

前言

Vue.js是一种流行的前端框架，以其简单易用、功能强大而著称。计算属性是Vue.js中实现数据响应式的重要特性之一，它允许您定义一个属性，该属性的值取决于其他属性的值，并且当这些其他属性的值发生变化时，计算属性的值也会自动更新。

计算属性的源码解析

计算属性在Vue.js中是以computed选项实现的。该选项接受一个函数作为值，该函数返回计算属性的值。当计算属性的依赖项发生变化时，该函数将被重新执行，并且计算属性的值将被更新。

计算属性的源码如下：

export function computed(getterOrOptions) {
  let getter
  let setter
  const onlyGetter = typeof getterOrOptions === 'function'
  if (onlyGetter) {
    getter = getterOrOptions
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }
  if (__DEV__ && getter && !setter) {
    warn(
      'Computed property getter/setter should be both present or absent.',
      getter
    )
  }
  if (getterOrOptions.lazy === true) {
    computed.lazy = true
  }

  const watcher = new Watcher(
    vm,
    getter,
    undefined,
    computedOptions,
    true // isComputed
  )
  defineComputed(vm, getterOrOptions.name || '$computed', () => watcher.value)
  if (setter) {
    defineComputed(vm, getterOrOptions.name || '$computed', setter, {
      lazy: true
    })
  }
}

从源码中我们可以看出，计算属性实际上就是一个特殊的观察者（Watcher），它会监视计算属性的依赖项，当这些依赖项发生变化时，计算属性的值将被更新。

计算属性的用法

计算属性的用法非常简单，您只需在Vue组件中定义一个computed选项，并在该选项中指定一个函数即可。例如：

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

在上面的示例中，我们定义了一个名为fullName的计算属性，该属性的值由firstName和lastName属性的值组成。当firstName或lastName属性的值发生变化时，fullName属性的值也会自动更新。

计算属性的面试题参考回答

计算属性是前端面试中常见的一个题目，以下是几个常见的面试题及其参考回答：

计算属性是如何实现的？

计算属性实际上就是一个特殊的观察者（Watcher），它会监视计算属性的依赖项，当这些依赖项发生变化时，计算属性的值将被更新。
计算属性有什么用？

计算属性可以帮助您将复杂的数据结构和计算逻辑封装成一个简单易用的属性，从而使您的代码更加清晰和易于维护。
计算属性和侦听器（Watcher）有什么区别？

计算属性和侦听器都是用来响应数据变化的，但它们之间存在一些区别。计算属性是惰性的，这意味着它只有在被访问时才会被计算。而侦听器是立即执行的，这意味着当侦听器所依赖的数据发生变化时，它将立即执行。