computed可以讓我們很好的監聽多個數據或者一個數據來維護返回一個狀態值,只要其中一個或多個數據發生變化,則會重新計算整個函數體
相比Vue中的方法而言,性能更佳。
但Vue中的計算屬性都是同步的,如果需要異步我們得依賴於vue-async-computed。


雖然計算屬性在大多數情況下更合適,但有時候也需要一個自定義的watcher。這是為什么Vue通過watch選項提供一個更通用的方法,來響應數據的變化。當你想要在數據變化響應時,執行異步操作或開銷較大的操作,這是很有用的。
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 = 50; </script>
當vm.$data.childrens.age這個值改變的時候,動態觸發computed里的age屬性計算,最后顯示到頁面的結果是:60。
