Vue.set

weixin_40612960

已于 2023-05-06 11:23:41 修改

阅读量41

点赞数

文章标签： vue.js javascript 前端

于 2023-05-05 13:58:43 首次发布

本文链接：https://blog.csdn.net/weixin_40612960/article/details/130502440

版权

Vue.set

检测即将添加属性的target不能为基础类型
target为数组类型时，索引不能越界,然后使用重写的方法splice添加数据并设置响应式
target为对象类型时, 已存在的属性无需重复设置响应式，直接返回
target未添加过数据观测，则新添加的属性也无需设置响应式
使用defineReactive为新增的属性设置响应式
通知更新视图

function set (target, key, val) {
  // 校验target , 不能为null、undefined、string、number、symbol
  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
  }
  // 新增的property已经存在了，直接返回
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }  
  const ob = target.__ob__
  // target不能为vue实例 
  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
  }
  // 检测target上的ob，如果没有就表明target没有设置过响应式,就简单为该target添加属性并返回
  if (!ob) {
    target[key] = val
    return val
  }
  // 为新增的属性添加响应式
  defineReactive(ob.value, key, val)
  // 通知观察过该属性的视图更新
  ob.dep.notify()
  return val
}