Vue如何监测数组类型数据发生改变的(推荐)

澜璨 6881 阅读 0 评论 0 点赞

案例准备

html

<!-- 创建一个容器 -->
    <div class="app">
        <h1>姓名：{{student.name}}</h1>
        <h1>年龄：{{student.age}}</h1><br>
        <h2>朋友们</h2>
        <ul>
            <!-- 列表渲染 == friends -->
            <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>

页面效果

需求

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

错误示范

1.直接在vm后面加个属性不就完了？

2.修改 _data，然后给它添加一个属性？

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

添加测试

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

并不能被vue所识别到

那么我们后面想要自己添加属性就没有办法完成响应式了吗，诶，这就是我们接下来要引入的API

Vue.set()

该API需要三个参数

target： 目标
key： 添加的属性名
val： 添加的属性值

我现在算是明白了，小程序的 this.setData() 就是从这里变来的

这里其实应该是 .student的；因为操作的都是同一个对象的地址

set的局限性

我现在要在data当中，添加一个属性，这个属性是leader == 校长

我们使用.set添加试试

这里报错的意思就是，不允许直接在vue实例身上添加一个属性
解读一下这段话哈
- 我现在是在_data当中添加属性
- 但是这个添加的属性，最后会挂载在vue实例身上
- 所以，这里使用.set是不允许的，不能直接添加
.set()不能在data当中直接添加属性
只能给data当中的某个对象（student）添加属性

vm是不能作为target的，vm当中的data，也不能作为target

监测数组

准备工作

新建一个demo，重新配置了数据项data
在data当中有两个属性，一个numbers的数组，一个student的对象
我们查看vue实例对象，在查看之前可以很明确的说，numbers 和 student 都挂载在了vue实例身上，并且，有专门为他俩服务的get和set

数据代理

现在我们点击去看看二者有什么不同，或者说，vue当中对数组和对象类型的数据是如何代理的

数组和对象的不同

数组

对象

区别，目前而言

数组当中的数据，是没有进行数据代理的，没有专门为元素服务的 get和set
而对象当中，每个属性都是有get和set的，哪怕这个属性是对象也有
也就是说，如果我们直接在vue当中直接修改numbers对应索引的值，vue是观测不到的

直接修改numbers

我们写一串DOM元素进行测试

<div class="app">
    <ul>
    	<li v-for="item in numbers">{{item}}</li>	
    </ul>
</div>

现在，我直接在控制台中对数组当中的元素进行修改

我们将最后一项从5改为6

数据的确修改成功了，但是vue检测不到，页面无法响应

之前的错误解释

现在，我们来回顾一下之前遇到的bug，我们添加一个persons对象数组

从控制台我们来观察一下这个persons

这是一个对象数组，这个数组当中的每一项数据，都没有被进行数据代理
但是因为每一项数据都是对象类型，所以在对象类型当中数据是进行了代理(get和set)的

3.这里很重要，请仔细看

所以为什么下面的修改不起作用，因为根本没代理，没有代理无法完成响应式数据

这个问题解决了顺势抛出下一个问题，vue怎么就知道数组内部的属性发生改变了呢，它是如何监测到的？