20_Vue如何监测数组类型数据发生改变的？

2023-07-27 生活百科

通过上一节，我们知道了vue检测对象数据发生改变的原理
但是还有个api我们没有讲解， Vue.set()；
这个API比较适合在理解了对象检测的原理后进行讲解
案例准备html
<div class="app"><h1>姓名：{{student.name}}</h1><h1>年龄：{{student.age}}</h1><br><h2>朋友们</h2><ul><li v-for="(item,index) in friends">{{item.name}}-{{item.rage}}-{{item.mage}}</li></ul></div>data配置项
<script>const vm = new Vue({el: '.app',data: {student: {name: 'wavesbright',age: 21,},friends: [ // 真实年龄，内心年龄{name: "Jack",rage: 32,mage: 40},{name: "Jony",rage: 24,mage: 45},{name: "Jone",rage: 28,mage: 50},]},methods: {},});</script>页面效果

20_Vue如何监测数组类型数据发生改变的？

文章插图
需求

我的数据都是写在data当中的，通过vue的数据代理
在页面当中实现了响应式开发
那么现在有一个问题
我想给， student 添加一个属性，这个属性是后来添加的，不是之前就添加的
想让这个属性能够实现响应式，应该如何实现？

错误示范

直接在vm后面加个属性不就完了？
- 文章插图
修改 _data ，然后给它添加一个属性？
- 文章插图

上述两个操作的问题，添加的属性没有进行数据代理
无法完成响应式
仔细看的话，在student这个对象当中， sex这个属性是没有get和set函数的
- 文章插图

添加测试
【20_Vue如何监测数组类型数据发生改变的？】

20_Vue如何监测数组类型数据发生改变的？

文章插图
我们在这里添加一个渲染项，然后我们添加属性试试，现在我data当中是没有这个属性的

20_Vue如何监测数组类型数据发生改变的？

文章插图
并不能被vue所识别到
那么我们后面想要自己添加属性就没有办法完成响应式了吗，诶，这就是我们接下来要引入的API
Vue.set()

该API需要三个参数

文章插图
1. target：目标
2. key：添加的属性名
3. val：添加的属性值

20_Vue如何监测数组类型数据发生改变的？

文章插图
我现在算是明白了，小程序的 this.setData() 就是从这里变来的
这里其实应该是 .student的；因为操作的都是同一个对象的地址
set的局限性

20_Vue如何监测数组类型数据发生改变的？

文章插图
我现在要在data当中，添加一个属性，这个属性是leader == 校长
我们使用.set添加试试

20_Vue如何监测数组类型数据发生改变的？

文章插图

上一篇：2023年1月29日搭窝行吗 2023年1月29日适合搭窝吗

下一篇：2023年9月17日入学黄道吉日 2023年9月17日是入学的黄道吉日吗