dom不刷新 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, propertyname)

// 动态移除 - vm.$delete