溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
計算屬性
表達式是非常便利的，但是它們實際上只用于簡單的運算。在模板中放入太多的邏輯會讓模板過重且難以維護,所以引入了計算屬性computed,將復雜的邏輯放入計算中進行處理，同時computed有緩存功能，防止復雜計算邏輯多次調(diào)用引起的性能問題。
computed原理
computed的屬性reversedMessage在data中會有一個對我們不可見的cacheReversedMessage屬性對應(yīng)
cacheReversedMessage的值是根據(jù)其綁定的data中的message來決定的 獲取reversedMessage會返回
cacheReversedMessage的值 message更新之后會立馬調(diào)用reversedMessage的get方法去給cacheReversedMessage賦值（無論reversedMessage在dom中是否使用） cacheReversedMessage的值發(fā)生變化時，相應(yīng)的dom也會發(fā)生變化
注意：computed中的屬性和data中的屬性名字不能相同，一個屬性要么在data里；要么在computed里，computed里的屬性要跟data中的配合使用，當data屬性發(fā)生變化時才會調(diào)用get方法更新reversedMessage的值，否則get方法即使返回一個隨機數(shù)，reversedMessage的值也不會變。
示例代碼
computed相當于屬性的一個實時計算，如果實時計算里關(guān)聯(lián)了對象，那么當對象的某個值改變的時候，同事會出發(fā)實時計算。
比如：
<body id="content">
<parent :childrens="childrens"></parent>
</body>
<!-- 這個測試主要想證明： 對于計算屬性里如果關(guān)聯(lián)對象，即使對象不是組件作用域內(nèi)的，當對象在外部改變了某個屬性，同樣會出發(fā)計算屬性的方法-->
<script>
var parent = Vue.extend( {
props: {
childrens: ''
},
template: '<div >{{age}}</div>',
data: function() {
return {
name: '',
age: 18
};
},
computed: {
age: function() {
return this.childrens.age +10;
}
},
created: function() {
var _parent = this.$parent;
this._set = {};
this._set = _parent;
}
} );
var vm = new Vue( {
el: 'body',
data: {
childrens: {
name: '小強',
age: 20,
sex: '男'
}
},
components: {
'parent': parent
}
} );
vm.$data.childrens.age = 10;
</script>
當vm.$data.childrens.age這個值改變的時候，動態(tài)觸發(fā)computed里的age屬性計算，最后顯示到頁面的結(jié)果是：20。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼