Nevermind

Vue 3.4 更新：v-bind 寫法更簡潔，效能再提升

3 分鐘

1. Vue 3.4「Slam Dunk」簡介

2024 年初，Vue 團隊發布了 3.4 版本，代號為「Slam Dunk」。這次更新雖然不像 3.0 那樣具有顛覆性，卻在兩個關鍵領域帶來重要改進：內部效能最佳化和開發者體驗提升。

其中最引人注目的變化，包括重寫的響應式系統、穩定的 defineModel API，以及更簡潔的 v-bind 語法。

2. 響應式系統重構

Vue 3.4 對核心響應式系統進行了大規模重構。這次重構的主要目標，是提升 computed 計算屬性的效率。

在舊版本中，即使計算屬性的相依項目沒有實際變化，也可能會進行不必要的重新計算。新版本透過更智慧的相依性追蹤，確保只在真正需要時才觸發計算，從而減少不必要的元件重新算繪。

對大部分開發者來說，這是一頓「免費的午餐」——你不需要修改任何程式碼，升級到 3.4 版本後便能自動享有效能提升。

3. defineModel：優雅的元件雙向綁定

在 3.4 版本之前，要在元件上實作類似 v-model 的雙向綁定，需要撰寫不少樣板程式碼：

之前 👎：

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

// 通常需要一个计算属性来包装
const value = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})
</script>

<template>
  <input v-model="value" />
</template>

Vue 3.4 將 defineModel API 從實驗階段轉為正式穩定。現在，實作上述功能只需要一行程式碼：

現在（Vue 3.4）👍：

<script setup>
const model = defineModel()
</script>

<template>
  <input v-model="model" />
</template>

defineModel 巨集會自動註冊 modelValue prop 和 update:modelValue 事件，並回傳一個可直接讀寫的 ref。這大幅簡化了支援 v-model 的元件開發。

4. v-bind 同名屬性簡寫

另一項提升開發體驗的語法糖，是 v-bind 的同名簡寫。當傳給元件的 prop 與你在 <script setup> 中定義的變數同名時，現在可以省略屬性值。

之前 👎：

<script setup>
const id = 'my-id'
const title = 'Hello Vue'
</script>

<template>
  <MyComponent :id="id" :title="title" />
</template>

現在（Vue 3.4）👍：

<script setup>
const id = 'my-id'
const title = 'Hello Vue'
</script>

<template>
  <MyComponent :id :title />
</template>

這個小改動讓範本程式碼變得更加清爽易讀。

結論

Vue 3.4 是一次紮實的迭代。它透過底層的效能最佳化和上層的 API 簡化，進一步鞏固了 Vue 作為一個「漸進式」框架的理念——既為大型應用程式提供強大的效能保障，也為日常開發帶來實實在在的便利。特別是 defineModel 的穩定，解決了長久以來元件封裝中的一個痛點，是本次更新中最值得稱讚的亮點。

Vue Vue3 Release Reactivity