vue.js计算属性原理

Vue.js 的计算属性（Computed Properties）是基于它们的响应式依赖进行缓存的。这意味着只要其依赖的响应式数据没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。

原理：

1. 响应式依赖追踪：当计算属性被访问时，Vue 会自动追踪其依赖的所有响应式数据（通常是 data、props 或其他计算属性）。这些依赖关系被存储起来。
2. 缓存：计算属性的结果会被缓存起来。只有当依赖发生变化时，Vue 才会重新计算该计算属性的值。
3. 惰性求值：如果计算属性依赖的数据没有发生变化，那么计算属性就不会重新执行，而是直接返回缓存的结果。

优势：

1. 性能优化：由于计算属性是基于依赖缓存的，所以对于复杂的逻辑或需要大量计算的场景，使用计算属性可以显著提高性能。
2. 代码清晰：计算属性可以将复杂的逻辑封装起来，使得模板部分更加简洁，易于理解和维护。

类型：

计算属性默认只有 getter，但你也可以提供一个 setter。不过，在大多数情况下，我们只需要 getter。

应用场景：

当你需要根据组件的状态计算派生数据，并且希望这些数据是响应式的时，就可以使用计算属性。例如，根据用户的输入动态计算总价、过滤列表项等。

问题与解决：

如果发现计算属性没有按预期更新，可能是以下原因：

1. 依赖未正确追踪：确保计算属性依赖的所有响应式数据都被正确引用。如果依赖的数据结构发生变化（例如数组或对象的某个属性被修改），但没有触发 Vue 的响应式系统，那么计算属性可能不会更新。可以使用 Vue.set 或 this.$set 来确保数据的响应式更新。
2. 缓存导致的问题：虽然缓存通常是优点，但在某些情况下，你可能希望每次访问计算属性时都执行函数（例如，需要基于当前时间计算值）。在这种情况下，可以考虑使用方法而不是计算属性。

示例代码：

<template>
  <div>
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  computed: {
    reversedMessage() {
      // 这个函数只会在 message 发生变化时被调用
      return this.message.split('').reverse().join('');
    }
  }
};
</script>

在这个例子中，reversedMessage 是一个计算属性，它依赖于 message 数据属性。每当 message 发生变化时，reversedMessage 就会重新计算其值。