注册

关于compute你不知道的骚操作

compute的的用法


首先你要知道computed的用法,在官网中只是简单的介绍了它的缓存作用,根据双向绑定的数据通过计算返回值,当被依赖的值发生改变的时候就会触发重新计算


image.png


很多人 就只知道这个只能用来计算值并不能作为其他的用法,其实根据它依赖双向绑定的数据可以监听多个数据,这句话怎么理解呢?就是我们都知道watch只能监听一个数据对象,但是有时候我们要监听多个对象的时候就要写很多个watch方法,而且会触发很多次,很多时候我们要监听的数据并不是1个,而且我们监听的是异步的,这个时候就可以用computed去解决。如果你看到这里还不明白什么意思,你可以看看下面的例子。


image.png


image.png


这里我监听了2个双向绑定的数据 一个是testData,一个是test3,然而test3 会在挂载之后的下一次更新发生改变,当这个改变发生的时候 会再次触发computed的方法,这个时候就代表我监听到了这个变化了,反过来想我是不是监听到了2个双向绑定的数据,那么结果就是 监听单个数据的变化 可以用watch,监听多个数据变化可以考虑computed,有人觉得我另一个数据没有改变,这也是只是监听了一个数据,我改了下代码。让另一个数据也发生改变。


image.png


image.png
可以看到这里触发了3次,为啥有3次 我解释下,computed本身是处于created 跟mounted的生命周期之间会自己去调用的,这是第一次,mounted里面的$nextTick方法里面test3改变的时候触发了一次,setTimeout里面testData改变的时候 就是第三次了。也就是说它监听的双向绑定数据改变的时候都会触发 ,这样子就可以达到监听多个数据的目的了。
适用的场景有 表单校验的时候,所有数据填完按钮点亮 这个时候就可以监听多个,还有就是多个异步返回的数据同时满足条件的时候可以监听。


有这么一个场景 ,一个列表是个数组会增加,高亮的地方(也就是下标会改变),只要一个改变就执行操作,你们会用什么去监听呢?


最后抛个问题


image.png


作者:Try to do
链接:https://juejin.cn/post/7012543084923715591

0 个评论

要回复文章请先登录注册