Vue

基于 Vue 3.5。始终使用 <script setup lang="ts">。

偏好

• 优先使用 TypeScript 而非 JavaScript
• 优先使用 <script setup lang="ts"> 而非 <script>
• 为性能考虑，如不需要深层响应式，优先使用 shallowRef 而非 ref
• 始终使用组合式 API 而非选项式 API
• 不鼓励使用响应式 Props 解构

核心

特性

快速参考

组件模板

<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'