计算属性和监听属性

计算属性（Computed Properties）

定义: 计算属性是基于它们的依赖进行缓存的，只有当依赖发生变化时，它们才会重新计算。这使得计算属性在性能上很有优势，避免了不必要的重复计算。

适用场景: 当你需要根据某个或某些数据属性计算出一个新值，并且这个计算过程较为复杂或者计算结果会被多次使用时，计算属性是理想的选择。

代码示例:

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    // 计算全名
    fullName() {
      return `${this.firstName} ${this.lastName}`; // 📝 当firstName或lastName变化时，fullName自动更新
    }
  }
};

计算属性（Computed Properties）

工作原理

计算属性是基于它们依赖的数据属性进行计算的，Vue通过getter和setter方法来实现这一机制。当你在模板中访问一个计算属性时，Vue会调用对应的getter方法来获取值。Vue会跟踪计算属性中依赖的所有数据属性，并在这些依赖项发生变化时自动重新计算计算属性的值。重要的是，如果依赖项没有变化，Vue将直接返回之前计算并缓存的结果，这种机制大大提高了性能。

优势

1. 缓存性：Vue自动管理计算属性的缓存，这意味着只有当相关依赖发生变化时，才会重新计算，否则直接从缓存中读取。
2. 声明式绑定：在模板中可以直接绑定计算属性，使代码更易于理解和维护。
3. 适合复杂的逻辑处理：对于需要处理多个数据源并生成新值的情况，计算属性提供了一个清晰的抽象层。

应用场景

• 当需要根据现有的数据属性生成一个新的、只读的属性时。
• 对于需要频繁使用的计算逻辑，避免重复代码和不必要的计算。

computed: {
  formattedPrice() {
    const price = this.price;
    return `$${price.toFixed(2)}`; // 格式化价格，只在`price`变化时重新计算
  }
}

监听属性（Watchers）

监听属性允许你监视Vue实例上的任何数据属性的变化。当被监视的属性值发生变化时，Vue会调用定义好的回调函数。这个回调可以接收新值和旧值作为参数，非常适合执行一些副作用操作，如发送网络请求、更新DOM等。

定义: Watcher允许你执行异步操作或昂贵的操作，当某个特定属性变化时，会触发定义的回调函数。它不进行缓存，每次依赖变化时都会执行。

适用场景: 如果需要在某个数据变化时执行一些副作用操作，比如发起网络请求、修改DOM等，这时应该使用Watcher。

优势

1. 执行副作用：非常适合执行那些数据变化后需要进行的额外操作。
2. 灵活性：可以监听任意深度的变化，并通过配置deep: true来监视嵌套对象的变更。
3. 控制流：在回调函数中，你可以有更多控制权，比如决定何时执行异步操作。

应用场景

• 需要在数据变化时执行异步操作，如API调用。
• 执行需要一定条件判断的操作，而不是简单的数据转换。
• 监视深层对象或数组的变化。

代码示例:

export default {
  data() {
    return {
      question: ''
    };
  },
  watch: {
    // 监听question的变化
    question(newQuestion, oldQuestion) {
      if (newQuestion !== oldQuestion && newQuestion.length > 0) {
        this.fetchAnswers(); // 📡 当question变化且不为空时，发起获取答案的请求
      }
    }
  },
  methods: {
    fetchAnswers() {
      // 发起网络请求逻辑...
    }
  }
};

watch: {
  searchQuery(newQuery, oldQuery) {
    if (newQuery !== oldQuery) {
      this.fetchSearchResults(newQuery); // 当`searchQuery`变化时，执行搜索请求
    }
  },
  deep: true // 如果`searchQuery`是一个对象，可以开启深度监听
}

区别总结

• 计算属性侧重于简化模板表达式，提供基于其他数据属性的衍生数据，并且有自动缓存机制，适合于纯计算场景。
• 监听属性则更适用于执行副作用操作，特别是需要在数据变化后执行一些非计算逻辑时，它是触发异步或高成本操作的理想选择。