官方api解释了它的使用场景
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)
所以我们要知道,只有先定义在data 里 数据才具有响应式,如果自己后添加的属性是不具备响应式的
比如下边这个 属性a 具有响应式,但是b 就不会,如果你想让这个b 具有响应式
你可以使用 Vue.set(this.model, “b”, 20 ) 这样写使他具有响应式,
还有就是修改数组的某个值, 你直接通过索引的这种方式修改是不可以的,
但是你如果使用数组的 增删改查,排序,反转
方法 是会触发视图更新的,因为Vue内部重写了这些方法,并定义了响应式
new Vue({
data(){
return {
list: [1, 2, 3, 4]
model:{
a: 10
}
}
}
})
mounted(){
this.list[0] = 5;
this.model.b = 20;
}
那么, 接着来看看 set 方法是怎么做的
src/core/observer/index.js
export function set (target: Array<any> | Object, key: any, val: any): any {
if (process.env.NODE_ENV !== 'production' &&
(isUndef(target) || isPrimitive(target))
) {
warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
}
/**
* 这里判断你传入是数组,并且key 满足是数组的索引
*/
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.length = Math.max(target.length, key)
target.splice(key, 1, val)
return val
}
/**
* 这里判断你传入的是个对象,那就直接赋值操作,最后再调用
* defineReactive(ob.value, key, val)方法
*/
if (key in target && !(key in Object.prototype)) {
target[key] = val
return val
}
const ob = (target: any).__ob__
if (target._isVue || (ob && ob.vmCount)) {
process.env.NODE_ENV !== 'production' && warn(
'Avoid adding reactive properties to a Vue instance or its root $data ' +
'at runtime - declare it upfront in the data option.'
)
return val
}
if (!ob) {
target[key] = val
return val
}
defineReactive(ob.value, key, val)
// 调用 notify()方法,通知更新
ob.dep.notify()
return val
}
src/core/shared/util.js
isValidArrayIndex()就是判断是否满足是索引
/**
* Check if val is a valid array index.
*/
export function isValidArrayIndex (val: any): boolean {
const n = parseFloat(String(val))
return n >= 0 && Math.floor(n) === n && isFinite(val)
}
这段代码可以看出来,调用这个方法,传入3个参数(target, key ,val),返回值就是最后传入的 val
这个方法内部做了3件事(原理也比较好理解):
- 判断是数组的情况 并且满足是数组的索引, 最后通过
splice()
方法来处理是增加一条数据还是 修改某个索引的数据(所以你如果不想用set,直接使用这个方法也是可以修改数组的数据的,并且具有响应式)- 判断是对象的情况, 直接通过
target[key] = val
来添加属性或者修改属性对应的值, 接着再调用 defineReactive(ob.value, key, val),给新添加的属性再重新定义响应式- 最后调用 notify() 方法触发更新操作