在 Vue 中,通常数据发生变化时,视图会自动更新。但是,有几种情况可能导致数据变化不会触发视图更新:
1.对象属性的添加或删除:
Vue 无法检测到对象属性的添加或删除。因为 Vue 在初始化实例时对属性执行了 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应式的。
new Vue({ |
|
data: { |
|
a: 1 |
|
} |
|
}) |
|
// 添加新的根级响应式属性 |
|
vm.$set(vm.a, 'b', 2) // Vue.set(vm.a, 'b', 2) |
|
// 或者 |
|
vm.a = Object.assign({}, vm.a, { b: 2 }) |