发现宝藏
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。
在 Vue 中，watch、computed 和 methods 都是常用的响应式功能，它们的用途和工作方式有所不同。下面分别解释它们的区别：
1. watch 和 computed 的区别
watch：
- 用于观察和响应数据变化。它用于监听某个数据的变化，并在数据变化时执行一个特定的回调函数。常用于异步操作、数据获取或当数据变化时需要进行复杂的操作。
watch是基于数据变化进行副作用处理，它不会直接在模板中使用，而是用于处理那些对模板不直接显示的行为（比如异步请求或其他副作用）。- 适用于当某个数据变化时需要执行某些操作，但不一定需要计算值并返回给模板的情况。
示例：
data() {return {count: 0}
},
watch: {count(newValue, oldValue) {console.log(`count changed from ${oldValue} to ${newValue}`);// 可以在此做异步操作或副作用}
}
computed：
computed用于计算派生状态，它根据其他数据的变化来计算一个新的值，并且会缓存计算结果，直到相关依赖的值发生变化。computed主要用于模板中的数据绑定，提供一个基于已有数据的计算结果。computed是基于依赖的值进行缓存的，只有当其依赖的值发生变化时，它才会重新计算。
示例：
data() {return {count: 0}
},
computed: {doubledCount() {return this.count * 2;}
}
主要区别总结：
watch是用于监听数据变化，并执行副作用操作（比如异步请求、手动修改 DOM 等），而computed用于计算和缓存值，通常用于模板中展示的派生数据。computed会基于依赖的变化进行缓存，只有相关依赖变化时才会重新计算，而watch每次数据变化都会触发回调函数。
2. computed 和 method 的区别
computed：
computed用于定义计算属性，它会根据其他响应式数据计算并返回一个值。计算结果会被缓存，只有当其依赖的响应式数据发生变化时，才会重新计算。computed是基于数据的变化计算结果，且自动缓存，性能上比methods更高效，适用于需要依赖其他数据并返回计算结果的场景。
示例：
data() {return {a: 10,b: 20};
},
computed: {sum() {return this.a + this.b;}
}
method：
method是普通的方法，它不会缓存计算结果。每次调用method时，都会重新执行函数体，不依赖于是否有其他数据变化。methods常用于处理事件或调用其他函数等，不会像computed那样自动依赖于数据变化并进行缓存。
示例：
data() {return {a: 10,b: 20};
},
methods: {sum() {return this.a + this.b;}
}
主要区别总结：
computed会基于数据的变化计算并缓存结果，只有依赖的响应式数据发生变化时才会重新计算，而methods每次调用都会执行，无法缓存计算结果。computed通常用于模板中显示的计算值，而methods更多用于处理用户交互、事件处理和普通功能操作。
总结：
watch用于监听数据变化并执行副作用操作。computed用于计算并缓存派生数据，通常在模板中使用。methods用于定义普通函数，每次调用都会执行，适用于事件处理和其他功能。