vue开发中的一些坑-WEB开发编程网

一、Vue 不能检测对象属性的添加或删除：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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的属性是我动态添加上去的！！

” data-src=”https://user-gold-cdn.xitu.io/2018/3/14/162229f49f27ecc7?imageView2/0/w/1280/h/960/format/webp/ignore-error/1″ data-width=”758″ data-height=”704″ />

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/[email protected]/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回车看到下面的我才知道：

” data-src=”https://user-gold-cdn.xitu.io/2018/3/14/16222dd33b04ac87?imageView2/0/w/1280/h/960/format/webp/ignore-error/1″ data-width=”906″ data-height=”627″ />

这些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)

作者：mona
链接：https://juejin.im/post/5aa89ab9f265da238b7db328
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

一、Vue 不能检测对象属性的添加或删除：

二、数组更新检测

#注意事项

相关推荐

WEB开发编程网