vue的$set方法实现

/**
 * Set a property on an object. Adds the new property and
 * triggers change notification if the property doesn't
 * already exist.
 */
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)}`)
  }
  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.__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
}
  • vue的$set方法默认传入三个参数,需要修改的对象引用target,对象的键值(数组的index)key,要修改的值val。如果传入的target为vue本身、 $data,或者boolean,string,number,symbol等原始数据类型,则修改无效。
  • 对于数组或者对象已有属性的修改,直接修改相应的值。
  • 对于新的属性值,如果操作对象是可观测数据,则将属性添加为可观测属性值,并主动触发通知。如果是普通对象,则直接修改相应的属性值。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文为阮一峰大神的《ECMAScript 6 入门》的个人版提纯! babel babel负责将JS高级语法转义,...
    Devildi已被占用阅读 2,021评论 0 4
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,275评论 0 25
  • 不知道写啥,早上看了怎么样面对自己的负面情绪这样的小视频。感觉还挺好的,就是剥洋葱梳理情绪法。 ...
    走路去旅行阅读 125评论 0 0
  • 最近中午,受朋友委托,都在她的辅导班帮忙看娃午休。 有一天中午,四年级的牛牛无奈地对我说:“老师,我中午没办法睡觉...
    雨夜幽涧阅读 3,441评论 19 50
  • 《七绝·马鬃游》(新韵) 温志龄 美女携夫赴马鬃,旅游避暑乐无穷。 弹琴品蕊穿竹海,...
    碧野牧歌阅读 416评论 6 8