ref – Vue3 composition（組合式）API

ref的意思是引用，reference。

用來定義常用的基礎類型(String,Number,Boolean等等)

ref() 創建的響應式數據后會返一個響應式的對象。

屬性的值需要用?.value?才能訪問到，value返回的是Proxy

將值封裝在一個對象中，看似沒有必要，但為了保持 JavaScript 中不同數據類型的行為統一，這是必須的。這是因為在 JavaScript 中，Number?或?String?等基本類型是通過值而非引用傳遞的

使用

接受一個內部值并返回一個響應式且可變的 ref 對象，在setup函數內部訪問ref函數需要加.value， 如果要加類型，要用泛型，不加則會類型推論，也可以不給初始值，則是any，且是undefined：

const ref1 = ref(1);
const ref2 = ref<number>(2);
const ref3 = ref1.value;//不是響應式，相當于變量
const ref4 = ref();//refs.value是undefined
ref2.value = 5;//賦值 讀取都要.value

一般來說，ref只會賦值基礎數據類型和數組，也可以泛型聯合類型 如果將對象分配為ref值，則它將被reactive函數處理為深層的響應式對象：

//不建議，內部也是reactive處理
const ref1 = ref({
  a: 10,
});

//不確定類型
const ref3 = ref<string | number>();
ref3.value = 1;
ref3.value = "";

//數組對象，ts類型聲明，用泛型
type Obj1 = { c: string };
type Obj2 = {
  b: string;
  c: Obj1[];
};
const ref2 = ref<Obj2[]>([
  {
    b: "",
    c: [{ c: "" }],
  },
]);

參考文章

• 掘金
• 掘金
• 一文學會使用vue3組合式api