Vue data中的bug

476 阅读1分钟

当出现没有在 data 中定义 n,却使用了 n 会出现什么情况?

  • Vue 会给出警告
  • 若是第二层属性,则不会有警告,Vue只会检查第一层的属性

Object.defineProperty(obj,'n',{...})必须要有一个 'n' ,vm 才能监听&代理 obj.n ,Vue 无法监听一开始就不存在的 n


如何解决?

  1. 使用 Vue.set/this.$set 新增 key
  2. 最好提前将属性写好,值可设置为 undefined,不需要新增key

Vue.set/this.$set

  • 新增 key
  • 如果没有创建过就自动创建代理和监听
  • 触发 UI 更新 (注意不会立即更新)
  • Vue.set(this.object,'n',1) / this.set(this.object,'n',1)


当 data 中是对象时可以直接使用 以上方法解决问题,但当 data 中有数组,下标就是 key ,是没有办法提前声明所有的 key 或是每次都要 Vue.set/this.$set 也太麻烦了。

数组中新增的 key

  • 对于数组长度的常规操作就是 push、pop、、
  • 可通过篡改这些 API 来解决
  • 篡改后的 API会自动处理监听和代理,并更新 UI
  • Vue 提供了7个被篡改的 API 对数组进行增删操作