9月2日、Vue 3.がリリースされた。このリリースはマイナーバージョンアップであり、互換性を損なう変更は含まれていないが、内部的な改善や新機能が追加されている。以下では、主な機能や変更点について詳述する。

• Reactivity System Optimizations
  Vue 3.5では、リアクティブシステムが大幅に最適化され、パフォーマンスが向上し、メモリ使用量が56%削減された。この改善により、SSR中に発生していた計算済み値の古さやメモリリークの問題が解消されている。また、大規模で深くリアクティブな配列の操作も最大で10倍の速度向上が見られるようになった。

  詳細: PR#10397, PR#9511

• Reactive Props Destructure
  Reactive Props Destructure機能が安定化し、デフォルトで有効化された。この機能により、<script setup>内でdefinePropsから分割された変数がリアクティブとなる。これにより、デフォルト値を持つpropsの宣言がJavaScriptの標準のデフォルト値構文を活用して簡素化された。

  Before

  const props = withDefaults(
    defineProps<{
      count?: number
      msg?: string
    }>(),
    {
      count: 0,
      msg: 'hello'
    }
  )
  

  After

  const { count = 0, msg = 'hello' } = defineProps<{
    count?: number
    message?: string
  }>()
  

  これにより、分割された変数countへのアクセスが自動的にコンパイラによってprops.countに変換されるため、アクセス時にリアクティブに追跡される。また、分割されたプロップ変数をウォッチしたり、コンポーザブルに渡す際には、ゲッターでラップする必要がある。

  watch(count /* ... */)
  //    ^ コンパイル時エラー
  watch(() => count /* ... */)
  //    ^ ゲッターでラップすると、期待通り動作
  useDynamicCount(() => count)
  

  さらに、分割されたプロップを通常の変数と区別するために、@vue/language-tools 2.1ではインレイヒントを有効にするオプションが提供されている。
  

  詳細: docs, RFC#502

• SSR Improvements
  Vue 3.5では、サーバーサイドレンダリング（SSR）に関するいくつかの長年要望されていた改善が導入された。以下の改善点が含まれている：

  • Lazy Hydration
    非同期コンポーネントがhydrateオプションを使用して、表示されるタイミングでのみハイドレートされるように制御可能になった。

    import { defineAsyncComponent, hydrateOnVisible } from 'vue'
    const AsyncComp = defineAsyncComponent({
      loader: () => import('./Comp.vue'),
      hydrate: hydrateOnVisible()
    })
    

    詳細: PR#11458

  • useId()
    クライアントとサーバー間で安定したIDを生成するためのuseId()APIが導入された。

    <script setup>
    import { useId } from 'vue'
    const id = useId()
    </script>
    <template>
      <form>
        <label :for="id">Name:</label>
        <input :id="id" type="text" />
      </form>
    </template>
    

    詳細: PR#11404

  • data-allow-mismatch
    クライアントとサーバーの値が異なる場合にハイドレーションミスマッチ警告を抑制するためのdata-allow-mismatch属性が追加された。

    <span data-allow-mismatch>{{ data.toLocaleString() }}</span>
    

• Custom Elements Improvements
  Vue 3.5では、defineCustomElement()APIに関連するいくつかの改善が行われた。これにより、カスタム要素をシャドウDOMなしでマウントしたり、ホスト要素やシャドウルートにアクセスする新しいAPIが提供された。

  import MyElement from './MyElement.ce.vue'
  defineCustomElements(MyElement, {
    shadowRoot: false,
    nonce: 'xxx',
    configureApp(app) {
      app.config.errorHandler = ...
    }
  })
  

• Other Notable Features

  • useTemplateRef()
    Template Refsを取得するための新しいAPI、useTemplateRef()が導入された。これにより、静的なref属性に依存せず、動的なrefバインディングが可能になった。

    <script setup>
    import { useTemplateRef } from 'vue'
    const inputRef = useTemplateRef('input')
    </script>
    <template>
      <input ref="input">
    </template>
    

    

  • Deferred Teleport
    <Teleport>コンポーネントにdeferプロパティが追加され、ターゲット要素が後でレンダリングされる場合でもテレポートが機能するようになった。

    <Teleport defer target="#container">...</Teleport>
    <div id="container"></div>
    

    詳細: PR#11387

  • onWatcherCleanup()
    ウォッチャー内でクリーンアップコールバックを登録するためのAPI、onWatcherCleanup()が導入された。

    import { watch, onWatcherCleanup } from 'vue'
    watch(id, (newId) => {
      const controller = new AbortController()
      fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {
        // callback logic
      })
      onWatcherCleanup(() => {
        // abort stale request
        controller.abort()
      })
    })
    

詳細はAnnouncing Vue 3.5を参照していただきたい。