亲自踩过的vue的坑-CSDN博客

一、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文档里说了：还是由于 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 包含的一组观察数组的变异方法！！！不是原始的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 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：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)复制代码