vue

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Vue

Based on Vue 3.5. Always use Composition API with
<script setup lang="ts">
.

基于Vue 3.5版本。请始终结合
<script setup lang="ts">
使用Composition API。

Preferences

偏好设置

Prefer TypeScript over JavaScript
Prefer
```
<script setup lang="ts">
```
over
```
<script>
```
For performance, prefer
```
shallowRef
```
over
```
ref
```
if deep reactivity is not needed
Always use Composition API over Options API
Discourage using Reactive Props Destructure

优先使用TypeScript而非JavaScript
优先使用
```
<script setup lang="ts">
```
而非
```
<script>
```
出于性能考虑，若不需要深度响应式，优先使用
```
shallowRef
```
而非
```
ref
```
始终优先使用Composition API而非Options API
不建议使用响应式属性解构

Core

核心内容

Topic	Description	Reference
Script Setup & Macros	`<script setup>` , defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics	script-setup-macros
Reactivity & Lifecycle	ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables	core-new-apis

主题	说明	参考链接
Script Setup & 宏	`<script setup>` 、defineProps、defineEmits、defineModel、defineExpose、defineOptions、defineSlots、泛型	script-setup-macros
响应式与生命周期	ref、shallowRef、computed、watch、watchEffect、effectScope、生命周期钩子、组合式函数	core-new-apis

Features

功能特性

Topic	Description	Reference
Built-in Components & Directives	Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives	advanced-patterns

主题	说明	参考链接
内置组件与指令	Transition、Teleport、Suspense、KeepAlive、v-memo、自定义指令	advanced-patterns

Quick Reference

快速参考

Component Template

组件模板

vue

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

vue

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

Key Imports

关键导入

// Reactivity
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

// Watchers
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'

// Lifecycle
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'

// Utilities
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'

// Reactivity
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

// Watchers
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'

// Lifecycle
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'

// Utilities
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'