计算属性和监听属性

计算属性（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将直接返回之前计算并缓存的结果，这种机制大大提高了性能。

优势

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

应用场景

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

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

监听属性（Watchers）

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

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

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

优势

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

应用场景

需要在数据变化时执行异步操作，如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`是一个对象，可以开启深度监听
}