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. 学生的年龄增加1，直接给button设置click

@click="student.age++"

2. 添加性别属性，默认是男，所以添加一个响应式的性别，页面也跟着变的.
   给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>

3. 在列表首位添加一个朋友

<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 = '张三'
}

5. 添加一个爱好

 addHobby() {this.student.hobby.push('学习')},

6. 修改第一个爱好是开车
   不可以通过数组索引值直接赋值，即不能 this.student.hobby[0] = ‘开车’

    updateHobby() {// this.student.hobby.splice(0,1,'开车') Vue.set(this.student.hobby, 0, '开车')}

7. 过滤爱好中的打豆豆<button @click=“removePlay”>过滤爱好中的打豆豆

removePlay() {this.student.hobby = this.student.hobby.filter((h) => {return h !== '打豆豆'})
}

Vue监视数据总结

1. Vue会监视data中所有层次的数据

2. 如何监测对象中的数据
   通过setter实现监视，且要在new Vue时就要传入要监测的数据
   (1). 对象中后追加的属性，Vue默认不做响应式处理
   (2). 如需给后添加的属性做响应式，请使用如下API：
   Vue.set(target,propertyName/index,value)或
   vm.$set(target,propertyName/index,value)

3. 如何监测数组中的数据？
   通过包裹数组更新元素的方法实现，本质两步骤
   (1).调用原生对应的方法对数组进行更新
   (2).重新解析模板，进而更新页面。

4. 在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的根数据对象添加属性!!!