Vue构造选项computed和watch的区别?

146 阅读1分钟

首先我要吐槽一下子,为啥会有脑残的人问这个问题?这两个东西会有这么难以分清嘛!computed不就是computed嘛,watch不就是watch嘛,言简意赅,分的很清楚嘛。有人说你这是洋文这咋理解啊,呃呃呃,原来大家只是英文不好,所以问这个问题。

以上是和大伙开个玩笑,这是我引用的一个知名的前端大神的话。

Vue里面computed就是计算属性,wacth就是侦听的意思。computed是用来计算一个值的,我们调用的时候不需要加括号,当属性一样用,它有缓存,依赖不变,computed的值不会重新计算;watch就是用来监听的,它有两个选项,immediate,表示是否第一次渲染的时候要执行这个函数,deep表示监听一个对象,是否要监听这个对象里面的属性。

计算属性

如果依赖的属性没有变化,就不会宠幸计算 默认只有getter,但是需要时可以提供setter,getter/setter默认是不会做缓存的,Vue在这里做了特殊处理。

侦听属性

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。 watch是异步的,它类似于$nextTick(Vue中封装的类似setTimeout的API),它会可以确保我们操作的是更新后的DOM之类的异步的。