Vue.set源码

2021-12-14 12:01:45 阅读：154 来源： 互联网

标签：&& set return target val ob Vue 源码 key

先判断如果是数组，并且下标合法，就直接使用重写过的 splice 替换
如果是对象，并且 key 存在于 target 里，说明是对已有属性进行set,就替换值就行了
如果没有 ob，说明不是一个响应式对象，直接赋值返回，不进行响应式操作
是一个响应式对象，再把新属性变成响应式，并派发更新

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)}`)
  }
  // 如果是数组 而且 是合法的下标
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    // 直接使用 splice 就替换，注意这里的 splice 不是原生的，所以才可以监测到，具体看下面
    target.splice(key, 1, val)
    return val
  }
  // 到这说明是对象
  // 如果 key 存在于 target 里，就直接赋值，也是可以监测到的
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  // 获取 target.__ob__
  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
  }
  // 在 Observer 里介绍过，如果没有这个属性，就说明不是一个响应式对象
  if (!ob) {
    target[key] = val
    return val
  }
  // 然后把新添加的属性变成响应式
  defineReactive(ob.value, key, val)
  // 手动派发更新
  ob.dep.notify()
  return val
}

标签：&&,set,return,target,val,ob,Vue,源码,key
来源： https://blog.csdn.net/weixin_43294560/article/details/121923960

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue.set源码