Vue数据更新页面没有更新问题总结
1. Vue无法检测实例别创建时不存在于data
中的property
- 原因: 由于Vue会在初始化实例时对property执行
getter/setter
转化,所以property
必须在data
对象上存在才能让vue转换为响应式
var vm = new Vue({
data: {
},
template: '<div>{
{item}}</div>'
})
vm.item = 'hello world!!!'
var vm = new Vue({
data: {
item: '',
},
template: '<div>{
{item}}</div>'
})
vm.item = 'hello world!!!'
2. Vue无法检测对象property的添加或者删除
- 原因: 这是由于ECMAJavaScript 5 的限制,vue.js
不能检测到对象属性的添加或者删除
.
var vm = new Vue({
data: {
obj: {
id: 1,
},
},
template: '<div>{
{obj.item}}</div>'
})
vm.obj.item = 'hello world!!!'
delete vm.obj.id
Vue.set(vm.obj, propertyName, newValue)
Vue.$set(vm.obj, propertyName, newValue)
this.obj = Object.assign({
},