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
})
}
}
})
好啦~今天的分享就到这里啦,喜欢兔妞文章就请关注+在看吧~~