Vue 3 スキル

Vue

Vue 3.5 に基づいています。常に Composition API と <script setup lang="ts"> を使用してください。

設定項目

• JavaScript よりも TypeScript を優先する
• <script> よりも <script setup lang="ts"> を優先する
• パフォーマンスのために、深いリアクティビティが必要ない場合は ref よりも shallowRef を優先する
• 常に Options API よりも Composition API を使用する
• リアクティブな Props の分割代入（Destructure）は推奨しない

コア

トピック	説明	リファレンス
Script Setup とマクロ	<script setup>、defineProps、defineEmits、defineModel、defineExpose、defineOptions、defineSlots、ジェネリクス	script-setup-macros
リアクティビティとライフサイクル	ref、shallowRef、computed、watch、watchEffect、effectScope、ライフサイクルフック、コンポーザブル	core-new-apis

機能

トピック	説明	リファレンス
組み込みコンポーネントとディレクティブ	Transition、Teleport、Suspense、KeepAlive、v-memo、カスタムディレクティブ	advanced-patterns

クイックリファレンス

コンポーネントテンプレート

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'

const props = defineProps<{
  title: string
  count?: number
}>()

const emit = defineEmits<{
  update: [value: string]
}>()

const model = defineModel<string>()

const doubled = computed(() => (props.count ?? 0) * 2)

watch(() => props.title, (newVal) => {
  console.log('Title changed:', newVal)
})

onMounted(() => {
  console.log('Component mounted')
})
</script>

<template>
  <div>{{ title }} - {{ doubled }}</div>
</template>

主要インポート

// リアクティビティ
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

// ウォッチャー
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'

// ライフサイクル
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'

// ユーティリティ
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'