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

はじめに

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

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


let count = $ref(0)

console.log(count)

function increment() {
 count++
}

 {{ count }}

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
 }
 })
 }
}

おわりに

Vue 3.2.25 から試験的に実装されている Reactivity Transform という機能についてまとめました。よりシンプルにコードを記述できるので、正式に実装されるのが楽しみですね。この記事がどなたかの参考になれば幸いです。