當(dāng)使用vueJs開發(fā)應(yīng)用程序的時(shí)候，你有可能遇到 props。這是vueJs的一個(gè)重要特性。props 允許父組件向子組件傳遞數(shù)據(jù)。當(dāng)父組件改變props的值的時(shí)候，子組件能夠感知到這一變化并及時(shí)作出響應(yīng)。Vue框架提供了一整個(gè)生命周期鉤子函數(shù)來追蹤props改變時(shí)，相應(yīng)的子組件的行為。

Vue.component('todo-item', {
props: ['item'],
template: '
{{ item }}
',
watch: {
item: {
handler: function(value){
console.log('item changed to:', value)
}
deep: true
}
}
})

當(dāng)一個(gè)父組件傳入一個(gè)初始的 props 的時(shí)候，這個(gè) props 是不會(huì)有任何響應(yīng)的。但是 Vuejs提供了幾種技巧來實(shí)現(xiàn)響應(yīng)式 props。

第一種技巧使用計(jì)算屬性

Vue.component('todo-item', {
props: ['item'],
computed: {
todoItem: function() {
return this.item;
}
},
template: '
{{ todoItem }}
',
watch: {
todoItem: {
handler: function(value){
console.log('item changed to:', value)
}
deep: true
}
}
})

當(dāng)這個(gè)計(jì)算屬性被聲明了之后，這個(gè)props不僅是響應(yīng)式的，而且也可以直接在模板中使用。

第二種技巧是使用一個(gè)帶有g(shù)et() 和 set()的對(duì)象

Vue.component('todo-item', {
props: ['item'],
template: '
{{ todoItem }}
',
watch: {
todoItem: {
handler: function(value){
console.log('item changed to:', value)
}
deep: true
}
},
computed: {
todoItem: {
get: function(){
return this.item;
},
set: function(newItem){
this.$emit('update:item', newItem);
} 
}
}
})

當(dāng)這個(gè)帶有g(shù)et() 和 set()的對(duì)象被聲明后，父組件可以使用 v-model 來雙向綁定這個(gè)props。

當(dāng)一個(gè)父組件傳入了一個(gè)漂亮的props的時(shí)候，它能夠應(yīng)對(duì)props的改變，但是當(dāng)父組件在傳入的 props 本身沒有響應(yīng)式時(shí)，子組件是不會(huì)察覺到這樣的改變的。

最后需要明確一件事情，當(dāng) Vuejs 檢測(cè)到你沒有對(duì)觀察的目標(biāo)進(jìn)行 refactoring（重構(gòu)）的時(shí)候，你將會(huì)收到一個(gè) error warning，所以在你監(jiān)聽props改變的時(shí)候，請(qǐng)謹(jǐn)慎處理。