文章插图
监测数组准备工作
文章插图
- 新建一个demo ， 重新配置了数据项data
- 在data当中有两个属性 ， 一个numbers的数组 ， 一个student的对象
- 我们查看vue实例对象 ， 在查看之前可以很明确的说 ， numbers 和 student 都挂载在了vue实例身上 ， 并且 ， 有专门为他俩服务的get和set
文章插图
数据代理
文章插图
现在我们点击去看看二者有什么不同 ， 或者说 ， vue当中对数组和对象类型的数据是如何代理的
数组和对象的不同数组
文章插图
对象
文章插图
区别 ， 目前而言
- 数组当中的数据 ， 是没有进行数据代理的 ， 没有专门为 元素 服务 的 get和set
- 而对象当中 ， 每个属性都是有get和set的 ， 哪怕这个属性是对象也有
- 也就是说 ， 如果我们直接在vue当中直接修改numbers对应索引的值 ， vue是观测不到的
<div class="app"><ul><li v-for="item in numbers">{{item}}</li></ul></div>
文章插图
现在 ， 我直接在控制台中对数组当中的元素进行修改
我们将最后一项 从5改为6
文章插图
数据的确修改成功了 ， 但是vue检测不到 ， 页面无法响应
之前的错误解释现在 ， 我们来回顾一下之前遇到的bug ， 我们添加一个persons对象数组
文章插图
从控制台我们来观察一下这个persons
文章插图
- 这是一个对象数组 ， 这个数组当中的每一项数据 ， 都没有被进行数据代理
- 但是因为每一项 数据 都是对象类型 ， 所以 在对象类型当中 数据是进行了代理(get和set)的
文章插图
- 这里很重要 ， 请仔细看
文章插图
所以为什么下面的修改不起作用 ， 因为根本没代理 ， 没有代理无法完成响应式数据
这个问题解决了顺势抛出下一个问题 ， vue怎么就知道数组内部的属性发生改变了呢 ， 它是如何监测到的？
vue如何监测？
经验总结扩展阅读
- 房门对房门风水有哪些禁忌风水禁忌如何化解?
- 房门对房门好不好 房门对房门风水如何化解
- 小户型房子如何装修 小户型房子装修风格有哪些
- 2023年10月19日适宜提车吗 这天日子如何
- 2023年10月21日适合提新车吗 今天日子如何
- 12306购票卧铺如何订下铺（12306硬卧如何买到下铺)
- 12306订票怎么订下铺（12306如何购下铺)
- 12306如何订到下铺（打12306可以订到下铺吗)
- 我的Vue之旅 09 数据数据库表的存储与获取实现 Mysql + Golang
- 如何免安装使用 Python？推荐 17 个在线的 Python 解释器！