vue中數據劫持以及操作數組的坑有哪些

這篇文章將為大家詳細講解有關vue中數據劫持以及操作數組的坑有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

TL;DR

給data添加新屬性的時候vm.$set(vm.info,'newKey','newValue')
data上面屬性值是數組的時候，需要用數組的方法操作數組，而不能通過index或者length屬性去操作數組，因為監聽不到屬性操作的動作。

安裝和初使用vue

vue是構建用戶界面的漸進式框架。所謂的漸進式：vue + components + vue-router + vuex + vue-cli可以根據需要選擇相應的功能。
來串命令mkdir vue-apply;cd vue-apply;npm init -y;npm i vue。
來一個html文件如下，瀏覽器瞄下~，瀏覽器控制臺vm.msg=0再看下

 <div id="app">{{msg}}</div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
  let vm = new Vue({
    el:'#app',
    // template加上之后會替換掉#app這個標簽
    // template:'<h2>en</h2>',
    data:{msg:'msg'}
  })
  vm.msg = 'msg'
  </script>

說說mvvm mvc

mvc其實是model view Model傳統所有邏輯在controller,難以維護。用戶輸入 => 控制器 => 數據改變，如果數據變了需要獲取dom，操作屬性，再渲染到視圖上。

mvvm其實是model view viewModel數據變化驅動視圖。數據變了，不需要你獲取dom，然后改變dom的內容。這邊數據變了，vm負責監聽，視圖那邊自動發生變化。最明顯的是不需要document.querySelector之類的了。

vm的實質

上面說了vm負責讓數據變了，視圖能自動發生變化。這么神奇魔術背后的原理是Object.defineProperty。其實就是屬性的讀取和設置操作都進行了監聽，當有這樣的操作的時候，進行某種動作。來一個demo玩下。

// 對obj上面的屬性進行讀取和設置監聽
let obj = {
    name:'huahua',
    age:18
  }
  function observer(obj){
    if(typeof obj === 'object'){
      for (const key in obj) {
        defineReactive(obj,key,obj[key])
      }
    }
  }
  // get的return的值才是最終你讀取到的值。所以設的值是為讀取準備的。
  // set傳的參數是設置的值，注意這里不要有obj.name = newVal 這樣又觸發set監聽，會死循環的。
  function defineReactive(obj,key,value){
    Object.defineProperty(obj,key,{
      get:function(){
        console.log('你在讀取')
        // happy的話這邊可以value++，這樣你發現讀取的值始終比設置的大一個，因為return就是讀取到的值
        return value
      },
      set:function(newVal){
        console.log('數據更新了')
        value = newVal
      }

    })
  }
  observer(obj)
  obj.age = 2
  console.log(obj.age)

在瀏覽器執行的時候，控制臺隨手也可以obj.name="hua1"類似的操作，發現都監聽到了。但是如果更深一步，obj.name={firstname:'hua',lastname:'piaoliang'};obj.name.lastname='o'就不能監聽到屬性修改了。因為并沒有將新的賦值對象監聽其屬性。所以函數需要改進。

需要在defineReactive的第一行加上observer(value)。設置值的時候如果是對象的話，也需要將這個對象數據劫持。同理，set那邊也需要加這行。

 function defineReactive(obj,key,value){
    // 注意這里！！！！！！！
    observer(value)
    Object.defineProperty(obj,key,{
      get:function(){
        return value
      },
      set:function(newVal){
        // 注意這里！！！！！！！
        observer(newVal)
        console.log('數據更新了')
        value = newVal
      }

    })
  }

繼續，如果obj.name=[1,2,3];obj.name.push(4)發現又沒有通知了，這是因為Object.defineProperty不支持監聽數組變化。所以需要重寫數組上面的方法。話說，最近看了個文章，理論上也可以監聽數組，但是性能消耗和收益不成正比，所以，vue就沒去實現了。

// 把數組上大部分方法重寫了，這里不一一列舉。但是如果你 [1,2].length--，這是捕捉不到的
  let arr = ['push','slice','split']
  arr.forEach(method=>{
    let oldPush = Array.property[method]
    Array.property[method] = function(value){
      console.log('數據更新')
      oldPush.call(this,value)
    }
  })

vue使用的時候注意的坑

正如上面的解釋，vue2.0的底層約莫是這個邏輯，所以使用需要注意的點：

因為是一開始就數據劫持了。所以后來如果新綁定屬性，是沒有數據劫持的。如果需要調用 vm.$set(vm.info,'newKey','newValue')，vm是vue的實例。

當屬性值是數組，數組變化的時候，跟蹤不到變化。因為數組雖然是對象，但是Object.defineProperty不支持數組，所以vue改寫了數組的所有方法，當調用數組方法的時候，就調動變動事件。但是不能通過屬性或者索引控制數組，比如length，index。

總結：data上，綁定所有屬性避免后期加新屬性。如果是數組，只能通過數組方法修改數組。如下例子，控制臺vm.arr--發現視圖并不會變化，vm.arr.push(4)就能變化

 <div id="app">{{msg}}{{arr}}</div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
  let vm = new Vue({
    el:'#app',
    // template加上之后會替換掉#app這個標簽
    // template:'<h2>en</h2>',
    data:{msg:'msg',arr:[1,2,3]}
  })
  vm.msg = 'msg'
  </script>

關于“vue中數據劫持以及操作數組的坑有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。