vue源码(十三) 数组下标改变值的响应式误区以及实现

前言

相信大家都知道，在vue2.0x中，使用数组下标改变值时，是不会触发响应式的

以下来自:Vue官方文档

Vue 不能检测以下数组的变动：

• 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如：vm.items.length = newLength

但是其实还是有特殊情况的，让我们来分析分析

正常情况

让我们看看，使用数组下标直接改变数组元素的值，是否会响应式变化(按照官方文档是不可行的)

<div id="app">
    <ul>
      <li v-for="item in list">
        {{item}}
      </li>
    </ul>
  </div>

const app = new Vue({
  el: '#app',
  data: {
   
    list: ['4', '5', '6']
  },
  mounted () {
    this.list[1] = '6'
    console.log(this.list)    
  }
})

这里通过this.list[1]，也就是数组下标改变数组值时，让我们看看是否会响应式变化

下面为页面中的打印结果

通过打印结果，可以看出，this.list[1]是成功改变了data中list数组下标为1的值的，因为打印出的list的索引为1的值为"6"了

但是在页面中，并没有将这个6渲染出来，所以可以得出这一个赋值不是响应式的，并不会让界面跟着渲染

所以可以得出结论

通过数组下标改变元素值时，是不会响应式变化的

误区

而这个时候，会有些人走入一个误区

这个误区，可以看看代码

<div id="app">
    <ul>
      <li v-for="item in objectList">
        {{item}}
      </li>
    </ul>
  </div>

const app = new Vue({
  el: '#app',
  data: {
    objectList: [
      { value: 1, id: 1 },
      { value: 2, id: 2 },
      { value: 3, id: 3 },
    ]
  },
  mounted () {  
    this.objectList[1].value = 3
  }
})

打印结果如下

这里就是大多数人的误区：你看！我用的也是数组下标，为什么这样改变的就会是响应式的呢？

其实这就是被官方文档绕进去了，看到数组下标就以为不是响应式，其实这里的数组下标只是获取到那个对象而已，而这个对象却是响应式的，所以你改变这个对象的值，当然也就响应式的变化了

那么进入误区的人，现在又进入了一个难以理解的点，为什么数组的对象元素就是响应式的呢？

这时候，可以从源码中来看

数组中对象元素的响应式

说到响应式，之前也分析过，从initData中执行observe函数，那么从observe开始看

export function observe (value: any, asRootData: ?boolean): Observer | void {
  // 判断是否为对象 判断是否为VNode
  if (!isObject(value) || value instanceof VNode) {
    // 如果不是对象 或者 是实例化的Vnode 也就是vdom
    return
  }
  // 观察者 创建一个ob
  let ob: Observer | void
  // 检测是否有缓存ob
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    // 直接将缓存的ob拿到
    ob = value.__ob__
  } else if (
    // 如果没有缓存的ob
    shouldObserve && // 当前状态是否能添加观察者
    !isServerRendering() && // 不是ssr
    (Array.isArray(value) || isPlainObject(value)) && // 是对象或数组
    Object.isExtensible(value) && // 是否可以在它上面添加新的属性
    !value._isVue  // 是否是Vue实例
  ) {
    // new 一个Observer实例 复制给ob
    // 也是把value进行响应化，并返回一个ob实例，还添加了__ob__属性
    ob = new Observer(value)
  }
  // 如果作为根data 并且当前ob已有值
  if (asRootData && ob) {
    // ++
    ob.vmCount++
  }
  // 最后返回ob，也就是一个Obesrver实例 有这个实例就有__ob__，然后其对象和数组都进行了响应化
  return ob
}

刚开始初始化时，内部肯定是没有ob这个属性的，所以会执行new Observer

因此继续看class Observer的构造函数

constructor (value: any) {
  this.value = value
  // 这里会new一个Dep实例
  this.dep = new Dep()
  this.vmCount = 0
  // def添加__ob__属性，value必须是对象
  def(value, '__ob__', this)
  // 判断当前value是不是数组
  if (Array.isArray(value)) {
    // 如果是数组
    // 检测当前浏览器中有没有Array.prototype
    // 当能使用__proto__时
    // 这里完成了数组的响应式，不使用这7个方法都不会触发响应式
    if (hasProto) {
      // 有原型时  将arrayMethods覆盖value.__proto__，也就是把增加了副作用的7个数组方法放了进来
      protoAugment(value, arrayMethods)
    } else {
      // 复制增加了副作用的7个数组方法
      copyAugment(value, arrayMethods, arrayKeys)
    }
    // 遍历将数组所有元素进行observe
    this.observeArray(value)
  } else {
    // 不是数组是对象，执行这里
    // walk就是给对象的所有key进行响应化
    this.walk(value)
  }
}

分析如图

可以看到，如果是数组，会首先对7个数组方法进行添加副作用，然后执行observeArray函数

所以继续看observeArray这个函数

// 遍历将数组所有元素进行observe
observeArray (items: Array<any>) {
  for (let i = 0, l = items.length; i < l; i++) {
    observe(items[i])
  }
}

这段代码大家应该都能一下就知道在干啥，遍历数组，对所有数组元素执行observe函数

那么继续看observe函数

export function observe (value: any, asRootData: ?boolean): Observer | void {
  // 判断是否为对象 判断是否为VNode
  if (!isObject(value) || value instanceof VNode) {
    // 如果不是对象 或者 是实例化的Vnode 也就是vdom
    return
  }
  // 观察者 创建一个ob
  let ob: Observer | void
  // 检测是否有缓存ob
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    // 直接将缓存的ob拿到
    ob = value.__ob__
  } else if (
    // 如果没有缓存的ob
    shouldObserve && // 当前状态是否能添加观察者
    !isServerRendering() && // 不是ssr
    (Array.isArray(value) || isPlainObject(value)) && // 是对象或数组
    Object.isExtensible(value) && // 是否可以在它上面添加新的属性
    !value._isVue  // 是否是Vue实例
  ) {
    // new 一个Observer实例 复制给ob
    // 也是把value进行响应化，并返回一个ob实例，还添加了__ob__属性
    ob = new Observer(value)
  }
  // 如果作为根data 并且当前ob已有值
  if (asRootData && ob) {
    // ++
    ob.vmCount++
  }
  // 最后返回ob，也就是一个Obesrver实例 有这个实例就有__ob__，然后其对象和数组都进行了响应化
  return ob
}

分析如图

可以看到，observe进行了一次处理，不是对象的他就不会执行observe去添加ob属性

如果是对象的话，就会执行new Observer，这时候又回到之前的那个构造函数，只不过这次执行的下面的else分支，这次不是数组了，所以会执行this.walk

如图

其实walk就是给对象所有的key进行defineReactive添加数据劫持(这里不细说，反正这样已经完成响应式了，不懂得可以看这篇)

所以数组中对象元素都是响应式的，因此下次再碰到这种情况，就不要再进入误区了，这里并没有通过数组下标去改变值，而是获取相应的对象，而这个对象是响应式的！

又一个误区

还有一个误区，也让很多人认为通过数组下标改变值会是响应式，直接看代码

<div id="app">
  <ul>
    <li v-for="item in objectList">
      {{item.value}}
    </li>
  </ul>
  <ul>
    <li v-for="item in list">
      {{item}}
    </li>
  </ul>
</div>

const app = new Vue({
  el: '#app',
  data: {
    objectList: [
      { value: 1, id: 1 },
      { value: 2, id: 2 },
      { value: 3, id: 3 },
    ],
    list: ['4', '5', '6']
  },
  mounted () {
    this.list[1] = '6'
    this.objectList[1].value = 3
  }
})

这里一个通过数组下标改变了一个值，又通过数组下标获取一个对象并改变对象的值

由之前得出的结论，第一个值的改变是不会响应式变化的，第二个值的改变会响应式变化

所以页面上应该显示1，3，3， 4， 5，6

但是打印结果如下

阿这，跟我们预想的不一样啊，为什么通过数组下标的this.list[1] = '6’响应式变化了呢？

这就是又一个误区

其实这里我们可以在this.list[1]='6’后，打印一下this.list

mounted () {
    this.list[1] = '6'
    console.log(this.list)
    this.objectList[1].value = 3
  }

可以看到，这时的list值是成功改变的了，只是没有响应式的渲染在页面上

所以继续执行后面的this.objectList[1].value = 3时，这是一个响应化的操作，因此当值改变时，会触发setter中的dep.notify，去通知视图更新，经过一系列vdom，patch后，vue会发现data中有个list数组中一个元素值也改变了，因此也会将当前改变的值和list数组中改变的那个值都给重新渲染了

因此这里的数组下标改变值的响应化其实是后一句执行 this.objectList[1].value = 3，这一句通知视图更新时，会检测到前一个list数组中值有变化，但是视图中没更新，因此才会一起渲染

实现数组下标改变值的响应式

其实，vue2.0x是可以实现数组下标改变值的响应式的，且非常简单

前面我们也知道，通过数组下标改变值，能成功改变data中的值，但是因为没有监听，因此不会触发响应式更新

那么我们可以通过添加属性监听完成这一操作，众所周知，数组索引也是数组的一个属性，因此让我们重写一下对数组的操作

constructor (value: any) {
  this.value = value
  this.dep = new Dep()
  this.vmCount = 0
  def(value, '__ob__', this)
  if (Array.isArray(value)) {
    if (hasProto) {
      protoAugment(value, arrayMethods)
    } else {
      copyAugment(value, arrayMethods, arrayKeys)
    }
    // this.observeArray(value)
    this.walkArray(value)
  } else {
    this.walk(value)
  }
}
walkArray (obj: Object) {
  obj.forEach((item, index) => {
    defineReactive(obj, index)
  })
}

我把原本的observeArray注释了，换成了自己写的walkArray，而walkArray就是实现了对索引的监听。

这时候就已经实现成功了，看看效果

<div id="app">
  <ul>
    <li v-for="item in list">
      {{item}}
    </li>
  </ul>
</div>

const app = new Vue({
  el: "#app",
  data: {
    list: ['1', '2', '3']
  },
  mounted (){
    this.list[1] = 4
  }
})

来看看这次，通过数组下标改变值会不会响应式变化

打印如下图

好的，成功实现了！

疑问

这时肯定都会有个疑问，如果这么简单就能实现这个数组下标的响应式的话，为什么尤大不写进去呢？

这里尤大有回答过：为什么vue没有提供对数组属性的监听？

既然尤大都说了性能问题，那不写入数组下标响应式肯定是他们经过考量之后的决定了

所以现在只要知道怎么实现以及避免这两个误区即可

总结

这也是在群里有人问了之后，我也踩进了误区，然后经过看源码后，算是对其有了清晰的认识了

所以作为一篇随笔写在这分享给大家，也算是避雷吧哈哈哈