Vue（4）computed，watch，methods

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的监听方式是：简单数据类型看值，复杂数据类型（对象）看地址