《常见面试题》—计算属性computed和watch的区别

128 阅读1分钟

今天聊一聊计算属性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擅长处理的场景 :搜索框

db56a329c46f5c74e35cef1acfa36762_t.gif