Vue 中 computed 和 watch 的区别

简介: Vue 中 computed 和 watch 的区别

1、computed - 计算属性

computed 是依赖 Vue 的 options 中的 data 内部属性,计算出一个新的值的,可以当作属性直接用,但是其实为函数。


computed 在使用的过程中不需要加 () 。Vue 会自动去读取其函数的返回值。


computed 会根据依赖进行自动缓存。如果依赖的 data 数据不变,computed 就不会重新计算。

2、watch - 监听

watch 是用来 监听 属性变化的,当属性变化后就会调用 watch 属性内对应的函数。


watch 有一个 immediate 属性,表示是否对 数据第一次渲染 进行监听,执行对应的 watch 函数。


watch 有一个 deep 属性,表示如果要监听一个对象类型的 data 变化时,是否要监听该 data 内部属性的变化。


除了 watch 选项外还可以使用命令式的 vm.$watch,Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

3、总结:

1、如果一个数据依赖于其他数据,那么把这个数据设计为 computed 的。

2、如果你需要在某个数据变化时做一些事情,使用 watch 来观察这个数据变化。

3、computed 主要用于对同步数据的处理,watch 则主要用于观测某个值的变化,$nextTick() 可以了解一下。

目录
相关文章
|
2月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
294 2
|
1月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
277 137
|
4月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
258 0
|
缓存 JavaScript
vue中computed和watch的区别
vue中computed和watch的区别
138 0
|
缓存 JavaScript
Vue 中的 computed 和 watch 的区别
Vue 中的 computed 和 watch 的区别
|
缓存 JavaScript 前端开发
Vue 中的 computed 和 watch 的区别
Vue 中的 computed 和 watch 的区别
388 0
|
缓存 JavaScript
Vue中computed和watch的区别
1、支持缓存,只有依赖数据发生改变,才会重新进行计算 2、不支持异步,当computed内有异步操作时无效,无法监听数据的变化
304 0
Vue中computed和watch的区别
|
缓存 JavaScript
Vue中的computed和watch的区别
Vue中的computed和watch的区别
221 0
Vue中的computed和watch的区别
|
缓存 监控 JavaScript
vue相关面试题:computed和watch区别
★主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作,可以看作是 computed 和 methods 的结合体; ★可以监听的数据来源:data,props,computed内的数据; ★watch支持异步; ★不支持缓存,监听的数据改变,直接会触发相应的操作; ★监听函数有两个参数,第一个参数是最新的值,第二个参数是输入之前的值,顺序一定是新值,旧值
256 0