当前位置:   article > 正文

vue中如何检测数组变化?_el-element,中怎么检测数组长度的变化

el-element,中怎么检测数组长度的变化

数组考虑性能原因没有用defineProperty对数组的每一项进行拦截,而是选择重写数组 方法以进行重写。当数组调用到这 7 个方法的时候,执行 ob.dep.notify() 进行派发通知 Watcher 更新;

重写数组方法:push/pop/shift/unshift/splice/reverse/sort

补充回答:

在Vue中修改数组的索引和长度是无法监控到的。需要通过以下7种变异方法修改数组才会触发数组对应的wacther进行更新。数组中如果是对象数据类型也会进行递归劫持。

说明:那如果想要改索引更新数据怎么办?

可以通过Vue.set()来进行处理 =》 核心内部用的是 splice 方法。

// 取出原型方法;

const arrayProto = Array.prototype 

// 拷贝原型方法;

export const arrayMethods = Object.create(arrayProto) 

// 重写数组方法;

def(arrayMethods, method, function mutator (...args) { }

ob.dep.notify()  // 调用方法时更新视图;

了解更多前端相关面试题欢迎关注小编前端专栏!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/248220
推荐阅读
相关标签
  

闽ICP备14008679号