前言

面试提问： 数据更新了，但是视图未更新，通常有哪种情况，解决方案是什么

我还记不起来遇到过这种情况，所以百度了一下

有哪几种情况及解决方案

1、情况一：vue对象属性值数据视图实时更新

1. 未更新原因：vue无法监听到data中对象属性值的增删
2. 使用方案原因及解决方案

1. vue初始化实例的时候，会对属性执行getter/setter，所以，如果对象属性值必须存在data中，才会被响应
2. 解决方法：
    使用vue.set(对象名, 对象属性名,对象属性值)

2、情况二：标签嵌套太深无法监听到属性值

1. 未更新原因：标签嵌套太深无法监听到属性值
2. 使用方案原因及解决方案

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

示例

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()		//这样就可以正常修改视图了
		},
	},
}