标签：前端 compute 有一个 改变 一个 关系 而且 fun 标签
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div>
{{ message.split(‘‘).reverse().join(‘‘) }}
</div>
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。
<div id = ‘com‘>
<h3>{{msg}}</h3>
<p>{{currentMsg}}</p>
<button @click=‘clickHandler‘>更改</button>
</div>
var com = new Vue({
el:‘#com‘,
data:{
msg:‘学习computed‘
},
methods:{
clickHandler(){
this.msg = ‘我更改了数据‘
}
},
computed:{
currentMsg(){
// computed方法中默认只有getter
return this.msg
}
}
})
当我点击按钮的时候更改了当前的数据，同时h3和p标签中数据也随时改变。
为什么会这样呢？
因为Vue知道com.currentMsg依赖与com.msg,因此当com.msg发生改变时，所有依赖com.currentMsg的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系。：计算属性的getter函数是没有副作用的，这使它更易于测试和理解。
同样的上面操作，我们不用computed声明的计算属性方法，而仅仅通过methods中声明的方法也能完成上面的效果，那么为什么又要使用computed方法呢？
因为计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要msg还没有发生变化，多次访问currentMsg计算属性会立刻返回之前计算的结果，而不比再次执行函数。同样的。每当触发重新渲染时，调用方法将总会执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
计算属性默认只有getter，不过在需要时你也可以提供一个setter。
var com = new Vue({
el:‘#com‘,
data:{
msg:‘学习computed‘
},
methods:{
clickHandler(){
this.currentMsg = ‘我更改了数据‘
}
},
computed:{
currentMsg:{
set : function(newValue){
this.msg = newValue;
},
get : function(){
return this.msg;
}
}
}
})
当点击按钮的时候，会触发computed中的setter方法，从而将newValue的值，赋值给msg。因为计算属性方法的getter方法因为跟msg有依赖关系，从而会相应的发生改变。
标签：前端 compute 有一个 改变 一个 关系 而且 fun 标签
原文地址：https://www.cnblogs.com/jiangshanduojiao/p/9086900.html
