vue的$set方法實現(xiàn)

/**
 * 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)
  // 主動通知觸發(fā)更新
  ob.dep.notify()
  return val
}
  • vue的$set方法默認傳入三個參數(shù),需要修改的對象引用target,對象的鍵值(數(shù)組的index)key,要修改的值val。如果傳入的target為vue本身、 $data,或者boolean,string,number,symbol等原始數(shù)據(jù)類型,則修改無效。
  • 對于數(shù)組或者對象已有屬性的修改,直接修改相應(yīng)的值。
  • 對于新的屬性值,如果操作對象是可觀測數(shù)據(jù),則將屬性添加為可觀測屬性值,并主動觸發(fā)通知。如果是普通對象,則直接修改相應(yīng)的屬性值。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本文為阮一峰大神的《ECMAScript 6 入門》的個人版提純! babel babel負責將JS高級語法轉(zhuǎn)義,...
    Devildi已被占用閱讀 2,129評論 0 4
  • vue概述 在官方文檔中,有一句話對Vue的定位說的很明確:Vue.js 的核心是一個允許采用簡潔的模板語法來聲明...
    li4065閱讀 7,606評論 0 25
  • 不知道寫啥,早上看了怎么樣面對自己的負面情緒這樣的小視頻。感覺還挺好的,就是剝洋蔥梳理情緒法。 ...
    走路去旅行閱讀 158評論 0 0
  • 最近中午,受朋友委托,都在她的輔導班幫忙看娃午休。 有一天中午,四年級的牛牛無奈地對我說:“老師,我中午沒辦法睡覺...
    雨夜幽澗閱讀 3,652評論 19 50
  • 《七絕·馬鬃游》(新韻) 溫志齡 美女攜夫赴馬鬃,旅游避暑樂無窮。 彈琴品蕊穿竹海,...
    碧野牧歌閱讀 440評論 6 8

友情鏈接更多精彩內(nèi)容