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

Vue-数据监听

article 2025/8/6 2:49:55

数据监听

基础信息

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base{padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><h3>年龄：{{boy.age}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy:{name:'刘德华',age:30,hobby:['唱歌','演戏','耍帅'],friend:[{id:'001',name:'张学友',age:30},{id:'002',name:'郭富城',age:30},{id:'003',name:'黎明',age:30}],}},methods:{},});</script>
</html>

运行效果

修改年龄

刘德华的 年龄 - 1

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},},});</script>
</html>

运行效果

在这里插入图片描述

点击按钮 年龄-1

在这里插入图片描述

添加性别

刘德华增加 性别属性 值为男 （基于 vue2）

Vue.set

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex(){console.log("刘德华 有性别了 （Vue.set）")Vue.set(this.boy,'sex',"男")}},});</script>
</html>

运行效果

在这里插入图片描述

点击按钮 添加性别

在这里插入图片描述

vm.$set

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");}},});</script>
</html>

运行效果

在这里插入图片描述

点击按钮 添加性别

在这里插入图片描述

修改性别

刘德华修改性别 男 => 猛男

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><button @click="updateSex">修改性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");},updateSex(){console.log("刘德华 改变性别了 ");this.boy.sex = '猛男'}},});</script>
</html>

运行效果

刘德华添加 性别男

在这里插入图片描述

点击按钮 修改性别

在这里插入图片描述

修改朋友姓名

修改第一个朋友姓名为 张学良

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><button @click="updateSex">修改性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><button @click="updateFriendName">修改朋友姓名</button><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");},updateSex(){console.log("刘德华 改变性别了 ");this.boy.sex = '猛男'},updateFriendName(){console.log("修改第一个朋友姓名了 ");this.boy.friend[0].name = "张学良"}},});</script>
</html>

运行效果

在这里插入图片描述

点击按钮 修改朋友姓名

在这里插入图片描述

首位新增朋友

刘德华朋友列表 首位新增朋友周杰伦

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><button @click="updateSex">修改性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><button @click="updateFriendName">修改朋友姓名</button><button @click="addFriend">首位新增朋友</button><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.id}} - {{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");},updateSex(){console.log("刘德华 改变性别了 ");this.boy.sex = '猛男'},updateFriendName(){console.log("修改第一个朋友姓名了 ");this.boy.friend[0].name = "张学良"},addFriend(){console.log("首位新增一个朋友 ");this.boy.friend.unshift({ id: "004", name: "周杰伦", age: 26 })}},});</script>
</html>

运行效果

在这里插入图片描述

点击按钮 首位新增朋友

在这里插入图片描述

增加爱好

刘德华爱好增加 首位增加一个喝酒 末位增加一个健身

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><button @click="updateSex">修改性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><button @click="addHobby">增加爱好</button><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><button @click="updateFriendName">修改朋友姓名</button><button @click="addFriend">首位新增朋友</button><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.id}} - {{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");},updateSex(){console.log("刘德华 改变性别了 ");this.boy.sex = '猛男'},updateFriendName(){console.log("修改第一个朋友姓名了 ");this.boy.friend[0].name = "张学良"},addFriend(){console.log("首位新增一个朋友 ");this.boy.friend.unshift({ id: "004", name: "周杰伦", age: 26 })},addHobby(){console.log("首位新增一个爱好 <喝酒>");this.boy.hobby.unshift("喝酒")console.log("末位新增一个爱好 <健身>");this.boy.hobby.push("健身")}},});</script>
</html>

运行效果

在这里插入图片描述

点击按钮 增加爱好

在这里插入图片描述

修改爱好

修改刘德华的第一个爱好 唱歌 => 爬山

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>数据监听(vue2)</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>数据监听</h1><div><h3>姓名：{{boy.name}}</h3><button @click="subtractOne">年龄-1</button><h3>年龄：{{boy.age}}</h3><button @click="addSex">添加性别</button><button @click="updateSex">修改性别</button><h3 v-if="boy.sex">性别：{{boy.sex}}</h3><h3>爱好</h3><button @click="addHobby">增加爱好</button><button @click="updateHobby">修改爱好</button><ul><li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li></ul><h3>朋友</h3><button @click="updateFriendName">修改朋友姓名</button><button @click="addFriend">首位新增朋友</button><ul><li v-for="(item,index) in boy.friend" :key="item.id">{{item.id}} - {{item.name}} - {{item.age}}</li></ul></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",boy: {name: "刘德华",age: 30,hobby: ["唱歌", "演戏", "耍帅"],friend: [{ id: "001", name: "张学友", age: 30 },{ id: "002", name: "郭富城", age: 30 },{ id: "003", name: "黎明", age: 30 },],},},methods: {subtractOne() {console.log(this.boy.name + " 年龄 -1 了");this.boy.age--;},addSex() {//   console.log("刘德华 有性别了 （Vue.set）");//   Vue.set(this.boy, "sex", "男");console.log("刘德华 有性别了 Vm.$set）");this.$set(this.boy, "sex", "男");},updateSex(){console.log("刘德华 改变性别了 ");this.boy.sex = '猛男'},updateFriendName(){console.log("修改第一个朋友姓名了 ");this.boy.friend[0].name = "张学良"},addFriend(){console.log("首位新增一个朋友 ");this.boy.friend.unshift({ id: "004", name: "周杰伦", age: 26 })},addHobby(){console.log("首位新增一个爱好 <喝酒>");this.boy.hobby.unshift("喝酒")console.log("末位新增一个爱好 <健身>");this.boy.hobby.push("健身")},updateHobby(){console.log("修改 刘德华的第一个爱好了 ");// Vue.set(this.boy.hobby, 0, '爬山');// this.$set(this.boy.hobby, 0, '爬山');// 必须得用 push、pop、shift、unshift、splice、sort、reverse修改才能响应式，直接通过数组下标修改元素无法响应式this.boy.hobby.splice(0,1,'爬山')}},});</script>
</html>

运行效果

在这里插入图片描述

点击按钮 修改爱好

总结

vue 会监听data中所有层级的数据

通过 setter实现监听且是在初始化vue实例就定义好的数据 data

对象后追加的属性，默认vue不做响应式处理
如后追加的属性想要响应式处理，使用特定的API进行增加属性
- Vue.set(target, propertyName/index, value )
- vm.$set(target, propertyName/index, value )