親自踩過的vue的坑

mona發表於2018-03-14
Vue

一、Vue 不能檢測物件屬性的新增或刪除：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{obj.a}}</p>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      obj: {},
    },
    mounted() {
      this.obj.a = 1111
    }
  })
</script>
</body>
</html>複製程式碼

執行的結果是瀏覽器什麼都沒渲染出來

因為obj的屬性是我動態新增上去的！！

親自踩過的vue的坑

vue文件裡說了：還是由於 JavaScript 的限制，Vue 不能檢測物件屬性的新增或刪除：

所以想要動態新增物件的屬性並且頁面能更新到你可以用下面的的方法：

this.$set(this.obj,'a',1) // 方法一

this.obj = Object.assign({}, this.obj,{a:1})  //方法二 可以新增多個屬性複製程式碼

二、陣列更新檢測

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-for="item in arr"  :key="item.id">{{item}}</p>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      arr: [],
    },
    mounted() {
      this.arr.push(1)
    }
  })
</script>
</body>
</html>複製程式碼

為啥我們往陣列裡push在頁面上就能顯示出來？？？我之前沒想過這個問題！！！直到我在console皮膚裡輸入vm回車看到下面的我才知道：

親自踩過的vue的坑

這些Vue 包含的一組觀察陣列的變異方法！！！不是原始的push方法了了！！！

我嘗試console.log(this.arr.push)

列印出來的是：

function mutator() {
  var args = [], len = arguments.length;
  while (len--) args[len] = arguments[len];
  var result = original.apply(this, args);
  var ob = this.__ob__;
  var inserted;
  switch (method) {
    case 'push':
    case 'unshift':
      inserted = args;
      break
    case 'splice':
      inserted = args.slice(2);
      break
  }
  if (inserted) {
    ob.observeArray(inserted);
  } 
    // notify change 
    ob.dep.notify();
     return result 
}複製程式碼

push方法被vue包裝後ob.dep.notify()會通知更新頁面！


#注意事項

由於 JavaScript 的限制，Vue 不能檢測以下變動的陣列：

  1. 當你利用索引直接設定一個項時，例如：vm.items[indexOfItem] = newValue
  2. 當你修改陣列的長度時，例如：vm.items.length = newLength

為了解決第一類問題，以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果，同時也將觸發狀態更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
複製程式碼
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)
複製程式碼

為了解決第二類問題，你可以使用 splice：

example1.items.splice(newLength)複製程式碼


相關文章