Vue 3.0進階之什么是響應式Refs API

這期內容當中小編將會給大家帶來有關Vue 3.0進階之什么是響應式Refs API，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

一、ref

該函數接受一個內部值并返回一個響應式且可變的 ref 對象，該對象內部含有一個 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 函數實現

// packages/reactivity/src/ref.ts export function ref<T extends object>(value: T): ToRef<T> export function ref<T>(value: T): Ref<UnwrapRef<T>> export function ref<T = any>(): Ref<T | undefined> export function ref(value?: unknown) {   return createRef(value) }

由以上代碼可知，ref 函數的 value 參數除了支持基本數據類型之外，也支持非基本數據類型的參數。在 ref 函數內部，會調用 createRef  工廠函數來創建 ref 對象。createRef 函數具體實現如下：

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

在創建 ref 對象時，如果發現 rawValue 參數本身就是 ref 對象的話，則會直接返回該對象。否則，會調用 RefImpl 構造函數創建 ref  對象。以 ref 使用的示例為例，通過 ref("Vue 3") 創建的 ref 對象的內部結構如下圖所示：

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

二、isRef

該函數用于檢查指定值是否為一個 ref 對象。

2.1 使用示例

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

2.2 函數實現

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

由以上代碼可知，在 isRef 函數內部是通過 r && r.__v_isRef === true 表達式來判斷參數 r 是否為 ref  對象。前面我們已經分析了 ref 函數，已經知道 ref 對象的本質是 RefImpl 類的實例。那么該實例上的 __v_isRef  成員屬性是什么時候設置的呢?下面我們從源碼中來查找該問題的答案：

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

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

三、unref

該函數接受一個參數，如果該參數是一個 ref 對象，則返回該對象的內部值，否則返回參數本身。它是 val = isRef(val) ? val.value  : val 的語法糖函數。

3.1 使用示例

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

3.2 函數實現

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

在 unref 函數內部，會通過 isRef 函數判斷 ref 參數是否為 ref 對象，如果是的話，則會返回 ref.value  的值，否則返回參數本身。

四、toRef

該函數可以用來為源響應式對象上的某個 property 新創建一個 ref。之后，ref 可以被傳遞，它會保持對其源 property  的響應式連接。

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 函數實現

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

toRef 函數接受 object 和 key 兩個參數，其中 object 參數的類型為非原始類型。在函數中，會判斷 object[key] 對象是否為  ref 對象，如果是的話，直接返回 object[key] 的值，否則調用 ObjectRefImpl 類的構造函數并返回該類的實例：

// packages/reactivity/src/ref.ts class ObjectRefImpl<T extends object, K extends keyof T> {   public readonly __v_isRef = true // 用于標識 ref 對象    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 類的定義很簡單，類中包含一個公有的只讀屬性 __v_isRef，該屬性用于標識該類的實例是否為 ref  對象。除此之外，還包含了一個 setter 和 getter 方法，用來操作 value 的值。

五、toRefs

該函數用于將響應式對象轉換為普通對象，其中結果對象的每個 property 都是指向原始對象相應 property 的 ref。

5.1 使用示例

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

5.2 函數實現

// packages/reactivity/src/ref.ts export function toRefs<T extends object>(object: T): ToRefs<T> {   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) // 調用 toRef 函數為對象的 property 新建一個 ref   }   return ret }

由以上代碼可知，toRefs 主要用于把響應式對象轉換為普通對象， 在轉換過程中是通過調用 toRef  函數來處理對象的每個屬性。需要注意的是，toRefs 函數會為源對象中包含的 property 生成 ref。如果要為特定的 property 創建  ref，則應當使用 toRef 函數。

當 toRefs 示例的代碼成功執行后，控制臺會輸出以下結果：

那么在實際項目中，toRefs 函數有什么用呢?當從 setup 函數返回響應式對象時，toRefs  非常有用，這樣組件就可以在不丟失響應性的情況下對返回的對象進行解構：

<div id="app"></div> <script>    const { reactive, toRefs, createApp } = Vue     function useLoginInfo() {      const man = reactive({        name: "阿寶哥",        skill: "Vue 3"      })      // 返回時轉換為ref      return toRefs(man)    }     const app = createApp({      setup() {        // 可以在不失去響應性的情況下解構        const { name, skill } = useLoginInfo()        return {          name,          skill        }     },     template: `{{name}}正在學{{skill}}`    })   app.mount("#app") </script>

在以上示例中，我們在 useLoginInfo 函數內部使用了 toRefs 函數，用于對響應式 man 對象進行轉換。如果直接返回響應式 man  對象的話，在進行解構時 name 和 skill 的值如下圖所示：

而通過 toRefs 函數對響應式對象 man 進行轉換后，在進行解構時 name 和 skill 的值是這樣的：

通過對比發現，使用 toRefs 函數之后，可以在不失去響應性的情況下進行解構操作。

六、shallowRef

該函數用于創建一個跟蹤自身 .value 變化的 ref，但不會使其值也變成響應式的。

6.1 使用示例

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

6.2 函數實現

// packages/reactivity/src/ref.ts export function shallowRef<T extends object>(   value: T ): T extends Ref ? T : Ref<T> export function shallowRef<T>(value: T): Ref<T> export function shallowRef<T = any>(): Ref<T | undefined> export function shallowRef(value?: unknown) {   return createRef(value, true) }

在 shallowRef 函數內部也是通過調用 createRef 工廠函數來創建 ref 對象。跟前面介紹的 ref 函數的區別是，ref  函數內部未設置 createRef 函數的第二個參數，該參數的默認值是 false，具體如下所示：

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

由 shallowRef 示例的輸出結果可知，如果 shallow 參數的值為 true 的話，則 shallowMan.value  對象非響應式對象。如果要進一步理解 shallowRef 函數和 ref 函數之間的區別，我們就需要分析 RefImpl 類的具體實現：

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

在 RefImpl 構造函數中，如果 _shallow 的值為 true，則會直接把 _rawValue 的值賦值給 this._value  屬性，否則會先調用 convert 函數對 _rawValue 的值進行轉換，再進行賦值操作。其中 convert 函數被定義在  reactivity/src/ref.ts 文件中：

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

若待轉換的值是對象類型的話，則會使用 reactive 函數把 val 對象轉換為響應式對象，否則不做任何處理直接返回 val 對象。

了解完 shallowRef 函數之后，你可能會想知道在實際項目中，使用 shallowRef  函數之后會有什么影響?這里阿寶哥來舉一個具體的例子：

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

以上代碼執行后，控制臺只會輸出一次 "Vue 3"，但此時 shallowMan.value 的值已經被更新了：

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

那么如何及時輸出當前最新的值呢?針對這個問題，你可以使用 triggerRef 函數。

七、triggerRef

該函數用于手動執行與 shallowRef 關聯的任何副作用。

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) // 手動執行與 shallowMan 關聯的任何副作用

在添加完 triggerRef(shallowMan) 這行語句之后，以上的代碼成功運行后，控制臺就會輸出以下內容：

Vue 3 Vite 2

7.2 函數實現

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

在 triggerRef 函數內部，會調用 effect.ts 文件中導出的 trigger 函數來觸發 TriggerOpTypes.SET 操作。其中  TriggerOpTypes 是枚舉對象，用于定義觸發的操作類型。除了 SET 之外，還有 ADD、DELETE、CLEAR 等操作：

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

好的，triggerRef 函數我們就先介紹到這里，至于 trigger 函數內部是如何工作的，阿寶哥將在后續的文章中來揭開它背后的秘密。最后，我們來介紹  customRef 函數。

八、customRef

該函數用于創建一個自定義的 ref，并對其依賴項跟蹤和更新觸發進行顯式控制。它需要一個工廠函數，該函數接收 track 和 trigger  函數作為參數，并且返回一個帶有 get 和 set 的對象。

8.1 使用示例

<div id="app"></div> <script>    const { customRef, createApp } = Vue     function useDebouncedRef(value, delay = 200) {      let timeout      return customRef((track, trigger) => {        return {          get() {            track()            return value          },          set(newValue) {            clearTimeout(timeout)            timeout = setTimeout(() => {              value = newValue              trigger()            }, delay)          }        }       })     }      const app = createApp({       setup() {         return {           text: useDebouncedRef('阿寶哥')         }       },       template: `<input v-model="text" />`     })     app.mount("#app") </script>

在以上示例中，我們使用 customRef 函數創建了一個自定義 ref，該 ref 提供了 debounce 功能。

8.2 函數實現

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

customRef 函數接受一個 factory 參數，其類型為 CustomRefFactory：

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

通過以上類型定義可知，該自定義 ref 工廠函數接收 track 和 trigger 函數作為參數，并且返回一個帶有 get 和 set 的對象。而在  customRef 函數內部，會以傳入的 factory 工廠函數作為參數調用 CustomRefImpl 類的構造函數并返回新創建的實例。

其中 CustomRefImpl 類被定義在 reactivity/src/ref.ts 文件中，具體實現如下所示：

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

在 CustomRefImpl 類的構造函數中，會先調用傳入的 factory 工廠函數，然后對該工廠函數返回的對象進行解構操作。以前面的  customRef 示例為例，get 和 set 所對應的函數如下所示：

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)     }   } })

上述就是小編為大家分享的Vue 3.0進階之什么是響應式Refs API了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。