【Vuejs】1402- 6 個你必須明白 Vue3 的 ref 和 reactive 問題（入門篇）
Vue3 為開發(fā)者提供 ref和 reactive兩個 API 來實現(xiàn)響應式數(shù)據(jù)，這也是我們使用 Vue3 開發(fā)項目中經(jīng)常用到的兩個 API。
本文從入門角度和大家介紹這兩個 API，如果有錯誤，歡迎一起討論學習~
?「本文演示代碼是基于 Vue3 setup 語法?！?/strong>
?
在入門階段，我們需要掌握的是「是什么」、「怎么用」、「有什么注意」，基本就差不多了。
1. reactive API 如何使用？
reactive方法用來創(chuàng)建響應式對象，它接收一個對象/數(shù)組參數(shù)，返回對象的響應式副本，當該對象的屬性值發(fā)生變化，會自動更新使用該對象的地方。
下面以分別以「對象」和「數(shù)組」作為參數(shù)演示：
import { reactive } from 'vue'
let reactiveObj = reactive({ name : 'Chris1993' });
let setReactiveObj = () => {
reactiveObj.name = 'Hello Chris1993';
}
let reactiveArr = reactive(['a', 'b', 'c', 'd']);
let setReactiveArr = () => {
reactiveArr[1] = 'Hello Chris1993';
}
模版內(nèi)容如下：
<template>
<h2>Vue3 reactive API Base</h2>
<div>
Object:{{reactiveObj.name}}
<span @click="setReactiveObj">Update</span>
</div>
<div>
Array:{{reactiveArr}}
<span @click="setReactiveArr">Update</span>
</div>
</template>
此時頁面展示如下：
當我們分別點擊 Update按鈕后，可以看到數(shù)據(jù)變化后，視圖上內(nèi)容也一起更新了：
2. ref API 如何使用？
ref 的作用就是將一個「原始數(shù)據(jù)類型」（primitive data type）轉換成一個帶有「響應式特性」的數(shù)據(jù)類型，原始數(shù)據(jù)類型共有7個，分別是：String/ Number /BigInt /Boolean /Symbol /Null /Undefined。
ref的值在 JS/TS 中讀取和修改時，需要使用 .value獲取，在模版中讀取是，不需要使用 .value。
下面以分別以「字符串」和「對象」作為參數(shù)演示：
import { ref } from 'vue'
let refValue = ref('Chris1993');
let setRefValue = () => {
refValue.value = 'Hello Chris1993';
}
let refObj = ref({ name : 'Chris1993' });
let setRefObj = () => {
refObj.value.name = 'Hello Chris1993';
}
模版內(nèi)容如下：
<template>
<h2>Vue3 ref API Base</h2>
<div>
String:{{refValue}}
<span @click="setRefValue">Update</span>
</div>
<div>
Object:{{refObj.name}}
<span @click="setRefObj">Update</span>
</div>
</template>
此時頁面展示如下：
當我們分別點擊 Update按鈕后，可以看到數(shù)據(jù)變化后，視圖內(nèi)容也一起更新了：
3. reactive 可以用在深層對象或數(shù)組嗎？
答案是「可以的」，reactive是基于 ES2015 Proxy API 實現(xiàn)的，它的響應式是整個對象的所有嵌套層級。
下面以分別以「對象」和「數(shù)組」作為參數(shù)演示：
import { reactive } from 'vue'
let reactiveDeepObj = reactive({
user: {name : 'Chris1993'}
});
let setReactiveDeepObj = () => {
reactiveDeepObj.user.name = 'Hello Chris1993';
}
let reactiveDeepArr = reactive(['a', ['a1', 'a2', 'a3'], 'c', 'd']);
let setReactiveDeepArr = () => {
reactiveDeepArr[1][1] = 'Hello Chris1993';
}
模版內(nèi)容如下：
<template>
<h2>Vue3 reactive deep API Base</h2>
<div>
Object:{{reactiveDeepObj.user.name}}
<span @click="setReactiveDeepObj">Update</span>
</div>
<div>
Array:{{reactiveDeepArr}}
<span @click="setReactiveDeepArr">Update</span>
</div>
</template>
此時頁面展示如下：
當我們分別點擊 Update按鈕后，可以看到數(shù)據(jù)變化后，視圖上內(nèi)容也一起更新了：
4. reactive 返回值和源對象相等嗎？
答案是「不相等的」，因為reactive是基于 ES2015 Proxy API 實現(xiàn)的，返回結果是個 proxy 對象。
測試代碼：
let reactiveSource = { name: 'Chris1993' };
let reactiveData = reactive(reactiveSource);
console.log(reactiveSource === reactiveData);
// false
console.log(reactiveSource);
// {name: 'Chris1993'}
console.log(reactiveData);
// Reactive<{name: 'Chris1993'}>
5. TypeScript 如何寫 ref 和 reactive 參數(shù)類型？
在使用 TypeScript 寫 ref / reactive 參數(shù)類型時，可以根據(jù) ref / reactive 接口類型來實現(xiàn)具體的類型：
function ref<T>(value: T): Ref<T>
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
將前面實例代碼改造一下：
import { ref } from 'vue'
let refValue = ref<string>('Chris1993');
// refValue 類型為：Ref<string>
let setRefValue = () => {
refValue.value = 'Hello Chris1993'; // ok!
refValue.value = 1993; // error!
}
// reactive也類似
let reactiveValue = reactive<{name: string}>({name: 'Chris1993'});
6. 把 ref 值作為 reactive 參數(shù)會怎么樣？
當我們已有一個 ref對象，需要使用在 reactive對象中，會發(fā)生什么呢？
假設：
let name = ref('Chris1993');
let nameReactive = reactive({name})
我們可以做下列操作：
let name = ref('Chris1993');
let nameReactive = reactive({name})
console.log(name.value === nameReactive.name); // true
name.value = 'Hello Chris1993';
console.log(name.value); // Hello Chris1993
console.log(nameReactive.name); // Hello Chris1993
nameReactive.name = 'Hi Chris1993';
console.log(name.value); // Hi Chris1993
console.log(nameReactive.name); // Hi Chris1993
這是因為 reactive將會對所有深層的 refs進行解包，并且保持 ref的響應式。
當通過賦值方式將 ref分配給 reactive屬性時，ref也會自動被解包：
let name = ref('Chris1993');
let nameReactive = reactive({})
nameReactive.name = name;
console.log(name.value); // Chris1993
console.log(nameReactive.name); // Chris1993
console.log(name.value === nameReactive.name); // true
7. 總結
本文主要從入門角度和大家介紹reactive/ ref兩個 API 的使用方式區(qū)別，還有使用過程中的幾個問題。
簡單總結一下：
reactive一般用于對象/數(shù)組類型的數(shù)據(jù)，都不需要使用.value；ref一般用于基礎數(shù)據(jù)類型的數(shù)據(jù)，在 JS 中讀取和修改時，需要使用.value，在模版中使用時則不需要；reactive可以修改深層屬性值，并保持響應；reactive返回值和源對象不同；reactive的屬性值可以是ref值；
下一篇將和大家分享精通篇，歡迎大家期待。