Introduction ​  介绍

Learn Vue with video tutorials on VueMastery.com
通过 VueMastery.com 上的视频教程学习 Vue

What is Vue?   什么是 Vue？​

Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative, component-based programming model that helps you efficiently develop user interfaces of any complexity.
Vue（发音为 /vjuː/，类似于 view）是一个用于构建用户界面的 JavaScript 框架。它构建在标准 HTML、CSS 和 JavaScript 之上，并提供基于组件的声明性编程模型，帮助您高效开发任何复杂的用户界面。

Here is a minimal example:
下面是一个最小示例：

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

Result  结果

The above example demonstrates the two core features of Vue:
上面的例子演示了 Vue 的两个核心特性：

• Declarative Rendering: Vue extends standard HTML with a template syntax that allows us to declaratively describe HTML output based on JavaScript state.
  声明式渲染 ：Vue 使用模板语法扩展了标准 HTML，允许我们根据 JavaScript 状态声明式描述 HTML 输出。

• Reactivity: Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.
  响应性 ：Vue 会自动跟踪 JavaScript 状态变化，并在变化发生时有效地更新 DOM。

You may already have questions - don't worry. We will cover every little detail in the rest of the documentation. For now, please read along so you can have a high-level understanding of what Vue offers.
您可能已经有疑问 - 别担心。我们将在文档的其余部分介绍每一个小细节。现在，请继续阅读，以便对 Vue 提供的功能有一个高层次的了解。

The Progressive Framework
进步框架​

Vue is a framework and ecosystem that covers most of the common features needed in frontend development. But the web is extremely diverse - the things we build on the web may vary drastically in form and scale. With that in mind, Vue is designed to be flexible and incrementally adoptable. Depending on your use case, Vue can be used in different ways:
Vue 是一个框架和生态系统，涵盖了前端开发所需的大多数常见功能。但 Web 是极其多样化的 - 我们在 Web 上构建的东西在形式和规模上可能会有很大差异。考虑到这一点，Vue 被设计为灵活且可逐步采用。根据你的用例，Vue 可以以不同的方式使用：

• Enhancing static HTML without a build step
  在没有构建步骤的情况下增强静态 HTML
• Embedding as Web Components on any page
  作为 Web Components 嵌入到任何页面上
• Single-Page Application (SPA)
  单页应用程序 （SPA）
• Fullstack / Server-Side Rendering (SSR)
  全栈/服务器端渲染 （SSR）
• Jamstack / Static Site Generation (SSG)
  Jamstack / 静态站点生成 （SSG）
• Targeting desktop, mobile, WebGL, and even the terminal
  面向桌面、移动设备、WebGL 甚至终端

If you find these concepts intimidating, don't worry! The tutorial and guide only require basic HTML and JavaScript knowledge, and you should be able to follow along without being an expert in any of these.
如果您觉得这些概念令人生畏，请不要担心！本教程和指南只需要基本的 HTML 和 JavaScript 知识，您应该能够在不成为任何这些方面的专家的情况下跟上。

If you are an experienced developer interested in how to best integrate Vue into your stack, or you are curious about what these terms mean, we discuss them in more detail in Ways of Using Vue.
如果你是一位经验丰富的开发人员，对如何最好地将 Vue 集成到你的堆栈中感兴趣，或者你对这些术语的含义感到好奇，我们在 Vue 的使用方式 中更详细地讨论了它们。

Despite the flexibility, the core knowledge about how Vue works is shared across all these use cases. Even if you are just a beginner now, the knowledge gained along the way will stay useful as you grow to tackle more ambitious goals in the future. If you are a veteran, you can pick the optimal way to leverage Vue based on the problems you are trying to solve, while retaining the same productivity. This is why we call Vue "The Progressive Framework": it's a framework that can grow with you and adapt to your needs.
尽管具有灵活性，但关于 Vue 工作原理的核心知识在所有这些用例中都是共享的。即使您现在只是一个初学者，随着您成长为未来实现更雄心勃勃的目标，一路上获得的知识仍然有用。如果你是一名资深人士，你可以根据你试图解决的问题选择最佳方式来利用 Vue，同时保持相同的生产力。这就是为什么我们将 Vue 称为 “渐进式框架”：它是一个可以与您一起成长并适应您的需求的框架。

Single-File Components   单文件组件​

In most build-tool-enabled Vue projects, we author Vue components using an HTML-like file format called Single-File Component (also known as *.vue files, abbreviated as SFC). A Vue SFC, as the name suggests, encapsulates the component's logic (JavaScript), template (HTML), and styles (CSS) in a single file. Here's the previous example, written in SFC format:
在大多数支持构建工具的 Vue 项目中，我们使用一种类似 HTML 的文件格式编写 Vue 组件，称为单文件组件 （也称为 *.vue 文件，缩写为 SFC）。Vue SFC，顾名思义，将组件的逻辑 （JavaScript）、模板 （HTML） 和样式 （CSS） 封装在一个文件中。下面是前面的示例，以 SFC 格式编写：

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

SFC is a defining feature of Vue and is the recommended way to author Vue components if your use case warrants a build setup. You can learn more about the how and why of SFC in its dedicated section - but for now, just know that Vue will handle all the build tools setup for you.
SFC 是 Vue 的一个定义功能， 如果你的用例需要构建设置，它是编写 Vue 组件的推荐方法。你可以在 SFC 的专门部分了解更多关于 SFC 的方式和原因 - 但现在，只要知道 Vue 会为你处理所有的构建工具设置。

API Styles   API 样式​

Vue components can be authored in two different API styles: Options API and Composition API.
Vue 组件可以用两种不同的 API 风格编写： 选项 API 和组合式 API。

Options API   选项 API​

With Options API, we define a component's logic using an object of options such as data, methods, and mounted. Properties defined by options are exposed on this inside functions, which points to the component instance:
使用选项 API，我们使用选项对象（如 data、methods 和 mounted）来定义组件的逻辑。由 options 定义的属性在 this 内部函数上公开，它指向组件实例：

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event handlers in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Try it in the Playground
在 Playground 中试用

Composition API   组合式 API​

With Composition API, we define a component's logic using imported API functions. In SFCs, Composition API is typically used with <script setup>. The setup attribute is a hint that makes Vue perform compile-time transforms that allow us to use Composition API with less boilerplate. For example, imports and top-level variables / functions declared in <script setup> are directly usable in the template.
使用组合式 API，我们使用导入的 API 函数定义组件的逻辑。在 SFC 中，组合式 API 通常与 <script setup> 一起使用。setup 属性是一个提示，它使 Vue 执行编译时转换，允许我们使用更少的样板组合式 API。例如，在 <script setup> 中声明的导入和顶级变量/函数可直接在模板中使用。

Here is the same component, with the exact same template, but using Composition API and <script setup> instead:
这是相同的组件，具有完全相同的模板，但使用合成 API 和 <script setup>：

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Try it in the Playground
在 Playground 中试用

Which to Choose?   选择哪个？​

Both API styles are fully capable of covering common use cases. They are different interfaces powered by the exact same underlying system. In fact, the Options API is implemented on top of the Composition API! The fundamental concepts and knowledge about Vue are shared across the two styles.
这两种 API 样式都完全能够涵盖常见用例。它们是由完全相同的底层系统提供支持的不同接口。事实上，选项 API 是在组合式 API 之上实现的！关于 Vue 的基本概念和知识在两种风格中是共享的。

The Options API is centered around the concept of a "component instance" (this as seen in the example), which typically aligns better with a class-based mental model for users coming from OOP language backgrounds. It is also more beginner-friendly by abstracting away the reactivity details and enforcing code organization via option groups.
选项 API 以 “组件实例” 的概念为中心（如示例中所示），对于来自 OOP 语言背景的用户，它通常更符合基于类的心智模型。通过抽象出响应性细节并通过选项组强制代码组织，它也对初学者更加友好。

The Composition API is centered around declaring reactive state variables directly in a function scope and composing state from multiple functions together to handle complexity. It is more free-form and requires an understanding of how reactivity works in Vue to be used effectively. In return, its flexibility enables more powerful patterns for organizing and reusing logic.
组合式 API 的核心是直接在函数范围内声明响应式状态变量，并将多个函数的状态组合在一起以处理复杂性。它的形式更加自由，需要了解响应式在 Vue 中是如何工作的才能有效地使用。作为回报，它的灵活性为组织和重用 logic 提供了更强大的模式。

You can learn more about the comparison between the two styles and the potential benefits of Composition API in the Composition API FAQ.
您可以在组合 API 常见问题解答中详细了解这两种样式之间的比较以及组合 API 的潜在优势。

If you are new to Vue, here's our general recommendation:
如果你是 Vue 的新手，以下是我们的一般建议：

• For learning purposes, go with the style that looks easier to understand to you. Again, most of the core concepts are shared between the two styles. You can always pick up the other style later.
  出于学习目的，请选择您看起来更容易理解的样式。同样，大多数核心概念在两种样式之间是共享的。您以后可以随时选择其他样式。

• For production use:  用于生产用途：

  • Go with Options API if you are not using build tools, or plan to use Vue primarily in low-complexity scenarios, e.g. progressive enhancement.
    如果你不使用构建工具，或者计划主要在低复杂度的场景中使用 Vue，例如渐进式增强，请选择 Options API。

  • Go with Composition API + Single-File Components if you plan to build full applications with Vue.
    如果你打算使用 Vue 构建完整的应用程序，请选择组合式 API + 单文件组件。

You don't have to commit to only one style during the learning phase. The rest of the documentation will provide code samples in both styles where applicable, and you can toggle between them at any time using the API Preference switches at the top of the left sidebar.
在学习阶段，您不必只承诺一种样式。文档的其余部分将在适用的情况下提供两种样式的代码示例，您可以随时使用左侧边栏顶部的 API 首选项开关在它们之间切换。

Still Got Questions?   仍有疑问？​

Check out our FAQ.
查看我们的常见问题解答 。

Pick Your Learning Path   选择您的学习路径​

Different developers have different learning styles. Feel free to pick a learning path that suits your preference - although we do recommend going over all of the content, if possible!
不同的开发人员有不同的学习风格。请随意选择适合您偏好的学习路径 - 尽管如果可能，我们建议您仔细阅读所有内容！