Zenn
🎉

Vue 3.3のアップデートがきます！

2023/05/10に公開
Vue.js
tech

こんにちは！
今回はもうすぐ本リリース予定となっているVue.js 3.3にて追加される機能をいくつかご紹介しようと思います。

defineModel

VueMacroを導入すると使用できたdefineModelのマクロが使用できるようになります。

変更前の一例と、変更後のコードが以下のような形となっています。

変更前だと、VueUseのuseVModelを使用しても、propsとemitを宣言する必要があり、少しコード量が多くなっていましたが、かなりすっきりしたなと感じます。

<script setup>
// 変更前
const props = defineProps({ modelValue: String })
const emit = defineEmits(['update:modelValue'])

const model = computed({
  get: ()=> props.modelValue,
  set: (val)=> emit("update:modelValue", val)
})

// 変更後
const { modelValue } = defineModel()
console.log(modelValue.value)
</script>

defineOptions

こちらもVueMacroで使用できたマクロです。

コンポーネントの名称などのメタ要素はscript setupだけでは定義できず、もう一つscriptタグを追加する必要がありましたが、このマクロを使用すれば、追加の必要はありません。

// 変更前
<script setup>
const count = ref(1);
</script>

<script>
export default {
  name: "Counter"
}
</script>


// 変更後
<script setup>
defineOptions({
  name: "Counter"
})
const count = ref(1);
</script>

defineEmits

defineEmitsはもともと型付けを行えるようになっていますが、VueMacrosのshortEmitsのような型付けもサポートされるようです。

<script setup>
const emit = defineEmits<{
  foo: [id: string] //Tuple型
  bar: any[]
  baz: []
}>()
</script>

defineProps

3.3で入らなくなったReactivity Transformの一部が組み込まれます。
現状、script setup内のpropsのデフォルト値を設定する際にはwithDefaultsを使用する必要がありますが、この修正で必要なくなります。

他にも、propsの分割代入が可能になる、ジェネリクスで使用する型情報を外部からimport可能になるなどの変更があります。。

個人的に分割代入できるのはかなり便利だなと思いました。

// 変更前
<script setup lang="ts">
interface Props {
  foo: string
}

const props = withDefaults(defineProps<Props>(), {
  foo: 'bar',
})
</script>

// 変更後
<script setup lang="ts">
const { foo = "bar" } = defineProps<Props>(["foo"])
</script>

SFC with TS generics

こちらは、SFCの中でジェネリクスを使用できるようになるというものです。
Evan You氏のツイートではPropsの要素の型をジェネリクスを用いて定義する方法が紹介されていました。

<script setup lang="ts" generics="T extends string | number">
defineProps<{
  id: T
  list: { id: T }[]
}>()
</script>

deprecation

記載があったので念のため

  • v-isディレクティブが非推奨となり、3.4で廃止
  • @vnode系のhookが非推奨に変更
  • app.config.unwrapInjectedRefsが非推奨に変更

まとめ

今回はVue 3.3で追加される機能の一部を紹介しました。
definePropsの変更, defineModelの追加など大きな機能というより開発しやすくなりそうな変更が多いかなという印象です。

alpha, betaでの変更記録はGitHubのCHANGELOG.mdから確認できるので、興味がある方はそちらをご確認ください。

以上です。

Discussion