Vue.js 中的 computed
和 watch
是用来监控 Vue 实例中数据变化的两种方式,它们各自适用于不同的场景。
computed
的使用场景
-
派生数据:当有一些数据是依赖于其他数据计算得出的,可以使用
computed
来创建一个计算属性,以保持这些派生数据的同步更新。 -
模板中的过滤和处理:如果需要在模板中展示经过处理或者过滤后的数据,可以使用
computed
来实现对数据的处理和过滤,并且将处理后的数据直接在模板中使用。 -
缓存结果:
computed
计算属性默认具有缓存功能,只有在依赖的响应式数据发生改变时才会重新计算,这样可以避免不必要的重复计算。new Vue({ data: { a: 10, b: 20 }, computed: { sum: function() { return this.a + this.b; } } }); // 在模板中可以直接使用计算属性 sum,而无需手动调用计算方法
watch
的使用场景
-
监听特定数据的变化:当需要监听某个数据的变化并且进行相应的操作时,可以使用
watch
。例如,可以通过watch
监听特定数据的变化并进行异步操作、网络请求等。 -
深度监听:在需要深度监听对象或数组内部值的变化时,可以使用
watch
并设置deep: true
。 -
监听路由变化:在 Vue Router 中,可以使用
watch
监听$route
对象的变化,根据路由的变化执行相应的操作。new Vue({ data: { message: 'Hello, Vue!' }, watch: { message: function(newVal, oldVal) { console.log('消息发生变化:' + newVal); } } }); // 当 message 数据发生变化时,会触发 watch 中的函数,并打印出新的消息内容
总的来说,computed
适合处理一些需要计算得出的数据,而 watch
更适合监听数据的变化并做出相应的响应。