vue源码解析:vue实例方法之set方法的实现原理
还记得,我们在将vue响应式原理的时候说过,Object.defineProperty()这个方法对对象的属性方法的添加或者删除不能做到实时的监听,数组通过索引去 修改数组都是不能被检测?所以vue实现了set方法,那么实现的set方法的原理是什么呢?vm.$set( target, propertyName/index, value )参数:{Object | Array} target{str
还记得,我们在将vue响应式原理的时候说过,Object.defineProperty()这个方法对对象的属性方法的添加或者删除不能做到实时的监听,数组通过索引去 修改数组都是不能被检测?所以vue实现了set方法,那么实现的set方法的原理是什么呢?
vm.$set( target, propertyName/index, value )
参数:
{Object | Array} target
{string | number} propertyName/index
{any} value
用法:
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue
无法探测普通的新增属性。
-
注意:对象不能是
Vue
实例,或者Vue
实例的根数据对象。
源码: src/core/observer/index.js
export function set (target, key, val){
if (process.env.NODE_ENV !== 'production' &&
(isUndef(target) || isPrimitive(target))
) {
warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
}
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.length = Math.max(target.length, key)
target.splice(key, 1, val)
return 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)
ob.dep.notify()
return val
}
首先,判断在非生产环境,传入的target如果是undefined
、null
或是原始类型,则直接跑出错误。
其次,如果判断target如果是个数组,并且key是索引的话,那么就取当前数组长度与key
这两者的最大值作为数组的新长度,然后使用数组的splice
方法将传入的索引key
对应的val
值添加进数组。Array
类型数据的变化侦测方式时说过,数组的splice
方法已经被我们创建的拦截器重写了,也就是说,当使用splice
方法向数组内添加元素时,该元素会自动被变成响应式的。
接下来,如果传入的target不是数组,那就当作是对象来处理。首先判断传入的key
是否已经存在于target
中,如果存在,表明这次操作不是新增属性,而是对已有的属性进行简单的修改值,那么就只修改属性值即可,接下来获取到traget
的__ob__
属性,我们说过,该属性是否为true
标志着target
是否为响应式对象,接着判断如果tragte
是 Vue
实例,或者是 Vue
实例的根数据对象,则抛出警告并退出程序,接着判断如果ob
属性为false
,那么表明target
不是一个响应式对象,那么我们只需简单给它添加上新的属性,不用将新属性转化成响应式,最后,如果target
是对象,并且是响应式,那么就调用defineReactive
方法将新属性值添加到target
上,defineReactive
方会将新属性添加完之后并将其转化成响应式,最后通知依赖更新。
总的来说set的执行流程应该是这样的:
是不是很简单呢?
更多推荐
所有评论(0)