Vue系列（四）—— 计算属性，妈妈再也不用担心我的计算啦
Hello小伙伴们，上一次我们介绍了怎样绑定class和style，是不是很简单呢？今天我们要开始放大招啦——小伙伴们还记得被各种折腾数据折磨的日子吗，今天我们就要来解决这个问题！
计算属性
>>>>
计算属性
使用模板语言，可以直接在模板中进行简单的运算。但是如果运算过于复杂，就不易于读懂代码，并维护代码了，这个时候就需要计算属性了
我们可以像绑定一个方法一样，绑定一个计算属性。
<div id="RabbitFamily">
<p>Rabbitname: "{{ name}}"</p>
<p>Rabbit’sreverse name: "{{ reversedName }}"</p>
</div>
var vm = new Vue({
el: '#RabbitFamily',
data: {
name: 'SnowBall'
},
computed:{
reversedName: function () {
returnthis.name.split('').reverse().join('')
}
}
})
>>>>
我们不一样
既然前面说了绑定计算属性和绑定方法非常相似，并且通过绑定方法也可以达到一样的功能，那么又有什么区别呢？
事实上，虽然他们俩长得像兄弟俩，其实还真是不一样。计算属性是基于它们的响应式依赖进行缓存的，这意味着什么呢？因为对数据的计算可能存在很复杂的计算，很大的计算量，这就需要很大的开销了，如果采用一个方法去执行，每当触发重新渲染的时候就要重新执行函数，那会造成很大程度的资源浪费。而计算属性不同于方法绑定，因为有缓存的存在，在相关响应式依赖发生改变时才会重新求值。像上例中name没有变，就不用重复请求了。
侦听器
虽然计算属性很好用，但是有的时候计算属性也不是万能的，比如说数据变化的时候要执行异步或开销较大的操作的时候。
<div id="RabbitFamily">
<p>Rabbitname: "{{ name}}"</p>
<p>Rabbit’sreverse name: "{{ reversedName }}"</p>
</div>
var vm = new Vue({
el: '#RabbitFamily',
data: {
name: 'SnowBall',
reversedName:''
},
watch: {
reversedName: function (name) {
this.reversedName= this.getReversedName().split('').reverse().join('')
}
},
methods:{
getReversedName: function(){
var self = this
axios.get("")
.then(function (response) {
self.name= response.data.name
})
.catch(function (error) {
self.name = 'Error! ' + error
})
}
}
})
好啦~今天的分享就到这里啦，喜欢兔妞文章就请关注+在看吧~~