簡單直觀的搞懂Vue3的ref、reactive、toRef、toRefs

轉載：https://blog.csdn.net/weixin_45517927/article/details/116016436

相對於Vue2來說，Vue3最大的突破就是 Composition API 。與現有的 Option API 截然不同。他的好處可以總結為兩點

更集中的邏輯關注點
更方便的函數邏輯復用機制
不整廢話，直接上貨。

作用
首先需要明確這四個函數都是用於在 setup 中創造 響應式變量 的。明確了這一前提，再分類討論。

區分
這四個函數分為兩類，可觸發頁面改變與不可觸發頁面改變。在我沒有完全搞懂每個函數具體的作用時，對這四個各面臨的場景及各自的特性是不大能有一個明確的理解的。很容易被混淆。

ref、reactive 可觸發頁面改變
區別

ref可用於任何類型的數據創建響應式，reactive只用於創建引用類型數據的響應式。
注意
ref對引用類型變量創建響應式其根本是當你給ref傳入引用類型則調用reactive方法為其創建響應式。

我為input進行雙向綁定 ref 創建的數據，並且注冊一個input事件來查看對原始數據的影響。

ref

// template 
<div>
    <input type="text" v-model="refVal" @input="inputRefHander" />
    {{ refVal }}
</div>

// js
let otherName = 'chris';
const refVal = ref(otherName);
const inputRefHander = () => {
    console.log(`ref:::refVal: ${refVal.value}, 原始數據: ${otherName}`);
}

通過打印出來的信息可以查看，ref 並不會影響原始數據。

注意： ref返回一個對象，所以在非模板中，使用 ref 創建的變量應通過 .value 的形式訪問變量值。在模板中則不用，它會自動展開為內部值。

reactive
我同樣對input做相同操作監測 reactive 返回的數據變化。

// template 
<div>
    <input type="text" v-model="reactiveVal.target" @input="inputreactiveHander" />
    {{ reactiveVal.target }}
</div>

// js
const obj = { type: 'obj', target: '5' }
const reactiveVal = reactive(obj);
const inputreactiveHander = () => {
    console.log('reactive:::', reactiveVal, "原始數據:::", obj);
}

通過打印可以很明顯的看出，原始數據也被改變。

注意：

不可使用解構的方式定義響應式變量，會破壞響應性。所以老老實實的去訪問屬性就完事兒了，不要圖那一兩個單詞的便利。
toRef、toRefs 不可觸發頁面改變
上面兩個介紹了，ref 和 reactive 可以改變頁面。接下來這兩個則不能去改變頁面，但是數據還是會遵循響應式。

區別、特點：

toRef 用於創建對象指定的屬性響應式，換句話說就是只能控制一個對象中的一個屬性。
toRefs 用於創建對象響應式。
他們對響應式的處理你可以理解為： toRef 類似 ref， toRefs 類似 reactive

toRef
還是同樣的配方，還是同樣的代碼

// template
<div class="item">
    <input type="text" v-model="toRefVal" @input="inputToRefHander" />
    {{ toRefVal }}
</div>

// js
const obj = { type: 'obj', target: '5' }
const toRefVal = toRef(obj, 'target');
const inputToRefHander = () => {
      console.log("toRef:::", toRefVal, "原始數據:::", obj);
}

toRef 接受兩個參數：

1. 需要給屬性創建響應式的對象
2. 需要創建響應式的屬性

通過打印的結果很容易看出，toRef是能改變原始數據的。從頁面上也能看出，並不能觸發頁面改變。

toRefs

// template
<div>
    <input type="text" v-model="target" @input="inputToRefsHander" />
    {{ target }}
</div>

// js
const obj = { type: 'obj', target: '5' }
const { target } = toRefs(obj);
const inputToRefsHander = () => {
    console.log("toRefs:::", target, "原始數據:::", obj);
}

依舊從打印結果中可以看出，原始數據被改變，頁面沒有被觸發。但從我的寫法上應該可以注意到，toRefs 返回的對象，隨便解、隨便構。絲毫不會影響值的響應性。

到這里也就寫完了，不過還是要提一句setup基礎知識。

ref、reactive、toRef、toRefs 這些方法 均需從 vue 中導入到組件。
ref、reactive、toRef、toRefs 創建的變量在 setup 中都需要 return { ... } 拋出才可在頁面使用，除非你是為props創建響應式。
最后總結成表格方便大家忘記特性的時候查閱，不過這么簡單應該不會忘記( 沒錯，我就是單純的想整個表格 )。

類型 是否觸發頁面改變 是否可以解構
ref 　　　　 是 否
reactive 　   是 否
toRef　　    否 否
toRefs　　  否 是