iT邦幫忙

2024 iThome 鐵人賽

DAY 11
4
Modern Web

欸你是要進 Vue 了沒?系列 第 11

欸你是要進 Vue 了沒? - Day11:Vue 你怎麼 DOM 起來了?響應式基礎從 ref 開始(上)

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20240924/201691394RWlbGBYAP.png

還講到 debug 快笑死 XD

讓我們切入今天的正題 ref 不然要寫不完了
/images/emoticon/emoticon06.gif

定義

ref 是 Vue 3 中的一個組合式 API,負責綁定和管理「響應式狀態」。

什麼是響應式?

「資料變,UI 也跟著變」。

就是這麼直觀!

用量體重來比喻的話~

今天早上的 ++ 站上體重機,螢幕顯示 99.1。
今天晚上的 ++ 站上體重機,螢幕顯示 99.9。(再不去 HIIT 真的要三高了)

當體重改變,螢幕顯示的數字就會跟著改變。
這好像有點廢話,但大家是否依稀記得,在寫原生 JS 的時候⋯⋯更新 DOM 需要手動操作呢⋯⋯
https://ithelp.ithome.com.tw/upload/images/20240924/20169139cS3Fj5LSFm.jpg

來源:網路

Vue 的響應式用法就是來幫我們減輕這些負擔的哦!

具體行為

  1. 響應式綁定一個值:ref 可以將一個「值」(如數字、字串、物件等)包裝起來,提供這個值的響應用法。
  2. 影響 UI 呈現:Vue 會自動追蹤這個值的變化。
    當值發生改變,相關的 UI 元素會自動更新,於畫面呈現最新狀態。

這邊要提到官方文件解釋「為什麼要使用 ref?」,我看了覺得驚呼原來如此的說明:

這是通過一個基於依賴追蹤的響應式系統實現的。當一個組件首次渲染時,Vue 會追蹤在渲染過程中使用的每一個 ref。然後,當一個 ref 被修改時,它會觸發追蹤它的組件的一次重新渲染。

竟然講到「依賴追蹤、重新渲染」,好酷⋯⋯我們來看看它到底怎麼實現ㄉ!

語法

ref();

括號內可定義「值」,也就是你要請 ref 追蹤的參數。

範例一

我們這邊先用簡單的「數字型別」來綁綁看!

當我們這樣定義:

<script setup>
  import { ref } from 'vue';
  
  const count = ref(0);
</script>

以上範例做了什麼事:

  1. 響應式綁定一個值:ref(0) 將初始值設為 0,並將其綁定在 count 變數上。
  2. 影響 UI 呈現:ref 負責追蹤參數值,當這個值改變,與它相關的任何元素都會自動重新渲染,以顯示最新的值。

真的有綁定到嗎?我們印出來看看:

<script setup>
  import { ref } from 'vue';
  
  const count = ref(0);
  console.log(count);
</script>

我們在瀏覽器上卻印出了這東東:
https://ithelp.ithome.com.tw/upload/images/20240924/20169139z9Ctyr839z.png

return 一個物件?

沒錯!當我們透過 ref 去綁定一個值的時候,它將會 reutrn 一個 RefImpl 物件,其中將存放著綁定的這個物件的狀態,而其中:

  • _value:是 ref 存放「目前值」的地方。
  • value:是物件提供的「屬性」,可以供存取目前的值。

因此,我們可用 .value 這樣的方式來拿到實際的值!

<script setup>
  import { ref } from 'vue';
	
  const count = ref(0);
  console.log(count.value);
</script>

https://ithelp.ithome.com.tw/upload/images/20240924/20169139nCEPVGQGDl.png

那如果更動值呢?

<script setup>
import { ref } from "vue";

const count = ref(0);
++count.value; // 先將 count+1
console.log(count); // 印出 RefImpl 物件
</script>

RefImpl 物件也是沒在跟你偷懶!

https://ithelp.ithome.com.tw/upload/images/20240924/20169139x0WT2NzP8R.png

執行 ++count.value;count+1 後,RefImpl 物件中存放的值就跟著變成 1 囉!

ref 應該可以想成⋯⋯是一個「管理響應式狀態的包裝器」,將你要響應式綁定的東西的狀態存到 RefImpl 這個物件中管理,並提供屬性給你存取值。

模板中自動解包的 ref

上述範例我們是在 <script> 中,使用 ref 包裝好的物件去存取值,而 Vue 很貼心的讓使用者在要渲染 UI、也就是要在 <template> 操作這個 RefImpl 物件的 _value 的時候,幫我們「自動解包」。

解包?
也就是說:我們可以直接使用物件中的屬性值,不用再用 .value 這個方式去存取啦!

範例二

我們可以試試看這樣做:

<script setup>
import { ref } from "vue";

const count = ref(0);
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

<template> 中,Vue 會自動解包 ref 的物件,所以不需要寫成 count.value,可以直接透過 count 去取值。
count++{{ count }} 都是解包後的寫法喔!

小結

竟然有上下篇嗎!(沒有錯,配速就是很重要)

今天的兩個範例 ref 都是綁定了數字,明天我們來試探看看將它綁定「物件」會怎麼樣,然後也來說說為什麼要用它!
/images/emoticon/emoticon42.gif

範例 code ⬇️

https://github.com/Jamixcs/2024iThome-jamixcs/tree/main/src/components/day11

參考文件


上一篇
欸你是要進 Vue 了沒? - Day10:Vue 模板語法【指令 Directives】
下一篇
欸你是要進 Vue 了沒? - Day12:Vue 你怎麼 DOM 起來了?響應式基礎從 ref 開始(下)
系列文
欸你是要進 Vue 了沒?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言