外观
介绍
什么是Vue？
Vue（发音为/vjuː/，类似于视图）是一个用于构建用户界面的JavaScript框架。它建立在标准的HTML、CSS和JavaScript之上，提供了一种声明式、基于组件的编程模型，帮助您高效地开发任何复杂度的用户界面。
以下是一个最小示例
js
import { createApp, ref } from 'vue'
createApp({
setup() {
return {
count: ref(0)
}
}
}).mount('#app')template
<div id="app">
<button @click="count++">
Count is: {{ count }}
</button>
</div>结果
上述示例演示了Vue的两个核心特性
声明式渲染：Vue通过扩展标准的HTML，使用模板语法，允许我们根据JavaScript状态声明性地描述HTML输出。
响应性：Vue会自动跟踪JavaScript状态变化，并在状态变化时高效地更新DOM。
您可能已经有一些疑问 - 不要担心。我们将在接下来的文档中涵盖每一个细节。现在，请继续阅读，以便您对Vue能提供什么有一个高层次的理解。
先决条件
本文档的其余部分假设您对HTML、CSS和JavaScript有基本的了解。如果您是前端开发的初学者，直接从框架开始可能不是最佳选择——先掌握基础知识，然后再回来！如果需要，您可以通过以下概述来检查您的知识水平：[JavaScript](https://mdn.org.cn/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)、[HTML](https://mdn.org.cn/en-US/docs/Learn/HTML/Introduction_to_HTML) 和 [CSS](https://mdn.org.cn/en-US/docs/Learn/CSS/First_steps)。在其他框架方面的经验有帮助，但不是必需的。
渐进式框架
Vue是一个框架和生态系统，涵盖了前端开发所需的大部分常见功能。但网络极其多样化——我们在网络上构建的东西在形式和规模上可能会有很大的差异。考虑到这一点，Vue被设计成灵活的，可以逐步采用。根据您的用例，Vue可以用不同的方式使用
- 无需构建步骤增强静态HTML
- 嵌入为Web组件到任何页面
- 单页应用程序（SPA）
- 全栈/服务器端渲染（SSR）
- 静态站点生成（SSG）
- 针对桌面、移动、WebGL甚至终端
如果您觉得这些概念令人害怕，请不要担心！教程和指南只需要基本的HTML和JavaScript知识，您应该能够在不是这些领域的专家的情况下跟上。
如果您是一位有经验的开发者，对如何将Vue最佳地集成到您的堆栈中感兴趣，或者您对这些术语的含义感到好奇，我们在[使用Vue的方式](/guide/extras/ways-of-using-vue)中进行了更详细的讨论。
尽管具有灵活性，但关于Vue如何工作的核心知识在所有这些用例中都是通用的。即使您现在只是一个初学者，您在旅途中获得的知识将随着您成长并应对未来的更具雄心的目标而保持有用。如果您是一位老手，您可以根据您试图解决的问题选择最佳的Vue利用方式，同时保持相同的生产力。这就是我们为什么称Vue为“渐进式框架”：它是一个可以与您一起成长并适应您需求的框架。
单文件组件
在大多数启用构建工具的Vue项目中，我们使用类似于HTML的文件格式来编写Vue组件，称为“单文件组件”（也称为*.vue文件，简称SFC）。Vue SFC，正如其名称所示，将组件的逻辑（JavaScript）、模板（HTML）和样式（CSS）封装在单个文件中。以下是一个用SFC格式编写的先前的示例
vue
<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是Vue的一个定义性特征，如果您的情况需要构建设置，它是编写Vue组件的推荐方式。您可以在其专门的章节中了解更多关于SFC的如何和为什么 - 但现在，只需知道Vue将为您处理所有的构建工具设置。
API样式
Vue组件可以用两种不同的API样式来编写：选项API和组合API。
选项API
使用选项API，我们使用诸如data、methods和mounted等选项对象来定义组件的逻辑。选项定义的属性在函数内的this上暴露，它指向组件实例
vue
<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>组合API
使用组合式API，我们通过导入的API函数定义组件的逻辑。在SFC中，组合式API通常与<script setup>一起使用。`setup`属性是一个提示，使得Vue在编译时进行转换，让我们能够以更少的样板代码使用组合式API。例如，在`<script setup>`中声明的导入和顶级变量/函数可以直接在模板中使用。
这是一个相同的组件，具有完全相同的模板，但使用了组合式API和`<script setup>`。
vue
<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>如何选择？
这两种API风格都能够全面覆盖常见的用例。它们是两种由相同底层系统支持的不同接口。事实上，选项API是在组合式API之上实现的！两种风格的基本概念和Vue的知识是共通的。
选项API围绕“组件实例”的概念（如在示例中看到的`this`），这对于来自面向对象语言背景的用户来说通常与基于类的思维模型更吻合。它也更易于入门，通过抽象反应性细节并通过选项组强制执行代码组织。
组合式API围绕在函数作用域中直接声明反应性状态变量，并将多个函数组合起来以处理复杂性。它更灵活，需要理解Vue中反应性的工作原理才能有效使用。作为交换，其灵活性使得组织和使用逻辑的强大模式成为可能。
您可以在组合式API FAQ中了解更多关于两种风格之间的比较以及组合式API的潜在好处。
如果您是Vue的新手，以下是我们的一般建议
出于学习目的，选择您更容易理解的风格。再次强调，两个风格之间的核心概念大多是共享的。您以后总是可以选择另一种风格。
对于生产使用
如果您不使用构建工具，或者计划在低复杂性场景中主要使用Vue，请使用选项API，例如渐进式增强。
如果您计划使用Vue构建完整的应用程序，请使用组合式API + 单文件组件。
在学习阶段，您不必只承诺使用一种风格。其余的文档将在适用的情况下提供两种风格的代码示例，并且您可以通过左侧侧边栏顶部的API偏好开关在任何时候在这两种风格之间切换。
还有其他问题吗？
查看我们的FAQ。
选择您的学习路径
不同的开发者有不同的学习风格。请随意选择一个符合您偏好的学习路径——尽管我们建议如果可能的话，最好全面了解所有内容！