[Vue源码解析] Array的变化侦测

最新推荐文章于 2024-03-20 12:23:23 发布

挣钱去植发

最新推荐文章于 2024-03-20 12:23:23 发布

阅读量201

点赞数

分类专栏： Vue js

本文链接：https://blog.csdn.net/qq_42465117/article/details/109996694

版权

本文深入解析Vue框架中Array的变化侦测原理。通过覆盖Array.prototype上的原生方法，创建拦截器在执行如push、pop等操作时通知依赖更新。使用Observer类包装数组并递归使元素响应化，但通过下标赋值和清空数组长度的操作无法被侦测。

摘要由CSDN通过智能技术生成

[Vue源码解析] Array的变化侦测

前言：数组由于具有许多原生方法对其元素进行修改，而上文中说过Object的变化侦测无法就这些方法改变的属性通知其依赖，所以需要新的方法来进行Array的变化侦测。

核心思想：新建一个对象arrayMethods，称之为拦截器，用它覆盖数组的__proto__，即数组的原型对象Array.prototype，在数组更新数据时，即执行push、pop、unshift、shift、sort、reverse、splice这些方法时，执行拦截器其中的方法来通知依赖数组dep中的依赖数据发生变化。最开始依然适用Observer类包装数组，并使数组的原型对象指向拦截器，同时递归数组元素，使其都变为响应式数据。

图解：

拦截器：

/**
 * 拦截器，覆盖Array原型方法
 */

const arrayProto = Array.prototype
const arrayMethods = Object.create (arrayProto)

;[
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
.forEach (function (method) {
   
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
   
    const result = original.apply(this, args)   //执行拦截器重写的方法
    const ob = this.__ob__    //拿到Observer对象
    let inserted
    switch (method) {
   
      case

最低0.47元/天解锁文章