vue 值改变后界面没有变_Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结...

如果你发现你自己需要在 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, { a: 1, b: 2 })

// 动态移除 - Vue.delete

Vue.delete(vm.obj, pro