当前位置：首页 > article >正文

Vue-监听属性

article 2025/9/14 20:05:57

监听属性

简单监听

点击切换名字，来回变更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>