set修改对象 vue_Vue的set方法深入浅出

一、Vue的Set方法有什么用

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

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

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

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

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

图片来源自：Vue中文官网

三、在组件中使用Vue.set

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

import Vue from 'vue' //引用Vue

export default{

data(){

return{

data:['快乐','悲伤','理解']

}

},

methods:{

useSet(){

this.data[1] = '前端喵' //视图层不会更新

Vue.set(data,1,'前端喵');//视图层成功更新

}

}

}

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

export default{

data(){

return{

data:['快乐','悲伤','理解']

}

},

methods:{

useSet(){

this.data[1] = '前端喵' //视图层不会更新

this.$set(data,1,'前端喵');//视图层成功更新

}

}

}

四、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','可爱')