数组和对象的不同数组
文章插图
对象
文章插图
区别 ， 目前而言
- 数组当中的数据，是没有进行数据代理的，没有专门为 元素 服务 的 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如何监测？
文章插图
- 蓝色框当中的都是可以对数组进行修改的，会改变原有数组结构
- 但是filter不会，他会返回一个新数组，不修改原数组
- arr 调用了蓝色框框当中的数组API，自身才会发生改变
- vue当中规定，你只有使用了上述的7个方法，我才承认你修改数组了
包装技术原形使用 Array这个原形对象身上的 push 举例子
这个push，是给数组调用的
文章插图
我们在控制台上来个数组
文章插图
这个push是哪里来的？==> 其实是一层一层嵌套的，从原形对象身上来的
文章插图
二者身上的push是相等的
文章插图
vuevue身上的数组，使用的并不是 原形数组Array身上的 API函数
如何测试？
很简单，回到我们刚刚的案例
文章插图
这下您能明白了吗
流程当你对一个被vue所管理的数组进行了api的调用（push,shift,unshift.....）
文章插图
你调用的这个API，就不是原型对象Array身上的API了；而是vue的api
在这个api当中，会做两个步骤
- 调用原形身上的API（push.....）
- 重新解析模板，生成虚拟dom.......那一套流程
文章插图
官网寻找答案vuejs.org/v2/guide/list.html" rel="external nofollow noreferrer">点我跳转
- 点击 列表渲染
- 点击 数组更新检测
文章插图
我们来看这句话
文章插图
enmmmm ， 后面没讲了，基本其实到这里就差不多了 ， 后面的都需要在实际开发当中去慢慢琢磨了
推荐阅读
- 赛尔号几米怎么打谱尼（赛尔号如何打谱尼)
- 12306网上怎么选下铺（在12306上如何选下铺)
- 我的Vue之旅 09 数据数据库表的存储与获取实现 Mysql + Golang
- 如何免安装使用 Python？推荐 17 个在线的 Python 解释器！
- 12306购票卧铺如何订下铺（12306硬卧如何买到下铺)
- 12306订票怎么订下铺（12306如何购下铺)
- 12306如何订到下铺（打12306可以订到下铺吗)
- 19_Vue如何监测到对象类型数据发生改变的？
- 简笔画如何画漫画羊（简笔画羊的画法大全简单)
- 简单的绵羊怎么画（如何画简单的绵羊)