在使用Vue開發(fā)應用程序的時候，父組件可以通過props向子組件傳遞數(shù)據(jù)，而子組件可以通過props來獲取父組件傳遞進來的數(shù)據(jù)。但是，在某些情況下，我們需要子組件能夠?qū)崟r地獲取到父組件傳遞進來的數(shù)據(jù)的變化。這時候，我們就需要使用Vue的監(jiān)聽props的機制來實現(xiàn)這一功能。

Vue.component('my-component', {
props: {
message: String
},
watch: {
message: function (newVal, oldVal) {
// do something when the value of `message` prop changes
}
}
})

Vue的監(jiān)聽props的機制就是使用watch屬性來監(jiān)聽props對象中某一屬性的變化。在組件的props聲明中，我們需要定義一個message屬性，并在watch屬性中定義一個名為message的監(jiān)聽函數(shù)。每當父組件向子組件傳遞進來的message屬性的值發(fā)生變化時，這個監(jiān)聽函數(shù)都會被調(diào)用。

可以看到，在監(jiān)聽函數(shù)中，我們可以對新值(newVal)和舊值(oldVal)進行處理，以便于實現(xiàn)我們需要的功能。舉個例子，如果我們需要在子組件中實時地統(tǒng)計父組件傳遞進來的message屬性的長度，我們可以這么做：

Vue.component('my-component', {
props: {
message: String
},
data: function () {
return {
messageLength: 0
}
},
watch: {
message: function (newVal, oldVal) {
this.messageLength = newVal.length;
}
}
})

可以看到，我們在組件的data屬性中定義了一個名為messageLength的屬性，并在組件的watch屬性中定義了一個名為message的監(jiān)聽函數(shù)。當message屬性的值發(fā)生變化時，我們把其長度賦值給messageLength屬性，并實現(xiàn)了實時統(tǒng)計的功能。

除了使用watch屬性監(jiān)聽props外，Vue還提供了另一種監(jiān)聽props的方式，即使用computed屬性。

Vue.component('my-component', {
props: {
message: String
},
computed: {
messageLength: function () {
return this.message.length;
}
}
})

在這種方式下，我們在組件的computed屬性中定義了一個名為messageLength的計算屬性。每當props中的message屬性發(fā)生變化時，messageLength屬性就會被重新計算，并從新計算過后的值。這樣，在組件的其它地方我們只需要引用messageLength屬性即可實現(xiàn)實時獲取props屬性的變化。