Vue2监视数据-数组

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

Vue2监视数据-数组

Vue2监视数据-数组

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

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

Vue2监视数据-数组

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

_this.infoDataConfColor.colorL="red"

Vue2监视数据-数组

响应式数组的原理

Vue2监视数据-数组

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

Vue2监视数据-数组

以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 作者:王小菲

(0)
上一篇 2024年3月30日 下午4:44
下一篇 2024年3月30日 下午4:55

相关推荐

发表评论

登录后才能评论