vue数据更新视图不同步

数据更新视图未变

1.vue中对象属性值数据视图实时更新

• 视图未改变的原因是vue无法监听到data中对象属性的增加和删除
• 由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的
• 解决办法：
  使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上
  Vue.set(vm.someObject, ‘b’, 2) 或者 this.$set(this.someObject,‘b’,2) （这也是全局 Vue.set 方法的别名

2.标签嵌套太深无法监听到一个属性值

• 可在动态改变数据的方法，第一行加
• this.$forceUpdate();

export default{
	data(){
		return (
			msg:{},
			name:'',
		)
	},
	methods:{
		addMsg(){
			this.msg.age = 18		//这样data中的msg无法实时更新msg.age
			this.$set(this.msg,'age',18)		//这样可以数据视图实时更新
		},
		changeName(){
			this.name = '小王' //正常可以数据视图实时更新，如果标签嵌套太深，会监听不到
			this.$forceUptate()		//这样就可以正常修改视图了
		},
	},
}