20_Vue如何监测数组类型数据发生改变的?( 三 )


文章插图

  • 蓝色框当中的都是可以对数组进行修改的 , 会改变原有数组结构
  • 但是filter不会 , 他会返回一个新数组 , 不修改原数组
  • arr 调用了蓝色框框当中的数组API , 自身才会发生改变
  • vue当中规定 , 你只有使用了上述的7个方法 , 我才承认你修改数组了
那它咋知道我调用了上面的7个API呢?
包装技术原形使用 Array这个原形对象身上的 push 举例子
这个push , 是给数组调用的
20_Vue如何监测数组类型数据发生改变的?

文章插图
我们在控制台上来个数组
20_Vue如何监测数组类型数据发生改变的?

文章插图
这个push是哪里来的?==> 其实是一层一层嵌套的 , 从原形对象身上来的
20_Vue如何监测数组类型数据发生改变的?

文章插图
二者身上的push是相等的
20_Vue如何监测数组类型数据发生改变的?

文章插图
vuevue身上的数组 , 使用的并不是 原形数组Array身上的 API函数
如何测试?
很简单 , 回到我们刚刚的案例
20_Vue如何监测数组类型数据发生改变的?

文章插图
这下您能明白了吗
流程当你对一个被vue所管理的数组进行了api的调用(push,shift,unshift.....)
20_Vue如何监测数组类型数据发生改变的?

文章插图
你调用的这个API , 就不是原型对象Array身上的API了;而是vue的api
在这个api当中 , 会做两个步骤
  1. 调用原形身上的API(push.....)
  2. 重新解析模板 , 生成虚拟dom.......那一套流程

    • 20_Vue如何监测数组类型数据发生改变的?

      文章插图
是这么一回事吗 , 我们看下官网是如何解答的
官网寻找答案vuejs.org/v2/guide/list.html" rel="external nofollow noreferrer">点我跳转
  1. 点击 列表渲染
  2. 点击 数组更新检测

20_Vue如何监测数组类型数据发生改变的?

文章插图
我们来看这句话
20_Vue如何监测数组类型数据发生改变的?

文章插图
enmmmm , 后面没讲了 , 基本其实到这里就差不多了 , 后面的都需要在实际开发当中去慢慢琢磨了
尚硅谷yyds , 黑马也是
你们都是我的天使

经验总结扩展阅读