如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事。
1. Vue 无法检测实例被创建时不存在于data中的 property
原因:由于 Vue 会在初始化实例时对 property 执行getter/setter转化,所以 property 必须在data对象上存在才能让 Vue 将它转换为响应式的。
场景:
var vm = new Vue({ data:{}, // 页面不会变化 template: '
{{message}}
' }) vm.message = 'Hello!' // `vm.message` 不是响应式的
解决办法:
var vm = new Vue({ data: { // 声明 a、b 为一个空值字符串 message: '', }, template: '
{{ message }}
' }) vm.message = 'Hello!'
2. Vue 无法检测对象 property 的添加或移除
原因:官方 - 由于 JavaScript(ES5) 的限制,Vue.js不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在data对象上才能让 Vue.js 转换它,才能让它是响应的。
场景:
var vm = new Vue({ data:{ obj: { id: 001 } }, // 页面不会变化 template: '
{{ obj.message }}
' }) vm.obj.message = 'hello' // 不是响应式的 delete vm.obj.id // 不是响应式的
解决办法:
// 动态添加 - Vue.set Vue.set(vm.obj, propertyName, newValue) // 动态添加 - vm.$set vm.$set(vm.obj, propertyName, newValue) // 动态添加多个 // 代替 Object.assign(this.obj, { a: 1, b: 2 }) this.obj = Object.assign({}, this.obj, {