当出现没有在 data 中定义 n,却使用了 n 会出现什么情况?
- Vue 会给出警告
- 若是第二层属性,则不会有警告,Vue只会检查第一层的属性
Object.defineProperty(obj,'n',{...})必须要有一个 'n' ,vm 才能监听&代理 obj.n ,Vue 无法监听一开始就不存在的 n
如何解决?
- 使用 Vue.set/this.$set 新增 key
- 最好提前将属性写好,值可设置为 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 对数组进行增删操作