Nevermind

Vue 3.4アップデート：より簡潔なv-bind記法とさらなる性能向上

4 分

1. Vue 3.4「Slam Dunk」の概要

2024年初め、Vueチームはコードネーム「Slam Dunk」と呼ばれるバージョン3.4をリリースした。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 リリース リアクティビティ