一、Vue的Set方法有什么用

在Vue中，对数组和对象的某些操作是无法进行数据层与视图层实时响应的，情况如下 ：

默认数据：data = ['快乐','悲伤','理解']

1.当你利用索引直接设置一个项时，如：data[1] = '前端喵'

2.当你修改数组的长度时，如：data.length = 4

二、无法响应对象、数组的原因

图片来源自：Vue中文官网

三、在组件中使用Vue.set

1.我们通过Vue.set使用这一方法，但需要先引入Vue

<script>
	import Vue from 'vue'                                   //引用Vue
	export default{
		data(){
			return{
				data:['快乐','悲伤','理解']
			}
		},
		methods:{
			useSet(){
				this.data[1] = '前端喵'	        //视图层不会更新
				Vue.set(data,1,'前端喵');	//视图层成功更新
			}
		}
	}
</script>

2.Vue.set有一个别名: this.$set，通常我们在组件中不会引入Vue，而是会常常使用到this，这个方法也是我们经常使用的

<script>
	export default{
		data(){
			return{
				data:['快乐','悲伤','理解']
			}
		},
		methods:{
			useSet(){
				this.data[1] = '前端喵'	        //视图层不会更新
				this.$set(data,1,'前端喵');	//视图层成功更新
			}
		}
	}
</script>

四、Vue.set参数详解

数组：
data:['快乐','悲伤','理解']
Vue.set(array,key,value)      
// array 代表 数组
// key 代表 键名
// value 代表 新的值
// 例子：
//     修改：Vue.set(data,1,'前端喵')
//     新增：Vue.set(data,5,'喜欢')

对象： 
data:{
     'color':'#fff',
     'size':'500'
}
Vue.set(object,key,value)
// object 代表 对象
// key 代表  键名
// value 代表 新值
// 例子： 
//     修改：Vue.set(data,'color','#000')
//     新增：Vue.set(data,'type','可爱')