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