用一道题带你重温Vue.js computed的缓存和响应式原理

2023-10-13 05:34:25

在 Vue.js 中，Computed 属性是一种特殊类型的数据属性，它基于组件中其他响应式数据的组合值进行计算。与常规数据属性不同，Computed 属性的值不是直接存储的，而是通过一个 getter 函数计算出来的。本文将深入探讨 Computed 属性的缓存和响应性原理，并提供一些实用的解决方案。

什么是 Computed 属性？

Computed 属性是 Vue.js 中的一种特殊类型的数据属性，它基于组件中其他响应式数据的组合值进行计算。与常规数据属性不同，Computed 属性的值不是直接存储的，而是通过一个 getter 函数计算出来的。

响应性：自动更新

Computed 属性的魅力在于其响应性。当其依赖的数据发生变化时，Computed 属性的值会自动更新。这是通过以下方式实现的：

Vue.js 跟踪 computed 属性依赖的所有响应式数据。
当依赖数据发生变化时，computed 属性将被重新计算。
更新后的值将反映在视图中。

缓存：提高性能

为了提高性能，Vue.js 对 computed 属性的值进行缓存。这意味着，如果依赖数据没有变化，则不会重新计算 computed 属性的值。这有助于防止不必要的重新渲染，从而提高应用程序的性能。

如何实现缓存和响应性

缓存

当一个 computed 属性被创建时，Vue.js 会创建一个 getter 函数。getter 函数仅在 computed 属性首次被访问时被调用。计算出的值被缓存起来，以后的访问将直接返回缓存的值。

响应性

当一个 computed 属性被创建时，Vue.js 会创建一个 getter 和一个 setter 函数。getter 函数计算 computed 属性的值，而 setter 函数更新它。当依赖数据发生变化时，getter 函数被重新调用以计算新值。新值被缓存并更新视图。

如何更新视图

当 computed 属性的值发生变化时，Vue.js 会触发更新视图的过程：

重新渲染所有使用该 computed 属性的模板。
使用新值更新模板。
重新编译模板并更新 DOM。

代码示例

下面是一个 computed 属性的示例：

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
}
</script>