Vue中的$set的使用

Vue.set(target,key,value)使用方法

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 

上面大概的意思就是如果你需要向对象中添加一个属性，而且需要这个属性是响应式的，添加后可以在视图中出现，那么需要使用Vue.$set()，例如下面的案例

<div id="app">
		<ul>
			<li v-for="(item,index) in list">{{item}}</li>
		</ul>
		<button @click="changes">按钮</button>
	</div>


	<script>
		new Vue({
			el:"#app",
			data:{
				list:{
					name: "张三",
		    		age: '30',
		    		info: {
		       		 content: 'my name is test'
		    		}
				}
			},
			methods:{
				changes(){
					this.list.sex='man';
					console.log(this)
					
				}
			},
			mounted(){
				console.log(this)
			}
		})
	</script>

点击按钮的时候需要给data中的list对象添加一个sex值是man，点击按钮后添加，你会发现视图并没有及时更新数据，但是在控制台中看到这个属性已经加上了

这时候需要使用Vue.set()这个方法，在实例中使用就是this.$set()

<div id="app">
		<ul>
			<li v-for="(item,index) in list">{{item}}</li>
		</ul>
		<button @click="changes">按钮</button>
	</div>


	<script>
		new Vue({
			el:"#app",
			data:{
				list:{
					name: "张三",
		    		age: '30',
		    		info: {
		       		 content: 'my name is test'
		    		}
				}
			},
			methods:{
				changes(){
					// this.list.sex='man';
					this.$set(this.list,'sex','man')
				}
			},
			mounted(){
				console.log(this)
			}
		})
	</script>

这时候你就会发现视图更新了