vue中this.$set更新视图的使用

在vue的开发过程中，偶尔会遇到在想要更新数据的情况下，控制台中已经有更新数据打印，但是视图中没有更新的情况，比如在data中我们需要给data定义一个对象，在使用的过程中需要个对象添加属性：

代码如下：

<template>
	<view>
		{{list.name}}
		<input v-model="list.age" />
		<button @click="btnAdd">点击添加属性</button>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				list: {
					name: 'chen'
				}
			}
		},
		methods: {
			btnAdd(){
				this.list.age = 23
				console.error(this.list)
			}
		}
	}
</script>

<style>
</style>

点击添加属性按钮之后，控制台已经打印，视图没有更新

解决方法：通过this.$set(Object,key,value)方法就可以在数据变化之后更新视图

methods: {
    btnAdd(){
		// this.list.age = 23
		this.$set(this.list,'age',23)
		console.error(this.list)
    }
}