💗💗💗歡迎來到我的博客，你將找到有關如何使用技術解決問題的文章，也會找到某個技術的學習路線。無論你是何種職業，我都希望我的博客對你有所幫助。最后不要忘記訂閱我的博客以獲取最新文章，也歡迎在文章下方留下你的評論和反饋。我期待著與你分享知識、互相學習和建立一個積極的社區。謝謝你的光臨，讓我們一起踏上這個知識之旅！

🍀回顧響應式對象

在介紹知識點之前，我們準備好初始代碼

<template>
<h2>姓名：{{ person.name }}</h2>
<h2>姓名：{{ person.age }}</h2>
<button @click="change_name">修改名字</button>
<button @click="change_age"></button></template><script lang="ts" setup name="Person11">import {reactive} from 'vue'let person = reactive({name:'饅頭',age:22})function change_name(){person.name += '*'}function change_age(){person.age += 1}</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}</style>

運行結果如下

是否和你想的一樣呢，我們使用了reactive進行創建響應式對象

接下來我們對person進行解構賦值

或許有些人不太理解解構賦值，我從網上找了一段話

解構賦值是 JavaScript 中一種方便的語法，用于從數組或對象中提取數據并賦值給變量。通過解構賦值，可以輕松地提取數組中的元素或對象中的屬性，使代碼更簡潔易讀。它還可以嵌套使用，處理復雜的數據結構，但要注意避免過度解構，以保持代碼的可讀性。

接下來我們看看代碼中如何操作，只需在數據下面加一行

let {name,age} = person

接下來我們修改方法中的部分代碼

//原代碼
function change_name(){person.name += '*'}function change_age(){person.age += 1}
//修改之后的代碼
function change_name(){name += '*'}function change_age(){age += 1}

這樣我們的頁面是否還會響應呢，答案是不可以

如果我們再修改模板里面的內容呢

<h2>姓名：{{ name }}</h2>
<h2>姓名：{{ age }}</h2>

答案也是不更新的，但是數據究竟改沒改呢，我們打印一下

function change_name(){name += '*'console.log(name)}function change_age(){age += 1console.log(age)}

控制臺結果顯示如下，所以說是改了的

---

接下來我們解釋一下
let {name,age} = person
上面這行代碼和下面兩行代碼其實是等價的
let name=person.name
let age=person.age
同時我們要明確一點，下圖的數據是響應式的

但是我們解構后相當于自己重新定義了一個對象name和age，然后person.name和person.age是不變的
多說無益，我們測試一下叭

function change_name(){name += '*'console.log(name, person.name)}

結果顯然了叭，結論就是：響應式對象解構出的并非是響應式對象

---

🍀介紹toRefs

承接上個標題，我們如果想要將解構的對象變為響應式的，我們應該怎么做呢，只需要import一個toRefs

import {reactive,toRefs} from 'vue'

同時我們再將解構的person包裹一下toRefs

let {name,age} = toRefs(person)

這樣的意思就是，將解構的數據變為Ref定義的響應式對象，將reactive對象變為Ref對象
接下來我們改一下方法

function change_name(){name.value += '*'console.log(name, person.name)}function change_age(){age.value += 1console.log(age)}

這樣我們再測試一下

---

🍀介紹toRef（不常用）

toRef和toRefs是 Vue3 中用于處理響應式對象的兩個函數，它們有一些重要的區別：

toRef:參數：接收一個響應式對象和一個屬性名，返回一個 ref 對象，指向該屬性的值。用途：主要用于將單個屬性轉換為 ref 對象，使得該屬性的值能夠被響應式地跟蹤。示例：

toRefs:

參數：接收一個響應式對象，返回一個包含該對象所有屬性的 ref 對象。
用途：常用于在組件中將 props 轉換為響應式對象，或者在 setup 函數中處理響應式對象的多個屬性。
示例：

總的來說，toRef用于處理單個屬性，將其轉換為 ref 對象，而toRefs用于處理整個對象，將對象的所有屬性都轉換為 ref 對象

---

🍀總結

本節介紹了一下toRefs和toRef，同時回憶了一下reactive

挑戰與創造都是很痛苦的，但是很充實。