在 Vue 過氣前要學的第四件事 - 2025 了還要用 .value ?

17th鐵人賽 vue vue.js vue3 vue3 composition api

Yanya

2025-09-04 00:00:40

255 瀏覽

分享至

前言

在 Vue 的使用中你可能會看到 ref 跟 reactive，
這是 Composition API 的核心，讓資料具備響應式。

但平平都是用來做變數的引用，到底差在哪裡確實是會讓人有點懷疑，
此篇文章就是用來釐清何種情況使用為較優解。

基礎語法

為避免第一次使用 Vue 的人看不懂
這邊還是簡單講解一下怎麼看響應式函數

註解

宣告一個常數，可以讓我們後續使用。

為這個常數賦予名稱。

響應式函數並接收一個參數初始值。

初始值為數字 0。

所以上面這句可以被理解為:
我們宣告了一個常數叫做 count，它是一個響應式的物件，裡面存了一個初始值 0。

言傳不如身教，話不多說，直接上手開始練習吧。

使用

`ref`

<script setup>
import { ref } from 'vue'

const year = ref(2025)

console.log(year.value) // 2025
</script>

<template>
	<h1>{{ year }}</h1>
</template>

`reactive`

<script setup>
import { reactive } from 'vue'

const date = reactive({year:2025})

console.log(date.year)  // Proxy(Object) {year: 2025}
</script>

<template>
	<h1>{{ date.year }}</h1>
</template>

一定要用 `ref` 或 `reactive` 嗎?

先說結論，如果你要 資料響應式變化 那就要用。

當你在模板中使用了一個 ref，然後改變了這個 ref 的值時，Vue 會自動檢測到這個變化，
並且相應地更新 DOM。
這是通過一個基於依賴追蹤的響應式系統實現的。
當一個組件首次渲染時，Vue 會追蹤在渲染過程中使用的每一個 ref。
然後，當一個 ref 被修改時，它會觸發追蹤它的組件的一次重新渲染。 - 為什麼要使用 ref？

使用時有什麼差異? 兩者接收的資料型態差在哪?

在使用上單一值會使用 ref ，而遇到物件時用 reactive 會更好，
但是! 其實你全都用 ref 也無所謂，後面會講為什麼。

ref 可以接受任意資料型態包含物件,
但通常會使用基本資料類型 ( Primitive data types )
reactive 只能接受物件類型 ( Reference data types )

所以到底為甚麼要 `.value` ?

我相信不管是第一次使用 Vue 或是使用一陣子的朋友都會覺得這個 .value ，
是一個很討厭的東西，都 2025 了要引用變數居然還要 .value 。

簡單來說就是由於原生 JavaScript 的限制，
我們需要透過 value 讓 Vue 有一個機會追蹤物件屬性變更，

但在這篇我們還不會過多講解這件事,
在後面響應式核心篇會再深入講解，讓我們銜接到 Alien-signals 時可以有更好的了解。

為什麼在 `<template>` 使用無須 `.value`?

Vue 會自動解包 模板中的響應式物件:

注意，在模板中使用 ref 時，我們不需要附加 .value。
為了方便起見，當在模板中使用時，ref 會自動解包 - ref()

`reactive` 就這麼沒人要嗎?

確實 ref 就足以應付大部分的場景，不過這邊我們可以來看一段 code。

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

const article = ref({
  author: 'Yanya',
  version: '3.5.0',
  title: 'Progressive JavaScript Framework'
})

function updateVersion(){
  article.value.version = '3.6.0'
}
</script>

<template>
  <h1>{{article.title}}</h1>  
  <h2>Author : {{article.author}}</h2>  
  <p>version : {{article.version}}</p>
  <button @click="updateVersion">點我更新版本</button>
</template>

這邊可以看到如果我用 ref 的話我就要 article.value.version 才有辦法更新裡面的屬性，
老實說真的有點煩。

於是我們稍微調整一下

+const article = reactive({
-const article = ref({
  author: 'Yanya',
  version: '3.5.0',
  title: 'Progressive JavaScript Framework'
})

function updateVersion(){
+   article.value.version = '3.6.0'
-   article.version = '3.6.0'
}

確實阿，會乾淨一點，那如果我今天多加一個狀況，我的物件裡面有 35 個屬性呢?

const article = reactive({
  author: 'Yanya',
  version: '3.5.0',
  title: 'Progressive JavaScript Framework'
+  // 略...
})

function updateVersion(){
  article.version = '3.6.0';
+  article.author = 'Evan';
+  article.title = 'Ref vs Reactive';
+  // 略...
}

聰明的你可能會想說，那不然我直接賦予他新的物件

不能替換整個對象：由於 Vue 的響應式跟蹤是通過屬性訪問實現的，因此我們必須始終保持對響應式對象的相同引用。這意味著我們不能輕易地“替換”響應式對象，因為這樣的話與第一個引用的響應性連接將丟失 - reactive() 的局限性

那我要怎麼做 QQ

這邊的話我們可以善用 Object.assign 將淺層物件複製到目標物件上

const article = reactive({
  author: 'Yanya',
  version: '3.5.0',
  title: 'Progressive JavaScript Framework'
  // 略...
})
+ const newInfo ={version:'3.6.0', author:'Evan', title:'Ref vs Reactive'}

function updateVersion(){
-  article.version = '3.6.0';
-  article.author = 'Evan';
-  article.title = 'Ref vs Reactive';
+  Object.assign(article,newInfo)
}