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。

