監聽屬性
簡單監聽
點擊切換名字，來回變更Tom/Jerry，輸出
你好，Tom/Jerry
- 代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>監聽屬性</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>監聽屬性</h1><div><h2>你好，{{name}}</h2><button @click="changeName">切換名字</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在啟動是生成生產提示const vm = new Vue({el: "#root",data: {isTom: true},computed: {name(){return this.isTom ? "Tom" : "Jerry"}},methods: {changeName(){this.isTom = !this.isTom}},watch: {// isTom:{// immediate:true, //初始化就執行handler方法// // isTom發生改變時執行// handler(newValue,oldValue){// console.log("isTom切換了", oldValue + "->" + newValue)// }// },name:{immediate:true, //初始化就執行handler方法// isTom發生改變時執行handler(newValue,oldValue){console.log("名字切換了", oldValue + "->" + newValue)}}},});vm.$watch('isTom',{immediate:true, //初始化就執行handler方法// isTom發生改變時執行handler(newValue,oldValue){console.log("isTom切換了", oldValue + "->" + newValue)}})</script>
</html>- 效果
深度監聽
監聽對象發生變更 numbers:{x:1,y:1}
對象某個屬性監聽 (x)
- 代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>監聽屬性</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>監聽屬性</h1><div><h2>你好，{{name}}</h2><button @click="changeName">切換名字</button><h2>單屬性監聽</h2><button @click="numbers.x++">監聽x+1</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在啟動是生成生產提示const vm = new Vue({el: "#root",data: {isTom: true,numbers:{x:1,y:2}},computed: {name(){return this.isTom ? "Tom" : "Jerry"}},methods: {changeName(){this.isTom = !this.isTom}},watch: {// isTom:{// immediate:true, //初始化就執行handler方法// // isTom發生改變時執行// handler(newValue,oldValue){// console.log("isTom切換了", oldValue + "->" + newValue)// }// },name:{immediate:true, //初始化就執行handler方法// isTom發生改變時執行handler(newValue,oldValue){console.log("名字切換了", oldValue + "->" + newValue)}},'numbers.x':{immediate:true, //初始化就執行handler方法// isTom發生改變時執行handler(newValue,oldValue){console.log("x變更了", oldValue + "->" + newValue)}},numbers:{immediate:true, //初始化就執行handler方法// isTom發生改變時執行handler(newValue,oldValue){console.log("numbers變更了", oldValue + "->" + newValue)}}},});vm.$watch('isTom',{immediate:true, //初始化就執行handler方法// isTom發生改變時執行handler(newValue,oldValue){console.log("isTom切換了", oldValue + "->" + newValue)}})</script>
</html>- 效果
發現變更x, 并沒有監聽到numbers變更
屬性變更能監聽到整個對象的變化
深度監聽
deep:true可以監聽對象內部的值改變（支持多層級）
- 代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>監聽屬性</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>監聽屬性</h1><div><h2>你好，{{name}}</h2><button @click="changeName">切換名字</button><h2>單屬性監聽</h2><button @click="numbers.x++">監聽x+1</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在啟動是生成生產提示const vm = new Vue({el: "#root",data: {isTom: true,numbers:{x:1,y:2}},computed: {name(){return this.isTom ? "Tom" : "Jerry"}},methods: {changeName(){this.isTom = !this.isTom}},watch: {// isTom:{// immediate:true, //初始化就執行handler方法// // isTom發生改變時執行// handler(newValue,oldValue){// console.log("isTom切換了", oldValue + "->" + newValue)// }// },name:{immediate:true, //初始化就執行handler方法// isTom發生改變時執行handler(newValue,oldValue){console.log("名字切換了", oldValue + "->" + newValue)}},'numbers.x':{immediate:true, //初始化就執行handler方法// isTom發生改變時執行handler(newValue,oldValue){console.log("x變更了", oldValue + "->" + newValue)}},numbers:{immediate:true, //初始化就執行handler方法,deep:true,// 可以監聽對象內部的值改變（支持多層級）// isTom發生改變時執行handler(newValue,oldValue){console.log("numbers變更了", JSON.stringify(oldValue) + "->" + JSON.stringify(newValue))}}},});vm.$watch('isTom',{immediate:true, //初始化就執行handler方法// isTom發生改變時執行handler(newValue,oldValue){console.log("isTom切換了", oldValue + "->" + newValue)}})</script>
</html>- 效果
簡寫
前提條件：不需要特殊配置（deep、immediate）方可簡寫
- 代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>監聽屬性</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>監聽屬性</h1><div><h2>你好，{{name}}</h2><button @click="changeName">切換名字</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在啟動是生成生產提示const vm = new Vue({el: "#root",data: {isTom: true,},computed: {name() {return this.isTom ? "Tom" : "Jerry";},},methods: {changeName() {this.isTom = !this.isTom;},},watch: {// 常規操作// name:{// immediate:true, //初始化就執行handler方法// // isTom發生改變時執行// handler(newValue,oldValue){// console.log("名字切換了", oldValue + "->" + newValue)// }// },// 簡寫name(newValue, oldValue) {console.log("名字切換了", oldValue + "->" + newValue);},},});// 正常寫法// vm.$watch('isTom',{// immediate:true, //初始化就執行handler方法// // isTom發生改變時執行// handler(newValue,oldValue){// console.log("isTom切換了", oldValue + "->" + newValue)// }// })// 簡寫vm.$watch("isTom", function (newValue, oldValue) {console.log("isTom切換了", oldValue + "->" + newValue);});</script>
</html>- 效果
