日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

本文轉載自微信公眾號「全棧修仙之路」，作者阿寶哥。轉載本文請聯系全棧修仙之路公眾號。   

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

本文是 Vue 3.0 進階系列 的第九篇文章，在組合式 API setup 配置項中經常會見到 Refs API 的身影，比如 ref、toRef 或 toRefs 等。那么這些常用 API 的作用和使用場景是什么?它們背后的實現原理又是什么?接下來，阿寶哥將帶著這些問題，跟大家一起來深入學習響應式 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(value: T): ToRef 
  
  
  
  
export function ref(value: T): Ref> 
  
  
  
  
export function ref(): Ref 
  
  
  
  
export function ref(value?: unknown) { 
  
  
  
  
  return createRef(value) 
  
  
  
  
} 
 
 
 
 

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

 
 
 
 

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

在創(chuàng)建 ref 對象時，如果發(fā)現 rawValue 參數本身就是 ref 對象的話，則會直接返回該對象。否則，會調用 RefImpl 構造函數創(chuàng)建 ref 對象。以 ref 使用的示例為例，通過 ref("Vue 3") 創(chuàng)建的 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(r: Ref | unknown): r is Ref 
  
  
  
  
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 { 
  
  
  
  
  private _value: T 
  
  
  
  
  public readonly __v_isRef = true 
  
  
  
  
  // 省略大部分代碼 
  
  
  
  
} 
 
 
 
 

觀察以上代碼可知，__v_isRef 屬性是一個公有的只讀屬性且它的值始終為 true。好的，了解完如何創(chuàng)建 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(ref: T): T extends Ref ? V : T { 
  
  
  
  
  return isRef(ref) ? (ref.value as any) : ref 
  
  
  
  
} 
 
 
 
 

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

四、toRef

該函數可以用來為源響應式對象上的某個 property 新創(chuàng)建一個 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( 
  
  
  
  
  object: T, 
  
  
  
  
  key: K 
  
  
  
  
): ToRef { 
  
  
  
  
  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 { 
  
  
  
  
  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(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) // 調用 toRef 函數為對象的 property 新建一個 ref 
  
  
  
  
  } 
  
  
  
  
  return ret 
  
  
  
  
} 
 
 
 
 

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

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

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