vue中的$set和Vue.set方法

当我们使用vue开发时经常会遇到当vue实例已经创建好了，有时候需要再次给数据赋值时，并不能在视图中改变
在vue文档中写着如果在实例创建之后添加新的属性到实例上，它不会触发视图更新
因此比如我们修改一个数组其中的一个值，或者添加一条数据时，不管用。

<div id="app">
	<p v-for="item in items" v-once>{{item}}p>
	<button @click="btn()">添加button>
div>

new Vue({
	el:'#app',
	data:{
		items:['a', 'b', 'c']
	},
	methods:{
		btn(){
			this.items[1] = 'd'
			console.log(this.items);
		}
	}
})

发现修改失败。

Vue.set() 方法
参数1： 要修改的对象
参数2： 属性
参数3： 属性的值是啥
返回值：已经修改好的值

有三种方法可以实现，分别是Vue.set, vm.$set, replace

var vm =new Vue({
	el:'#app',
	data:{
		items:['a', 'b', 'c']
	},
	methods:{
		btn(){
			Vue.set(this.items, 1, 'e')
			console.log(this.items)
		}
	}
})

发现修改完了。

 var vm =new Vue({
	el:'#app',
	data:{
		items:['a', 'b', 'c']
	},
	methods:{
		btn(){
			this.$set(this.items, 1, 'e')
			console.log(this.items)
		}
	}
})

修改完毕。