Vue(4)computed,watch,methods

2020-07-29  本文已影响0人  show_萧佩

computed和watch,methods的区别

1.computed是计算属性

它会根据所依赖的数据动态显示新的计算结果,计算的结果会被缓存起来。

computed的值在getter被执行之后会被缓存的,如果依赖的数据发生变化,getter就会发生变化

运用computed 结果

vm.reversedMsg依赖于vm.msg,vm.msg的值改变时,vm.reversedMsg的值也会改变

computed应用场景

1. 适用于一些重复使用数据或复杂及费时的运算。我们可以把它放入​computed​中进行计算, 然后会在​computed​中缓存起来, 下次就可以直接获取了。

2. 如果我们需要的数据依赖于其他的数据的话, 我们可以把该数据设计为​computed​中。

与methods的区别

3.同样的我们采用methods也可以实现同样的效果

与computed的区别

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

与watch的区别

watch,侦听数据data的变化,当data数据发生变化的时候,执行函数,并传入newVal和oldVal两个参数。

我们引入一个例子

点击​n+1​ : 打印出​“n 变了”​

点击​obj.a + 'hi'​ : 打印出​“obj.a 变了”​,不打印​"obj 变了"​

不点击​obj.a + 'hi'​ , 点击​obj = 新对象​ : 打印出​"obj 变了"​,不打印​"obj 变了"​

说明watch的监听方式是:简单数据类型看值,复杂数据类型(对象)看地址

上一篇下一篇

猜你喜欢

热点阅读