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的监听方式是:简单数据类型看值,复杂数据类型(对象)看地址