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;}