快捷導(dǎo)航

Vue之vue.$set()方法源碼案例詳解

更新時(shí)間：2021年08月30日 16:03:15 作者：lmew

這篇文章主要介紹了Vue之vue.$set()方法源碼案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

在使用vue開(kāi)發(fā)項(xiàng)目的過(guò)程中，經(jīng)常會(huì)遇到這樣的問(wèn)題：當(dāng)vue的data里邊聲明或者已經(jīng)賦值過(guò)的對(duì)象或者數(shù)組（數(shù)組里邊的值是對(duì)象）時(shí)，向?qū)ο笾刑砑有碌膶傩?，如果更新此屬性的值，是不?huì)更新視圖的。

這是因?yàn)樾录尤氲膶傩圆皇琼憫?yīng)式的，因此不會(huì)觸發(fā)視圖的更新，通常使用靜態(tài)方法Vue.set()或者實(shí)例方法this.$set()解決，使用方式：

對(duì)象：this.$set(target，key, value)

數(shù)組：this.$set(target，index, value)

但不管是靜態(tài)方法Vue.set()還是實(shí)例方法this.$set()，他們底層的實(shí)現(xiàn)邏輯是一樣的，實(shí)現(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 {
  // 首先判斷如果傳入的目標(biāo)對(duì)象是undefined, null, primitive(原始值)，或拋出警告
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  // 判斷目標(biāo)對(duì)象target是數(shù)組，并且key是合法的索引
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 取目標(biāo)數(shù)組的length值和key中較大的值作為target的length屬性
    target.length = Math.max(target.length, key)
    // 通過(guò)splice對(duì)key位置的元素進(jìn)行替換
    target.splice(key, 1, val)
    return val
  }
  // 如果key在目標(biāo)對(duì)象中已經(jīng)存在，則直接賦值
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  // 獲取target中的observer對(duì)象
  const ob = (target: any).__ob__
  // 如果target是vue實(shí)例或者$data直接返回
  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
  }
  // 如果ob不存在，說(shuō)明target不是響應(yīng)式對(duì)象，直接賦值，不觸發(fā)視圖更新
  if (!ob) {
    target[key] = val
    return val
  }
  // 如果ob存在，把key設(shè)置為響應(yīng)式屬性
  defineReactive(ob.value, key, val)
  // 發(fā)送通知，觸發(fā)視圖更新
  ob.dep.notify()
  return val
}

以上是vue 中set方法的源碼，在這里需要特別注意的是，在對(duì)數(shù)組進(jìn)行處理時(shí)，所用的splice方法并不是數(shù)組本身的方法，而是在vue中封裝的具有響應(yīng)式的數(shù)組方法。

到此這篇關(guān)于Vue之vue.$set()方法源碼案例詳解的文章就介紹到這了,更多相關(guān)Vue之vue.$set()方法源碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: