計算屬性
表達式是非常便利的，但是它們實際上只用于簡單的運算。在模板中放入太多的邏輯會讓模板過重且難以維護,所以引入了計算屬性computed,將復雜的邏輯放入計算中進行處理，同時computed有緩存功能，防止復雜計算邏輯多次調用引起的性能問題。
computed原理
computed的屬性reversedMessage在data中會有一個對我們不可見的cacheReversedMessage屬性對應
cacheReversedMessage的值是根據其綁定的data中的message來決定的 獲取reversedMessage會返回
cacheReversedMessage的值 message更新之后會立馬調用reversedMessage的get方法去給cacheReversedMessage賦值（無論reversedMessage在dom中是否使用） cacheReversedMessage的值發生變化時，相應的dom也會發生變化
注意：computed中的屬性和data中的屬性名字不能相同，一個屬性要么在data里；要么在computed里，computed里的屬性要跟data中的配合使用，當data屬性發生變化時才會調用get方法更新reversedMessage的值，否則get方法即使返回一個隨機數，reversedMessage的值也不會變。
示例代碼
computed相當于屬性的一個實時計算，如果實時計算里關聯了對象，那么當對象的某個值改變的時候，同事會出發實時計算。
比如：
<body id="content"> <parent :childrens="childrens"></parent></body><!-- 這個測試主要想證明： 對于計算屬性里如果關聯對象，即使對象不是組件作用域內的，當對象在外部改變了某個屬性，同樣會出發計算屬性的方法--><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這個值改變的時候，動態觸發computed里的age屬性計算，最后顯示到頁面的結果是：20。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
