vue.$set()

246 阅读1分钟

$set是干什么的?

解决对象在添加新属性,该属性在data对象中没有,数据发生变化,页面不变的情况.

$set有什么用?

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

个人理解:
在vue的data中声明过的对象或者数组,在往他们里添加新的属性(没有声明过),给属性附过值但是视图是不更新的,因为vue是监听不到。

为什么监听不到? 由于 Vue 会在初始化实例时进行双向数据绑定,使用Object.defineProperty()方法添加getter/setter 方法,所以属性必须在 data 对象上存在时才能进行上述过程 ,这样才能让它是响应的。新添加的是没有添加getter/setter的,所以不会被监听到。

$set怎么用?

image.png

//  dynamicValidateForm: {
//        dynamicItem: [{ cover: '', title: '',digest: '' }]
  //    },
  //              target                                       属性名称           值
 this.$set(this.dynamicValidateForm.dynamicItem[file.data.index], 'cover', res.data.result)