vue中的watch監聽，除了監聽data中的數據
還可以監聽props、$route、$emit、computed
watch:{ //監聽路由變化
$route( to , from ){
console.log( to , from )
// to , from 分別表示從哪跳轉到哪，都是一個對象
// to.path ( 表示的是要跳轉到的路由的地址 eg: /home );
}
}
export default { data() { return { floorData0: {}, floorData1: {}, floorData2: {}, } }, props:['floorData'], watch:{ // 監聽props floorData:(newVal,oldVal) => { console.log(newVal); this.floorData0 = newVal[0]; this.floorData1 = newVal[1]; this.floorData2 = newVal[2]; } } }vue中的watch監聽數據變化以及watch中各屬性詳解:
1、監聽data數據變化
watch: {
data(val, newval) {
console.log(val)
console.log(newval)
}
}
2、通過watch監聽docData數據的變化，數據發生變化時，this.change_number++（使用深度監聽）
watch: {
docData: {
handler(newVal) {
this.change_number++
},
deep: true
}
}
3、通過watch監聽data數據的變化，數據發生變化時,執行changeData方法
watch: {
data： 'changeData' // 值可以為methods的方法名
}，
methods: {
changeData(curVal,oldVal){
conosle.log(curVal,oldVal)
}
}
延伸：
詳解watch中的immediate、handler和deep屬性
（1）immediate和handler
這樣使用watch時有一個特點，就是當值第一次綁定時，
不會執行監聽函數，
只有值發生改變時才會執行。如果我們需要在最初綁定值的時候也執行函數，
則就需要用到immediate屬性。
watch: {
docData: {
handler(newVal) {
this.change_number++
},
immediate: true
}
}
（2）deep
當需要監聽一個對象的改變時，
普通的watch方法無法監聽到對象內部屬性的改變，
此時就需要deep屬性對對象進行深度監聽。
data（） {
return {
docData: {
'doc_id': 1,
'tpl_data': 'abc'
}
}
}，
watch: {
docData: {
handler(newVal) {
this.change_number++
},
deep: true
}
}
設置deep:true則可以監聽到docData.doc_id的變化，
此時會給docData的所有屬性都加上這個監聽器，當對象屬性較多時，每個屬性值的變化都會執行handler。
如果只需要監聽對象中的一個屬性值，則可以做以下優化：使用字符串的形式監聽對象屬性：
data（） {
return {
docData: {
'doc_id': 1,
'tpl_data': 'abc'
}
}
}，
watch: {
'docData.doc_id': {
handler(newVal, oldVal) {
......
},
deep: true
}
}