vue
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseVue.js
Vue.js
Vue is a progressive framework for building user interfaces. Vue 3.5 (2025) solidifies the Composition API and introduces "Vapor Mode" for solid-js like performance.
Vue 是一款用于构建用户界面的渐进式框架。Vue 3.5（2025版）巩固了Composition API的地位，并引入了“Vapor Mode”，可实现类似solid-js的性能表现。
When to Use
适用场景
- Progressive Adoption: Drop it into an existing HTML page or build a full SPA.
- Developer Experience: Often cited as having the best balance of simplicity and power.
- Performance: With Vapor Mode, it rivals the fastest signals-based frameworks.
- 渐进式接入：可直接嵌入现有HTML页面，也可用于构建完整的单页应用（SPA）。
- 开发者体验：被广泛认为在简洁性与功能性之间实现了最佳平衡。
- 性能表现：借助Vapor Mode，其性能可与最快的基于信号（Signals）的框架相媲美。
Quick Start (Composition API)
快速上手（Composition API）
vue
<script setup>
import { ref, computed } from "vue";
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() {
count.value++;
}
</script>
<template>
<button @click="increment">
Count is: {{ count }}, Double is: {{ double }}
</button>
</template>vue
<script setup>
import { ref, computed } from "vue";
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() {
count.value++;
}
</script>
<template>
<button @click="increment">
Count is: {{ count }}, Double is: {{ double }}
</button>
</template>Core Concepts
核心概念
Composition API (<script setup>
)
<script setup>Composition API (<script setup>
)
<script setup>The standard way to write Vue components. It groups logic by feature, not by option type (data, methods, mounted).
这是编写Vue组件的标准方式。它按功能而非选项类型（data、methods、mounted）来组织逻辑。
Reactivity System (Signals)
响应式系统（Signals）
Vue's reactivity is based on proxies. and allow fine-grained dependency tracking.
ref()reactive()Vue的响应式基于代理实现。和支持细粒度的依赖追踪。
ref()reactive()Vapor Mode (Opt-in)
Vapor Mode（可选启用）
A compilation strategy that compiles Vue components into highly efficient JavaScript that modifies the DOM directly (no Virtual DOM).
一种编译策略，可将Vue组件编译为高效的JavaScript代码，直接操作DOM（无需虚拟DOM）。
Best Practices (2025)
最佳实践（2025版）
Do:
- Use : It is less verbose and provides better TypeScript support.
<script setup> - Use : The new standard for two-way binding props (Vue 3.4+).
defineModel - Use Composables: Extract logic into reusable functions (Vue's version of Hooks).
useFeature()
Don't:
- Don't mix Options and Composition API: Stick to Composition API for new projects.
- Don't destructure : You lose reactivity (unless using
propsor Vue 3.5 reactive destructuring).toRefs
建议：
- 使用：语法更简洁，且提供更好的TypeScript支持。
<script setup> - 使用：这是Vue 3.4+中实现双向绑定props的新标准。
defineModel - 使用Composables：将逻辑提取为可复用的函数（Vue版的Hooks）。
useFeature()
避免：
- 不要混合Options API与Composition API：新项目应坚持使用Composition API。
- 不要解构：会丢失响应式（除非使用
props或Vue 3.5的响应式解构功能）。toRefs