Vue2监视数据-数组

大家观察以下两张图，vue中对象和数组有什么区别呢？

使用以下代码修改数据，页面会变化吗，为什么？

_this.actions_accept[0] = { text: '接收',icon:'https://resource.teld.cn/teldimage/107/24d005dc64e04789bcb3ad08476821f8.png' }

使用以下代码修改数据，页面会变化吗，为什么？

_this.infoDataConfColor.colorL="red"

响应式数组的原理

Vue通过重写数组的原型方法来创建一个“观察者”(Observer)实例，该实例可以追踪数组的改动。这意味着当你直接操作数组时，如通过push()、pop()、shift()、unshift()、splice()、sort()或reverse()等原生数组方法改变数组内容时，Vue能够检测到这些变化，并将对应的DOM更新推送到视图层。

以push方法为例，Vue中的push做了两件事，一是调用原生的push，二是重新解析模板生成虚拟DOM，渲染界面

补充：

• push()：在数组尾部逐个添加元素，返回结果数组的长度；
• pop()： 移除数组最后一项，返回的是被移除项；
• shift()： 删除数组的第一项元素，返回被删除的元素；
• unshift()：向数组的头部添加元素，返回的是结果数组的长度;
• splice()： 删除任意项元素，需要两个参数：要删除的位置 和 要删除的数量；
• sort()： 将数组按照从小到大的顺序排列；
• reverse()： 反转数组

参考文档：v2.cn.vuejs.org/v2/guide/li…；

v2.cn.vuejs.org/v2/guide/re…

原文链接：https://juejin.cn/post/7351708519176880162 作者：王小菲