美文网首页
Vue(4)computed,watch,methods

Vue(4)computed,watch,methods

作者: show_萧佩 | 来源:发表于2020-07-29 14:59 被阅读0次

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

    相关文章

      网友评论

          本文标题:Vue(4)computed,watch,methods

          本文链接:https://www.haomeiwen.com/subject/tjzxrktx.html