Vue computed和watch

如题所述

第1个回答  2022-07-21

computed是一个计算属性,类似于过滤器,对绑定到view的数据进行处理,根据计算所依赖的属性动态返回新的计算结果。

computed和data的定义不可重名,否则是会报错的。
computed是基于它们的响应式依赖进行缓存的 ,只在相关响应式依赖发生改变时它们才会重新求值,如果依赖没有改变,多次访问 fullName 这个计算属性,都会立刻返回之前的结果,不必再重新计算。
计算属性默认只有 getter,不过在需要时你也可以提供一个 setter。

watch选项是一个对象,键是data里面的数据,值是对应的回调函数,回调函数有两个参数分别为修改后的值newValue和修改前的值oldValue。Vue 实例将会在实例化时调用$watch(),遍历 watch 对象的每一个属性。

watch在实例加载时是默认不监听的,使用 immediate:true ,可以在首次加载时也做监听。
watch只监听数据的值是否发生改变,而不会去监听数据的地址是否发生改变。也就是说,watch想要监听引用类型数据的变化,需要进行深度监听,使用 deep:true 可进行深度监听。

computed与watch的应用场景:computed一般应用在多个数据影响一个数据的操作,如购物车。watch一般使用在一个数据来影响多个数据的操作,如搜索框

1.computed函数必须用return返回计算的值,watch没有return的必须要求
2.computed有缓存,如果依赖的值没有改变,调用computed函数时则不会执行函数重新计算,直接返回缓存的值。watch没有缓存,每次监听的值发生改变都会执行。

相似回答