Vue 3 の Reactivity Transform についてまとめる

Contents

はじめに
有効化方法
おわりに
参考

はじめに

Vue 3.2.25 から試験的に実装されている Reactivity Transform という機能についてまとめます。
公式ドキュメントはこちらこちら

今まで Vue3 CompositionAPI におけるリアクティブな変数の定義にref()を使用した場合、リアクティブな値にアクセスする度に.valueを書く必要がありました。
Vue 3.2.25 から試験的に実装されている Reactivity Transform の$ref()を使用することで.valueなしで値にアクセス可能になります。

<script setup>
let count = $ref(0)

console.log(count)

function increment() {
  count++
}
</script>

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

ref オブジェクトを返す関数が存在する場合、$()を使用することで戻り値をリアクティブにできます。

function myCreateRef() {
  return ref(0)
}

let count = $(myCreateRef())

分割代入した場合も、.valueなしで値にアクセス可能です。
※Reactivity Transform を使用しない場合、分割代入するとリアクティブ性が失われてしまいました。(リアクティブの基礎 | Vue.js)

import { useMouse } from '@vueuse/core'

const { x, y } = $(useMouse())

console.log(x, y)

有効化方法

現在、Reactivity Transform はデフォルトでは無効になっているため、使用する場合は明示的に有効化する必要があります。

Vite の場合

// vite.config.js
export default {
  plugins: [
    vue({
      reactivityTransform: true
    })
  ]
}

vue-cli の場合

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        return {
          ...options,
          reactivityTransform: true
        }
      })
  }
}