前言

vue3 前端代碼開發過程中，必然會涉及變量聲明，會用到：ref、reactive 。本章節 進行講解說明。

演示的項目，經處理后的結構如下：

ref

用途：ref 聲明變量時，使用。常用于 聲明 基本類型（此外，也可聲明對象）

具體更多細節，參考官網：
（1）https://cn.vuejs.org/api/reactivity-core.html#ref
（2）https://cn.vuejs.org/glossary/#ref

功能講解，演示如下：

1. 開發代碼如下：
   

<template><div>前端開發：{{ name }}</div><button @click="changeName">改變名稱</button>
</template><script lang="ts" setup>
let name = 'Vue3'
function changeName() {console.log('name 變量修改之前：', name)name = '一起學習吧~'console.log('name 變量修改之后：', name)
}
</script><style lang="scss" scoped></style>

2. 運行后，頁面效果如下：
   說明 瀏覽器控制臺區域，是需手動按F12調出來的，默認不展示。
   
3. 期望實現的需求功能：
   當點擊 “改變名稱” 這個按鈕時，頁面上內容 Vue3 變成 一起學習吧~

？思考：實際上，當點擊按鈕時，
(1) 代碼層面上的 變量 name 值，能否被修改 ？
(2) 頁面內容 Vue3 能否 變成 一起學習吧~ ?

點擊 “改變名稱” 按鈕，進行驗證：

從驗證結果上來看，變量值修改成功，但頁面內容沒有展示。
此時，若想實現頁面內容 “聯動” 效果，可使用 ref 進行變量聲明，將其改為響應式方式。

什么是響應式？

• 參考官網：https://cn.vuejs.org/glossary/#reactive-effect

更改為響應式方式后，
打開瀏覽器，控制臺有輸出內容：變量為一個RefImpl對象，期內有一個value屬性（如下）

再次嘗試點擊 “改變名稱” 按鈕，修改 頁面上的內容，
但是，仍然沒有發生變化，如下：

變量已經改為響應式的了，但頁面還是沒有變化

原因：代碼中，操作變量的方式不對，需調用 .value ，原來的代碼（如下）并未使用.value

調整后的代碼如下：

代碼調整完成后（使用 .value 修改變量值），
最后，再次進行功能驗證，已可正常同步聯動，效果如下：

reactive

用途：ref 聲明變量時，使用。只可用于 聲明 對象類型（不可用于基本類型）

具體更多細節，參考官網：https://cn.vuejs.org/api/reactivity-core.html#reactive

功能講解，演示如下：

1. 創建如下對象，當在頁面上，點擊“改變名稱”按鈕，驗證是否可同步修改變量、以及頁面是否會同步顯示？
   

<template><div>客戶姓名：{{ client.name }}</div><button @click="changeName">改變名稱</button>
</template><script lang="ts" setup>
let client = { name: '張三', age: 10 }console.log('聲明的變量是：', client)function changeName() {console.log('變量修改之前，屬性值：', client.name)client.name = '諸葛亮'console.log('變量修改之后，屬性值：', client.name)
}
</script><style lang="scss" scoped></style>

2. 經驗證，變量參數值會同步修改，但是頁面內容不會同步顯示。
   
3. 若想實現，變量值發生改變時，頁面同步顯示，可使用 reactive 聲明變量，此時將變為響應式。
   
4. 打開瀏覽器頁面，查看控制臺輸出：此時變量對象已經發生改變 為 Proxy
   
5. 點擊 “改變名稱” 按鈕，驗證可知：控制臺中顯示變量值發生改變，且頁面內容同步顯示。
   

說明：
（1）使用 ref 聲明的變量，修改參數值時，需使用 .value
（2）此處，使用 reactive 聲明的變量，修改參數值時，無需使用 .value

若有轉載，請注明出處：https://blog.csdn.net/CharlesYuangc/article/details/149105167