Vue数组的动态响应

1.Vue动态响应

• ①数据动态响应式是Vue的核心思想之一，动态响应可以简单理解为：数据更新→视图更新；视图更新→数据更新，这里的数据分为对象和数组；
• ②对象：Vue处理对象的方式是通过Object.defineProperty劫持数据，通过getter和setter来处理；

• ③数组：通过劫持数组的原型方法；将所有可能使得数组产生变化的方法劫持，当数据调用这些方法的时候，dep.notify()，会通知依赖于此数据的视图update();但是这样做会产生2个问题，如下：

  ['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)
       ……
  //通知变化
  ob.dep.notify()
  return result
  })
  })

2.看看几个案例

• ①通过this.arr[index] = newValue赋值的方式不能更新视图；

• ②通过this.arr.length = 0,通过改变数组长度去改变数组，视图也不能更新；
  ①②虽然没有更新视图但是需要明白的是this.arr的数据是改变了的，只是没有通知依赖的数据更新；这是由于Vue没有做相应的处理。

  <p v-for="(item,index) in arr" :key="index">{{item}}</p>
  <button v-on:click="change">Click Me</button>
  
  data: {arr: [1, 3, 4, 5, 6],},
         methods: {
             change: function () {
                 this.arr[1] = 0;
                 this.arr.length = 0;}}

• ③混合方式
  若是①②和数组劫持了的方法一起使用，前面两种方法是起作用的；下图方法一和方法二的结果是不一样的，如下图所示，这也说明了在①和②中，数据是改变了的，只是视图没有更新。

  //方式一
  change: function () {
               this.arr[1] =0;
               this.arr.reverse()}
  //方式二
  change: function () {
               this.arr.reverse()
               this.arr[1] =0;}