計算屬性關(guān)鍵詞:computed
計算屬性用途：用來處理一些復雜邏輯問題棵红。
字符串反轉(zhuǎn)問題相信很多人遇到過吧恒序，我們可以用計算屬性來演示一下
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>計算后反轉(zhuǎn)字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
</script>
在上面例子中，vm.reverseMessage 依賴于vm.message，當vm.message,vm.reverse.message也隨之更新顾稀。
下面我們來看看computed 和 methods的區(qū)別
效果上兩個都是一樣的，但是 computed 是基于它的依賴緩存坝撑，只有相關(guān)依賴發(fā)生改變時才會重新取值静秆。
而使用 methods ，在重新渲染的時候巡李，函數(shù)總會重新調(diào)用執(zhí)行抚笔。
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
個人覺得computed屬性好用一點，當然不存在緩存問題的話击儡，method方法也可以用塔沃。
computed 默認屬性只有g(shù)etter，需要時可以創(chuàng)建setter
<div id="app">
<p>{{ site }}</p>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'haha',
age:20
},
computed:{
site:{
//getter
get:function(){
return this.name + '今年' +this.age + '歲'
},
//setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 調(diào)用 setter， vm.name 和 vm.url 也會被對應更新
vm.site = 'ww 10';
在運行vm.site = 'ww 10'時蛀柴，setter會被調(diào)用螃概，vm.name和vm.age也會相應的更新。
