詳解vue的數據劫持以及操作數組的坑

更新時間：2019年04月18日 14:57:47 作者：顏醬

這篇文章主要介紹了vue的數據劫持以及操作數組的坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

TL;DR

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

安裝和初使用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:'<h1>en</h1>',
    data:{msg:'msg'}
  })
  vm.msg = 'msg'
  </script>

說說mvvm mvc

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

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

vm的實質

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

// 對obj上面的屬性進行讀取和設置監(jiān)聽
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 這樣又觸發(fā)set監(jiān)聽，會死循環(huán)的。
  function defineReactive(obj,key,value){
    Object.defineProperty(obj,key,{
      get:function(){
        console.log('你在讀取')
        // happy的話這邊可以value++，這樣你發(fā)現讀取的值始終比設置的大一個，因為return就是讀取到的值
        return value
      },
      set:function(newVal){
        console.log('數據更新了')
        value = newVal
      }

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

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

需要在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
      }

    })
  }

繼續(xù)，如果obj.name=[1,2,3];obj.name.push(4)發(fā)現又沒有通知了，這是因為Object.defineProperty不支持監(jiān)聽數組變化。所以需要重寫數組上面的方法。話說，最近看了個文章，理論上也可以監(jiān)聽數組，但是性能消耗和收益不成正比，所以，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--發(fā)現視圖并不會變化，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:'<h1>en</h1>',
    data:{msg:'msg',arr:[1,2,3]}
  })
  vm.msg = 'msg'
  </script>

以上所述是小編給大家介紹的vue的數據劫持以及操作數組的坑詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章: