
Vue中,computed 和 watch 都是用来监听数据变化并执行对应操作的,但是两者有一些区别。
1. 监听的方式:computed 是基于依赖追踪的响应式系统,它会自动追踪依赖的数据,并在依赖数据改变时重新计算值。而 watch 则是监听指定数据的变化,在数据变化时执行相应的回调函数。
2. 使用方式:computed 是一个计算属性,它的值会被缓存,只有在依赖的数据变化时才会重新计算。可以将 computed 属性当作普通属性来使用。而 watch 是一个观察者,它可以观察某个数据的变化并执行回调函数。watch 一般用于监听一个表达式的值的变化,可以执行异步操作。
3. 作用范围:computed 适用于计算一个或多个属性的值,并返回结果,可用于模板中。watch 则适用于观察和响应某个数据的变化,一般用于监听数据的改变并执行某些操作,如发送网络请求、触发副作用等。
4. 计算的时机:computed 是在模板渲染时被调用,只要依赖的数据发生变化,computed 就会立即重新计算。而 watch 是在数据变化后被调用,可以执行异步或复杂操作。
5. 依赖关系:computed 只会追踪其所依赖的数据,如果依赖的数据没有发生变化,computed 就不会重新计算。而 watch 可以监听多个数据,通过配置 deep 选项可以深度监听对象的属性。
6. 适用场景:使用 computed 更加适合计算一些需要缓存的属性,或者需要根据多个数据计算一个新的值。而 watch 更适合对某个数据做出反应,执行一些副作用操作,如异步获取数据、触发动画等。
总结来说,computed 应用于对现有数据的计算,根据依赖的数据自动计算结果,并缓存结果;而 watch 适用于监听某个数据的变化,在数据变化时执行相应的回调函数。两者在使用时需根据具体需求进行选择。