色婷婷色99国产综合精品,国产一区二区三区在线无码在线

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

Vue3.0進(jìn)階之深入學(xué)習(xí)響應(yīng)式RefsAPI

本文轉(zhuǎn)載自微信公眾號(hào)「全棧修仙之路」，作者阿寶哥。轉(zhuǎn)載本文請(qǐng)聯(lián)系全棧修仙之路公眾號(hào)。

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站與策劃設(shè)計(jì),猇亭網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:猇亭等地區(qū)。猇亭做網(wǎng)站價(jià)格咨詢:13518219792

本文是 Vue 3.0 進(jìn)階系列的第九篇文章，在組合式 API setup 配置項(xiàng)中經(jīng)常會(huì)見(jiàn)到 Refs API 的身影，比如 ref、toRef 或 toRefs 等。那么這些常用 API 的作用和使用場(chǎng)景是什么?它們背后的實(shí)現(xiàn)原理又是什么?接下來(lái)，阿寶哥將帶著這些問(wèn)題，跟大家一起來(lái)深入學(xué)習(xí)響應(yīng)式 Refs API。

一、ref

該函數(shù)接受一個(gè)內(nèi)部值并返回一個(gè)響應(yīng)式且可變的 ref 對(duì)象，該對(duì)象內(nèi)部含有一個(gè) value 屬性。

1.1 使用示例

 
 
 
 
  
  
  
  const { ref } = Vue 
  
  
  
   
  
  
  
  const skill = ref("Vue 3") 
  
  
  
  console.log(skill.value) // Vue 3  
  
  
  
  skill.value = "Vite 2" 
  
  
  
  console.log(skill.value) // Vite 2

1.2 函數(shù)實(shí)現(xiàn)

 
 
 
 
  
  
  
  // packages/reactivity/src/ref.ts 
  
  
  
  export function ref(value: T): ToRef 
  
  
  
  export function ref(value: T): Ref> 
  
  
  
  export function ref(): Ref 
  
  
  
  export function ref(value?: unknown) { 
  
  
  
    return createRef(value) 
  
  
  
  }

由以上代碼可知，ref 函數(shù)的 value 參數(shù)除了支持基本數(shù)據(jù)類型之外，也支持非基本數(shù)據(jù)類型的參數(shù)。在 ref 函數(shù)內(nèi)部，會(huì)調(diào)用 createRef 工廠函數(shù)來(lái)創(chuàng)建 ref 對(duì)象。createRef 函數(shù)具體實(shí)現(xiàn)如下：

 
 
 
 
  
  
  
  // packages/reactivity/src/ref.ts 
  
  
  
  function createRef(rawValue: unknown, shallow = false) { 
  
  
  
    if (isRef(rawValue)) { 
  
  
  
      return rawValue 
  
  
  
    } 
  
  
  
    return new RefImpl(rawValue, shallow) 
  
  
  
  }

在創(chuàng)建 ref 對(duì)象時(shí)，如果發(fā)現(xiàn) rawValue 參數(shù)本身就是 ref 對(duì)象的話，則會(huì)直接返回該對(duì)象。否則，會(huì)調(diào)用 RefImpl 構(gòu)造函數(shù)創(chuàng)建 ref 對(duì)象。以 ref 使用的示例為例，通過(guò) ref("Vue 3") 創(chuàng)建的 ref 對(duì)象的內(nèi)部結(jié)構(gòu)如下圖所示：

從上圖中，我們可以清楚地看到 ref 對(duì)象內(nèi)部含有 __v_isRef、_rawValue 和 _value 等屬性。那么這些屬性有什么用呢?這里我們先來(lái)介紹 __v_isRef 屬性的作用。

二、isRef

該函數(shù)用于檢查指定值是否為一個(gè) ref 對(duì)象。

2.1 使用示例

 
 
 
 
  
  
  
  const { ref, isRef } = Vue 
  
  
  
   
  
  
  
  const name = ref("阿寶哥") 
  
  
  
  console.log(isRef(name)) // true

2.2 函數(shù)實(shí)現(xiàn)

 
 
 
 
  
  
  
  // packages/reactivity/src/ref.ts 
  
  
  
  export function isRef(r: Ref | unknown): r is Ref 
  
  
  
  export function isRef(r: any): r is Ref { 
  
  
  
    return Boolean(r && r.__v_isRef === true) 
  
  
  
  }

由以上代碼可知，在 isRef 函數(shù)內(nèi)部是通過(guò) r && r.__v_isRef === true 表達(dá)式來(lái)判斷參數(shù) r 是否為 ref 對(duì)象。前面我們已經(jīng)分析了 ref 函數(shù)，已經(jīng)知道 ref 對(duì)象的本質(zhì)是 RefImpl 類的實(shí)例。那么該實(shí)例上的 __v_isRef 成員屬性是什么時(shí)候設(shè)置的呢?下面我們從源碼中來(lái)查找該問(wèn)題的答案：

 
 
 
 
  
  
  
  // packages/reactivity/src/ref.ts 
  
  
  
  class RefImpl { 
  
  
  
    private _value: T 
  
  
  
    public readonly __v_isRef = true 
  
  
  
    // 省略大部分代碼 
  
  
  
  }

觀察以上代碼可知，__v_isRef 屬性是一個(gè)公有的只讀屬性且它的值始終為 true。好的，了解完如何創(chuàng)建 ref 對(duì)象和如何檢查指定值是否為一個(gè) ref 對(duì)象之后，我們來(lái)介紹下一個(gè)函數(shù) —— unref。

三、unref

該函數(shù)接受一個(gè)參數(shù)，如果該參數(shù)是一個(gè) ref 對(duì)象，則返回該對(duì)象的內(nèi)部值，否則返回參數(shù)本身。它是 val = isRef(val) ? val.value : val 的語(yǔ)法糖函數(shù)。

3.1 使用示例

 
 
 
 
  
  
  
  const { ref, unref } = Vue 
  
  
  
   
  
  
  
  const name = ref("阿寶哥") 
  
  
  
  console.log(unref(name)) // "阿寶哥"

3.2 函數(shù)實(shí)現(xiàn)

 
 
 
 
  
  
  
  // packages/reactivity/src/ref.ts 
  
  
  
  export function unref(ref: T): T extends Ref ? V : T { 
  
  
  
    return isRef(ref) ? (ref.value as any) : ref 
  
  
  
  }

在 unref 函數(shù)內(nèi)部，會(huì)通過(guò) isRef 函數(shù)判斷 ref 參數(shù)是否為 ref 對(duì)象，如果是的話，則會(huì)返回 ref.value 的值，否則返回參數(shù)本身。

四、toRef

該函數(shù)可以用來(lái)為源響應(yīng)式對(duì)象上的某個(gè) property 新創(chuàng)建一個(gè) ref。之后，ref 可以被傳遞，它會(huì)保持對(duì)其源 property 的響應(yīng)式連接。

4.1 使用示例

 
 
 
 
  
  
  
  const { reactive, toRef } = Vue 
  
  
  
   
  
  
  
  const man = reactive({ 
  
  
  
    name: "阿寶哥", 
  
  
  
    skill: "Vue 3" 
  
  
  
  }) 
  
  
  
  const skillRef = toRef(man, 'skill'); 
  
  
  
  console.log(`skillRef.value：${skillRef.value}`); // skillRef.value：Vue 3 
  
  
  
   
  
  
  
  skillRef.value = "Vite 2"; 
  
  
  
  console.log(`man.skill：${man.skill}`); // man.skill：Vite 2

4.2 函數(shù)實(shí)現(xiàn)

 
 
 
 
  
  
  
  // packages/reactivity/src/ref.ts 
  
  
  
  export function toRef( 
  
  
  
    object: T, 
  
  
  
    key: K 
  
  
  
  ): ToRef { 
  
  
  
    return isRef(object[key]) 
  
  
  
      ? object[key] 
  
  
  
      : (new ObjectRefImpl(object, key) as any) 
  
  
  
  }

toRef 函數(shù)接受 object 和 key 兩個(gè)參數(shù)，其中 object 參數(shù)的類型為非原始類型。在函數(shù)中，會(huì)判斷 object[key] 對(duì)象是否為 ref 對(duì)象，如果是的話，直接返回 object[key] 的值，否則調(diào)用 ObjectRefImpl 類的構(gòu)造函數(shù)并返回該類的實(shí)例：

 
 
 
 
  
  
  
  // packages/reactivity/src/ref.ts 
  
  
  
  class ObjectRefImpl { 
  
  
  
    public readonly __v_isRef = true // 用于標(biāo)識(shí) ref 對(duì)象 
  
  
  
   
  
  
  
    constructor(private readonly _object: T, private readonly _key: K) {} 
  
  
  
   
  
  
  
    get value() { 
  
  
  
      return this._object[this._key] 
  
  
  
    } 
  
  
  
   
  
  
  
    set value(newVal) { 
  
  
  
      this._object[this._key] = newVal 
  
  
  
    } 
  
  
  
  }

ObjectRefImpl 類的定義很簡(jiǎn)單，類中包含一個(gè)公有的只讀屬性 __v_isRef，該屬性用于標(biāo)識(shí)該類的實(shí)例是否為 ref 對(duì)象。除此之外，還包含了一個(gè) setter 和 getter 方法，用來(lái)操作 value 的值。

五、toRefs

該函數(shù)用于將響應(yīng)式對(duì)象轉(zhuǎn)換為普通對(duì)象，其中結(jié)果對(duì)象的每個(gè) property 都是指向原始對(duì)象相應(yīng) property 的 ref。

5.1 使用示例

 
 
 
 
  
  
  
  const { reactive, toRefs } = Vue 
  
  
  
   
  
  
  
  const man = reactive({ 
  
  
  
    name: "阿寶哥", 
  
  
  
    skill: "Vue 3" 
  
  
  
  }) 
  
  
  
  console.log(toRefs(man));

5.2 函數(shù)實(shí)現(xiàn)

 
 
 
 
  
  
  
  // packages/reactivity/src/ref.ts 
  
  
  
  export function toRefs(object: T): ToRefs { 
  
  
  
    if (__DEV__ && !isProxy(object)) { 
  
  
  
      console.warn(`toRefs() expects a reactive object but received a plain one.`) 
  
  
  
    } 
  
  
  
    const ret: any = isArray(object) ? new Array(object.length) : {} 
  
  
  
    for (const key in object) { 
  
  
  
      ret[key] = toRef(object, key) // 調(diào)用 toRef 函數(shù)為對(duì)象的 property 新建一個(gè) ref 
  
  
  
    } 
  
  
  
    return ret 
  
  
  
  }

由以上代碼可知，toRefs 主要用于把響應(yīng)式對(duì)象轉(zhuǎn)換為普通對(duì)象，在轉(zhuǎn)換過(guò)程中是通過(guò)調(diào)用 toRef 函數(shù)來(lái)處理對(duì)象的每個(gè)屬性。需要注意的是，toRefs 函數(shù)會(huì)為源對(duì)象中包含的 property 生成 ref。如果要為特定的 property 創(chuàng)建 ref，則應(yīng)當(dāng)使用 toRef 函數(shù)。

當(dāng) toRefs 示例的代碼成功執(zhí)行后，控制臺(tái)會(huì)輸出以下結(jié)果：

那么在實(shí)際項(xiàng)目中，toRefs 函數(shù)有什么用呢?當(dāng)從 setup 函數(shù)返回響應(yīng)式對(duì)象時(shí)，toRefs 非常有用，這樣組件就可以在不丟失響應(yīng)性的情況下對(duì)返回的對(duì)象進(jìn)行解構(gòu)：

在以上示例中，我們?cè)?useLoginInfo 函數(shù)內(nèi)部使用了 toRefs 函數(shù)，用于對(duì)響應(yīng)式 man 對(duì)象進(jìn)行轉(zhuǎn)換。如果直接返回響應(yīng)式 man 對(duì)象的話，在進(jìn)行解構(gòu)時(shí) name 和 skill 的值如下圖所示：

而通過(guò) toRefs 函數(shù)對(duì)響應(yīng)式對(duì)象 man 進(jìn)行轉(zhuǎn)換后，在進(jìn)行解構(gòu)時(shí) name 和 skill 的值是這樣的：

通過(guò)對(duì)比發(fā)現(xiàn)，使用 toRefs 函數(shù)之后，可以在不失去響應(yīng)性的情況下進(jìn)行解構(gòu)操作。

六、shallowRef

該函數(shù)用于創(chuàng)建一個(gè)跟蹤自身 .value 變化的 ref，但不會(huì)使其值也變成響應(yīng)式的。

6.1 使用示例

 
 
 
 
  
  
  
  const { shallowRef, isReactive } = Vue 
  
  
  
   
  
  
  
  const shallowMan = shallowRef({ 
  
  
  
    name: "阿寶哥", 
  
  
  
    skill: "Vue 3" 
  
  
  
  }) 
  
  
  
   
  
  
  
  console.log(isReactive(shallowMan.value)) // false

6.2 函數(shù)實(shí)現(xiàn)

 
 
 
 
  
  
  
  // packages/reactivity/src/ref.ts 
  
  
  
  export function shallowRef( 
  
  
  
    value: T 
  
  
  
  ): T extends Ref ? T : Ref 
  
  
  
  export function shallowRef(value: T): Ref 
  
  
  
  export function shallowRef(): Ref 
  
  
  
  export function shallowRef(value?: unknown) { 
  
  
  
    return createRef(value, true) 
  
  
  
  }

在 shallowRef 函數(shù)內(nèi)部也是通過(guò)調(diào)用 createRef 工廠函數(shù)來(lái)創(chuàng)建 ref 對(duì)象。跟前面介紹的 ref 函數(shù)的區(qū)別是，ref 函數(shù)內(nèi)部未設(shè)置 createRef 函數(shù)的第二個(gè)參數(shù)，該參數(shù)的默認(rèn)值是 false，具體如下所示：

 
 
 
 
  
  
  
  function createRef(rawValue: unknown, shallow = false) { 
  
  
  
    if (isRef(rawValue)) { 
  
  
  
      return rawValue 
  
  
  
    } 
  
  
  
    return new RefImpl(rawValue, shallow) 
  
  
  
  }

由 shallowRef 示例的輸出結(jié)果可知，如果 shallow 參數(shù)的值為 true 的話，則 shallowMan.value 對(duì)象非響應(yīng)式對(duì)象。如果要進(jìn)一步理解 shallowRef 函數(shù)和 ref 函數(shù)之間的區(qū)別，我們就需要分析 RefImpl 類的具體實(shí)現(xiàn)：

 
 
 
 
  
  
  
  // packages/reactivity/src/ref.ts 
  
  
  
  class RefImpl { 
  
  
  
    private _value: T 
  
  
  
   
  
  
  
    public readonly __v_isRef = true // 用于判斷是否為 ref 對(duì)象 
  
  
  
   
  
  
  
    constructor(private _rawValue: T, public readonly _shallow = false) { 
  
  
  
      this._value = _shallow ? _rawValue : convert(_rawValue) // 是否把 _rawValue 對(duì)象轉(zhuǎn)換為響應(yīng)式對(duì)象 
  
  
  
    } 
  
  
  
     
  
  
  
    get value() { 
  
  
  
      track(toRaw(this), TrackOpTypes.GET, 'value') // 跟蹤 get 操作 
  
  
  
      return this._value 
  
  
  
    } 
  
  
  
   
  
  
  
    set value(newVal) { 
  
  
  
      if (hasChanged(toRaw(newVal), this._rawValue)) { // 判斷值是否發(fā)生變化 
  
  
  
        this._rawValue = newVal 
  
  
  
        this._value = this._shallow ? newVal : convert(newVal) 
  
  
  
        trigger(toRaw(this), TriggerOpTypes.SET, 'value', newVal) // 觸發(fā) set 操作 
  
  
  
      } 
  
  
  
    } 
  
  
  
  }

在 RefImpl 構(gòu)造函數(shù)中，如果 _shallow 的值為 true，則會(huì)直接把 _rawValue 的值賦值給 this._value 屬性，否則會(huì)先調(diào)用 convert 函數(shù)對(duì) _rawValue 的值進(jìn)行轉(zhuǎn)換，再進(jìn)行賦值操作。其中 convert 函數(shù)被定義在 reactivity/src/ref.ts 文件中：

 
 
 
 
  
  
  
  // packages/reactivity/src/ref.ts 
  
  
  
  const convert = (val: T): T => 
  
  
  
    isObject(val) ? reactive(val) : val

若待轉(zhuǎn)換的值是對(duì)象類型的話，則會(huì)使用 reactive 函數(shù)把 val 對(duì)象轉(zhuǎn)換為響應(yīng)式對(duì)象，否則不做任何處理直接返回 val 對(duì)象。

了解完 shallowRef 函數(shù)之后，你可能會(huì)想知道在實(shí)際項(xiàng)目中，使用 shallowRef 函數(shù)之后會(huì)有什么影響?這里阿寶哥來(lái)舉一個(gè)具體的例子：

 
 
 
 
  
  
  
  const { shallowRef, watchEffect } = Vue 
  
  
  
   
  
  
  
  const shallowMan = shallowRef({ 
  
  
  
    name: "阿寶哥", 
  
  
  
    skill: "Vue 3" 
  
  
  
  }) 
  
  
  
   
  
  
  
  watchEffect(() => { 
  
  
  
    console.log(shallowMan.value.skill) 
  
  
  
  }) 
  
  
  
   
  
  
  
  shallowMan.value.skill = "Vite 2"

以上代碼執(zhí)行后，控制臺(tái)只會(huì)輸出一次 "Vue 3"，但此時(shí) shallowMan.value 的值已經(jīng)被更新了：

 
 
 
 
  
  
  
  shallowMan.value 
  
  
  
  {name: "阿寶哥", skill: "Vite 2"}

那么如何及時(shí)輸出當(dāng)前最新的值呢?針對(duì)這個(gè)問(wèn)題，你可以使用 triggerRef 函數(shù)。

七、triggerRef

該函數(shù)用于手動(dòng)執(zhí)行與 shallowRef 關(guān)聯(lián)的任何副作用。

7.1 使用示例

 
 
 
 
  
  
  
  const { shallowRef, watchEffect, triggerRef } = Vue 
  
  
  
   
  
  
  
  const shallowMan = shallowRef({ 
  
  
  
    name: "阿寶哥", 
  
  
  
    skill: "Vue 3" 
  
  
  
  }) 
  
  
  
   
  
  
  
  watchEffect(() => { 
  
  
  
    console.log(shallowMan.value.skill) 
  
  
  
  }) 
  
  
  
   
  
  
  
  shallowMan.value.skill = "Vite 2" 
  
  
  
  triggerRef(shallowMan) // 手動(dòng)執(zhí)行與 shallowMan 關(guān)聯(lián)的任何副作用

在添加完 triggerRef(shallowMan) 這行語(yǔ)句之后，以上的代碼成功運(yùn)行后，控制臺(tái)就會(huì)輸出以下內(nèi)容：

7.2 函數(shù)實(shí)現(xiàn)

 
 
 
 
  
  
  
  export function triggerRef(ref: Ref) { 
  
  
  
    trigger(toRaw(ref), TriggerOpTypes.SET, 'value', __DEV__ ? ref.value : void 0) 
  
  
  
  }

在 triggerRef 函數(shù)內(nèi)部，會(huì)調(diào)用 effect.ts 文件中導(dǎo)出的 trigger 函數(shù)來(lái)觸發(fā) TriggerOpTypes.SET 操作。其中 TriggerOpTypes 是枚舉對(duì)象，用于定義觸發(fā)的操作類型。除了 SET 之外，還有 ADD、DELETE、CLEAR 等操作：

 
 
 
 
  
  
  
  // packages/reactivity/src/operations.ts 
  
  
  
  export const enum TriggerOpTypes { 
  
  
  
    SET = 'set', 
  
  
  
    ADD = 'add', 
  
  
  
    DELETE = 'delete', 
  
  
  
    CLEAR = 'clear' 
  
  
  
  }

好的，triggerRef 函數(shù)我們就先介紹到這里，至于 trigger 函數(shù)內(nèi)部是如何工作的，阿寶哥將在后續(xù)的文章中來(lái)揭開(kāi)它背后的秘密。最后，我們來(lái)介紹 customRef 函數(shù)。

八、customRef

該函數(shù)用于創(chuàng)建一個(gè)自定義的 ref，并對(duì)其依賴項(xiàng)跟蹤和更新觸發(fā)進(jìn)行顯式控制。它需要一個(gè)工廠函數(shù)，該函數(shù)接收 track 和 trigger 函數(shù)作為參數(shù)，并且返回一個(gè)帶有 get 和 set 的對(duì)象。

8.1 使用示例

在以上示例中，我們使用 customRef 函數(shù)創(chuàng)建了一個(gè)自定義 ref，該 ref 提供了 debounce 功能。

8.2 函數(shù)實(shí)現(xiàn)

 
 
 
 
  
  
  
  // packages/reactivity/src/ref.ts 
  
  
  
  export function customRef(factory: CustomRefFactory): Ref { 
  
  
  
    return new CustomRefImpl(factory) as any 
  
  
  
  }

customRef 函數(shù)接受一個(gè) factory 參數(shù)，其類型為 CustomRefFactory ：

 
 
 
 
  
  
  
  // packages/reactivity/src/ref.ts 
  
  
  
  export type CustomRefFactory = ( 
  
  
  
    track: () => void, 
  
  
  
    trigger: () => void 
  
  
  
  ) => { 
  
  
  
    get: () => T 
  
  
  
    set: (value: T) => void 
  
  
  
  }

通過(guò)以上類型定義可知，該自定義 ref 工廠函數(shù)接收 track 和 trigger 函數(shù)作為參數(shù)，并且返回一個(gè)帶有 get 和 set 的對(duì)象。而在 customRef 函數(shù)內(nèi)部，會(huì)以傳入的 factory 工廠函數(shù)作為參數(shù)調(diào)用 CustomRefImpl 類的構(gòu)造函數(shù)并返回新創(chuàng)建的實(shí)例。

其中 CustomRefImpl 類被定義在 reactivity/src/ref.ts 文件中，具體實(shí)現(xiàn)如下所示：

 
 
 
 
  
  
  
  // packages/reactivity/src/ref.ts 
  
  
  
  class CustomRefImpl { 
  
  
  
    private readonly _get: ReturnType>['get'] 
  
  
  
    private readonly _set: ReturnType>['set'] 
  
  
  
   
  
  
  
    public readonly __v_isRef = true // 用于標(biāo)識(shí) ref 對(duì)象 
  
  
  
   
  
  
  
    constructor(factory: CustomRefFactory) { 
  
  
  
      const { get, set } = factory( 
  
  
  
        () => track(this, TrackOpTypes.GET, 'value'), // 跟蹤 get 操作 
  
  
  
        () => trigger(this, TriggerOpTypes.SET, 'value') // 觸發(fā) set 操作 
  
  
  
      ) 
  
  
  
      this._get = get 
  
  
  
      this._set = set 
  
  
  
    } 
  
  
  
   
  
  
  
    get value() { 
  
  
  
      return this._get() 
  
  
  
    } 
  
  
  
   
  
  
  
    set value(newVal) { 
  
  
  
      this._set(newVal) 
  
  
  
    } 
  
  
  
  }

在 CustomRefImpl 類的構(gòu)造函數(shù)中，會(huì)先調(diào)用傳入的 factory 工廠函數(shù)，然后對(duì)該工廠函數(shù)返回的對(duì)象進(jìn)行解構(gòu)操作。以前面的 customRef 示例為例，get 和 set 所對(duì)應(yīng)的函數(shù)如下所示：

 
 
 
 
  
  
  
  customRef((track, trigger) => { 
  
  
  
    return { 
  
  
  
      get() { 
  
  
  
        track() //  () => track(this, TrackOpTypes.GET, 'value') 
  
  
  
        return value 
  
  
  
      }, 
  
  
  
      set(newValue) { 
  
  
  
        clearTimeout(timeout) 
  
  
  
        timeout = setTimeout(() => { 
  
  
  
          value = newValue 
  
  
  
          trigger() // () => trigger(this, TriggerOpTypes.SET, 'value') 
  
  
  
        }, delay) 
  
  
  
      } 
  
  
  
    } 
  
  
  
  })

到這里，Refs API 都已經(jīng)介紹完了，細(xì)心的小伙伴應(yīng)該會(huì)發(fā)現(xiàn)多個(gè) Ref API 中都使用到了定義在 effect.ts 文件中的 track 和 trigger 函數(shù)，出于篇幅考慮阿寶哥就不打算繼續(xù)介紹這 2 個(gè)函數(shù)了。

在后續(xù)的 Vue 3 響應(yīng)式原理專題中，阿寶哥將會(huì)詳細(xì)分析這 2 個(gè)函數(shù)，感興趣的小伙伴記得關(guān)注阿寶哥的 Vue 3 進(jìn)階專欄喲。

九、參考資源

Vue 3 官網(wǎng) - Refs

本文題目：Vue3.0進(jìn)階之深入學(xué)習(xí)響應(yīng)式RefsAPI
路徑分享：http://www.dlmjj.cn/article/dhgcpdi.html

日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

新聞中心

其他資訊