vue中监听器(watch)和计算属性(computed)的区别

164 阅读1分钟

computed(计算属性)

计算属性,顾名思义就是用来计算某些运算某些值,像简单的加减乘除

image.png

生活中很多用到的场景,最常见的比如像是在我们买单的时候购物车所有商品的价格,可以充当变量的值。

当然,既然是可以作为变量的值, 所以不要和data里重名, 用法和data相同。

特点:计算属性的依赖项一旦发生变化,他就会改变返回值。

当然,他不止作用于此,他还能基于依赖项的值进行缓存,依赖的变量不变, 都直接从缓存获取结果。

依赖项不变, 直接从缓存取。

依赖项改变, 函数自动执行并重新缓存。

完整的计算属性写法:

image.png

get是获取,而set是获取到手然后修改

在使用复选框的时候挺常用的,全选反选就是通过计算属性获取并且修改。

监听器(watch)

像日常生活中看到的摄像头那样,记录和监视人们的一举一动,而vue里的监听器也是如此,是记录某个属性发生变化的一个过程

监听器可以监听计算属性和data他们变量的值的变化,语法如下:

image.png

newval和oldval我这里变化前的值和变化后的值

当然,这仅仅是监听基本类型而已,那么,如果我要监听复杂类型的呢,像对象那种呢? 我们就需要用到深度监听

image.png

immediate:true是我已进入浏览器就会立即执行监听器,

而deep:true是说明开启了深度监听