一、computed（计算属性）
1. 定义
计算属性是基于 Vue 实例的响应式数据进行计算的属性。它们的值会根据依赖的数据变化而自动更新，并且会被缓存，只有当其依赖的数据发生变化时才会重新计算。
2. 使用场景
- 衍生状态：当你需要从现有的数据中派生出新的数据时，使用计算属性非常方便。
- 性能优化：由于计算属性会缓存结果，适合在多个地方使用同一计算结果时，避免重复计算。
new Vue({el: '#app',data() {return {firstName: 'John',lastName: 'Doe'};},computed: {fullName() {return `${this.firstName} ${this.lastName}`;},reversedFullName() {return this.fullName.split('').reverse().join('');}}
});
在这个示例中：
fullName 是一个计算属性，它将 firstName 和 lastName 合并为一个完整的名字。
reversedFullName 依赖于 fullName，它返回反转的完整名字。
4. 优缺点
优点：
- 自动缓存：仅在依赖项变化时重新计算，提高性能。
- 语法简洁明了，易于理解。
缺点：
- 主要用于计算，不适合执行副作用（如 API 调用）。
二、watch（侦听器）
1. 定义
watch 是一种监视 Vue 实例上的数据变化的机制。当被监视的数据变化时，对应的回调函数会被触发。
2. 使用场景
- 异步操作：当你需要在数据变化时执行异步操作（如 API 请求），使用 watch 可以很方便。
- 复杂逻辑处理：当需要在数据变化时执行复杂的逻辑，而不仅仅是计算一个新值。
new Vue({el: '#app',data() {return {question: '',answer: 'I cannot give you an answer until you ask a question!'};},watch: {question(newQuestion) {this.answer = 'Waiting for you to stop typing...';this.getAnswer(newQuestion);}},methods: {getAnswer(question) {// 模拟 API 请求setTimeout(() => {this.answer = 'This is the answer to your question!';}, 1000);}}
});
在这个示例中：
当 question 发生变化时，会先显示 “Waiting for you to stop typing…” 的提示，然后调用 getAnswer 方法进行模拟的 API 请求。
4. 优缺点
优点：
- 灵活性高，可以执行任何逻辑，包括异步操作。
- 可以监视多个数据源，处理复杂情况。
缺点：
- 不会缓存每次都执行，可能对性能造成影响。
- 代码可读性可能较差，尤其是在多个 watch 的情况下。
三、总结和选择
使用 computed：
当你需要基于已有数据计算出一个新值，并希望在多个地方使用这个值时，使用 computed 是最佳选择。
使用 watch：
当你需要在数据变化时执行特定的逻辑或异步请求，使用 watch 更加合适。
四、结合使用
在实际开发中，computed 和 watch 可以结合使用。例如，你可以使用计算属性来处理数据的展示逻辑，同时使用 watch 来处理数据变化后的副作用。
new Vue({el: '#app',data() {return {searchQuery: '',results: []};},computed: {filteredResults() {return this.results.filter(result => result.includes(this.searchQuery));}},watch: {searchQuery(newQuery) {this.fetchResults(newQuery);}},methods: {fetchResults(query) {// 这里可以放入 API 调用等逻辑来获取新结果// 假设我们只更新 results 数据this.results = ['apple', 'banana', 'cherry'].filter(item => item.includes(query));}}
});
在这个例子中：
使用 filteredResults 计算属性根据 searchQuery 过滤 results。
使用 watch 在 searchQuery 变化时调用 fetchResults 更新 results。
通过合理使用 computed 和 watch，可以使 Vue 应用更加高效和响应式。
五 总结
computed：
- 计算属性，主要用于基于其他数据进行计算并返回值。
- 适用于那些需要依赖于其他状态（数据）并在这些状态变化时自动更新的情况。
- 计算属性会被缓存，只有在其依赖的数据发生变化时，才会重新计算。
watch：
- 观察者，用于监视 Vue 实例上的数据变更。
- 适用于需要在数据变化时执行异步操作或开销较大的操作，比如 API 请求或手动操作 DOM 的场景。
- watch 不会缓存结果，每次监视的数据变化时都会执行回调函数。