今天聊一聊计算属性computed和watch的区别,在面试前端时,有不少前端的同学都会遇到的面试题,可以说命中率特别高
计算属性computed和watch
它们的相同点--- 都是具有监听数据的属性
对于他们的不同点
computed:
1.它是支持缓存的,当依赖项发生变化时才会进行改变
2.不支持异步操作,当发生异步操作时,是无法进行监听的
3.如果computed需要对修改数据,需要进行手动调用,那么就需要调用两个参数,get和set,当数据发生改变时,会调用set
4.一个数据受多个数据影响,例如购物车计算总价
watch:
而watch恰恰相反
1.不支持缓存,只要数据发生改变,就会自动触发相应的操作
2.支持异步操作,在监听函数时会接受两个参数,一个参数是新值,第二个是输入之前的值
3.当immediate: true时,侦听函数会马上执行
4.如果想要侦听数组或者对象,需要对其进行深度监听,把侦听器写成对象形式, 给handler方法和deep:true
这两个方法在项目中的应用场景特别多,大家按需使用就可以啦
例如:
computed擅长处理的场景:购物车计算总价
watch擅长处理的场景 :搜索框