一、计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<body> <div id="computed"> <div> {{msg.split('').reverse().join('')}} </div> </div> <script type="text/javascript" src="./vue.js"></script> <script type="text/javascript"> var com = new Vue({ el: "#computed", data:{ msg:"Hello World" } }) </script> </body>
在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message
的翻转字符串。显示效果如下:
当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。
所以,对于任何复杂逻辑,都应当使用计算属性。
<body> <div id="computed"> <div> <!--{{msg.split('').reverse().join('')}}--> {{reverseStr}} </div> <button @click="clickHandler">修改</button> </div> <script type="text/javascript" src="./vue.js"></script> <script type="text/javascript"> var com = new Vue({ el: "#computed", data:{ msg:"Hello World" }, methods:{ clickHandler(){ this.msg = 'Hello Luffy' } }, computed:{ // 计算属性: watch监听 // 默认只有getter方法 reverseStr(){ return this.msg.split('').reverse().join(''); } } }) </script> </body>
当我点击按钮的时候更改了当前的数据,同时h3和p标签中数据也随时改变。
(1)为什么会这样呢?
因为Vue知道com.currentMsg依赖与com.msg,因此当com.msg发生改变时,所有依赖com.currentMsg的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系。:计算属性的getter函数是没有副作用的,这使它更易于测试和理解。
(2)同样的上面操作,我们不用computed声明的计算属性方法,而仅仅通过methods中声明的方法也能完成上面的效果,那么为什么又要使用computed方法呢?
因为计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要msg还没有发生变化,多次访问currentMsg计算属性会立刻返回之前计算的结果,而不比再次执行函数。同样的。每当触发重新渲染时,调用方法将总会执行函数。
扫描二维码关注公众号,回复:
3126653 查看本文章
(3)我们为什么需要缓存?
假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。