Vue监测数据变化的更新
<div id="monitor">
<h2>人员列表</h2>
<button @click="updateMei">更新马冬梅信息</button>
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}}--{{p.age}}--{{p.sex}}
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#monitor',
data: {
persons: [
{ id: '001', name: '马冬梅', age: 18, sex: '女' },
{ id: '002', name: '周冬雨', age: 19, sex: '女' },
{ id: '003', name: '周杰伦', age: 20, sex: '男' },
{ id: '004', name: '温兆伦', age: 20, sex: '男' }
]
},
methods: {
updateMei() {
this.persons[0].name = '马老师',
this.persons[0].age = '50',
this.persons[0].sex = '男'
}
}
})
</script>
上面代码可以正常运行，但是当把updateMei改成下面这句就会出现问题。
this.persons[0] = { id: '0011', name: '马老师', age: 50, sex: '男' }
运行截图
当点击更新按钮的时候，页面的马冬梅不会自动更新(vue监测不到)，但是后台输出发现信息已经修改。
data与_data里面的内容不一样，_data里面写了get，set，name发生变化setter就会调用.
Vue.set
用法：向响应式对象中添加一个响应式property，触发试图更新。必须在响应式对象上面添加新的property，因为Vue无法探测普通的新增property
注意对象不能是Vue实例，或者Vue实例的根数据对象（data或_data）
<div id="root">
<h2>学校:{{name}}</h2>
<h2>地址:{{address}}</h2>
<hr>
<h2>学生姓名：{{student.name}}</h2>
<h2>学生性别：{{student.sex}}</h2>
<h2>学生年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
<!-- <h4>朋友列表{{student.friends.name}}--{{student.friends.age}}</h4>这样写不对 -->
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
name: 'nepu',
address: 'daqing',
student: {
name: 'Tom',
sex: '男',
age: {
rAge: 40,
sAge: 29,
},
friends: [
{ name: 'Lily', age: 30 },
{ name: 'Doudou', age: 34 }
]
}
}
})
</script>
如果删除学生的性别，不会报错只是页面上性别那里会空着，控制台设置性别vm._data.student.sex='男’可以在控制台查看到该属性，但是页面没有更新，因为性别没有setter。可以使用Vue.set实现页面更新
<button @click="addSex">添加一个性别属性，默认值男</button>
methods: {
addSex() {
// Vue.set(this.student, 'sex', '男')
this.$set(this.student, 'sex', '男')
}
}
但是Vue.set局限在只可以给data的属性加，不可以给vue实例加。
监测数组对象的改变可以看到student.age里面的属性都有getter和setter。而hobby如果写成数组的形式，不会有属性对应的setter，getter。
数组里面的数据没有对应的getter和setter，通过对应的索引值修改数据不会改变页面数据的情况，因为vue中的每个数据不是依靠setter和getter进行监视的，array.push()给数组的末尾添加数据,如图，
hobby数组归vue管理，hobby的push不是array的push。
可以使用vue.set
看需求写代码
<div id="zongjie">
<h1>学生信息</h1>
<button>年龄+1岁</button><br />
<button>添加性别属性，默认值：男</button><br />
<button>在列表首位添加一个朋友</button><br />
<button>修改第一个朋友的名字叫张三</button><br />
<button>添加一个爱好</button><br />
<button>修改第一个爱好是开车</button>
<h2>学生姓名：{{student.name}}</h2>
<h2>学生年龄：{{student.age}}</h2>
<h3>爱好：</h3>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
<h3>朋友们</h3>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#zongjie',
data: {
student: {
name: 'tom',
age: 18,
hobby: ['吃饭', '睡觉', '打豆豆'],
friends: [
{ name: 'Jerry', age: 12 },
{ name: 'Tony', age: 23 }
]
}
}
})
</script>
- 学生的年龄增加1，直接给button设置click
@click="student.age++"
- 添加性别属性，默认是男，所以添加一个响应式的性别，页面也跟着变的.
给button添加click事件，在methods里面声明setSex方法
<button @click="addSex">
注意methods的位置是写在Vue实例里面，不是data里面。
下面这种写法不是响应式的，可以通过控制台查询点击按钮前后的vm._data.student观察新添加的属性，但是页面不会更新。
methods: {
addSex() {
this.student.sex = '男'
}
}
正确应该在页面中添加h3标签，方便页面更新时候数据展示，this.student=vm._data.student,所以也可以是this.$set(this.student, ‘sex’, ‘男’)
methods里面的方法
addSex() {
Vue.set(this.student, 'sex', '男')
}
更完美一点，没有性别的时候隐藏页面中的性别信息
<h2 v-if="student.sex">性别：{{student.sex}}</h2>
额外的需求
修改性别,注意未知是字符串要使用单引号，不然会报错的
<button @click="student.sex='未知' "></button>
- 在列表首位添加一个朋友
<button @click.once="addFriend">在列表首位添加一个朋友</button><br />
addFriend() {
this.student.friends.unshift({
name: 'Jack', age: 70
})
}
unshift添加数组的属性是详细的具有get和set
4. 修改第一个朋友的名字叫张三
updateFirstFriendName() {
this.student.friends[0].name = '张三'
}
- 添加一个爱好
addHobby() {
this.student.hobby.push('学习')
},
- 修改第一个爱好是开车
不可以通过数组索引值直接赋值，即不能 this.student.hobby[0] = ‘开车’
updateHobby() {
// this.student.hobby.splice(0,1,'开车')
Vue.set(this.student.hobby, 0, '开车')
}
- 过滤爱好中的打豆豆<button @click=“removePlay”>过滤爱好中的打豆豆
removePlay() {
this.student.hobby = this.student.hobby.filter((h) => {
return h !== '打豆豆'
})
}
Vue监视数据总结
-
Vue会监视data中所有层次的数据
-
如何监测对象中的数据
通过setter实现监视，且要在new Vue时就要传入要监测的数据
(1). 对象中后追加的属性，Vue默认不做响应式处理
(2). 如需给后添加的属性做响应式，请使用如下API：
Vue.set(target,propertyName/index,value)或
vm.$set(target,propertyName/index,value) -
如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质两步骤
(1).调用原生对应的方法对数组进行更新
(2).重新解析模板，进而更新页面。 -
在Vue修改数组中的某个元素一定要用如下方法
（1）使用API:push(),pop(),shift(),unshift(),splice(),sort(),reverse()
(2)Vue.set()或vm.$set()特别注意：Vue.set()和vm.$set()不能给vm或者vm的根数据对象添加属性!!!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b93MiqUw-1682235357722)(…/%E7%AC%94%E8%AE%B0/vue.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-caJ11N7Z-1682235357722)(vue.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gbCHXyKY-1682235357723)(…/%E7%AC%94%E8%AE%B0/vue.png)]
ft(),splice(),sort(),reverse()
(2)Vue.set()或vm.$set()
特别注意：Vue.set()和vm.$set()不能给vm或者vm的根数据对象添加属性!!!
