前言 ： 记录个人在学习使用vue3的编码风格，对官方文档重要知识点的记录包括总结，方便后期学习翻阅。
中文版官方文档地址 ： cn.vuejs.org/guide/intro…、
一、简介
什么是Vue
Vue(发音同view)是一款用户构建用户界面的 Vue是一款用于构建用户界面的JavaScript的框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套生命式的、组件化的编程模型，帮助你高效的开发用户界面。无论是简单和复杂的界面，Vue都可以胜任。
import { createApp } from 'vue' createApp({ data() { return { count: 0 } } }).mount('#app')
<div id="app"> <button @click="count++"> Count is: {{ count }} </button> </div>
上面的实例展示了Vue的两个核心功能：
- 声明式渲染：Vue基于标准HTML拓展了一套模板语法，使得我们可以声明式地描述最终输出的HTML和JavaScripy状态之间的关系
- 相应性：Vue会自动跟踪JavaScript状态并在其发生变化时响应式更新DOM。
渐进式框架
vue是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但Web世界是十分多样化的，不同的开发者在Web上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用Vue:
- 无需构建步骤，渐进式增强静态的HTML
- 在任何页面中作为Web Components嵌入
- 单页面应用（SPA）
- 全栈/服务端渲染（SSR）
- Jamstack/静态站点生成（SSG）
- 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面
单文件组件
在大多数启用了构建工具的Vue项目中，我们可以使用一种类似HTML格式的文件来书写Vue组件，它被称为单文件组件（SFC）,顾名思义，Vue的单文件组件会讲一个组件的逻辑（JavaScript），模板（HTML）和样式（CSS）封装在同一个文件里。下面我们讲用单文件组件的格式重写上面的计数器实例：
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>
补充：单文件组件是Vue的标志性功能。
API风格
Vue的组件可以按照不同的风格书写：选项式API和组合式API
选项式API
使用选项式API，我们可以用包含多个选项的对象来描述组件的逻辑，如 data、methods、munted。想爱你想所定义的属性都会暴露在函数内部的this上，它会指向当前组件的实例。
<script>
export default {
// data() 返回的属性将会成为响应式的状态
// 并且暴露在 `this` 上
data() {
return {
count: 0
}
},
// methods 是一些用来更改状态与触发更新的函数
// 它们可以在模板中作为事件处理器绑定
methods: {
increment() {
this.count++
}
},
// 生命周期钩子会在组件生命周期的各个不同阶段被调用
// 例如这个函数就会在组件挂载完成后被调用
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
组合式API
通过组合式API，我们可以使用导入的API函数来描述组件逻辑。在单文件组件中，组合式API通常会与<script setup>搭配使用。这个setup attribute是一个标识，告诉Vue需要咋编译时进行一些处理，让我们可以更简洁地使用组合式API。比如，<script setup>中的导入和顶层变量/函数都能够在模板中直接使用。
下面是使用组合式API与<script setup>改造后和上面的模板完全一样的组件：
<script setup>
import {ref ,onMounted } from 'vue'
//响应式数据
const count = ref(0)
//用来修改状态、触发更新的函数
increment(){
count.value++
}
//生命周期钩子
onMounted(() =>{
console.log(`The initial count is ${count.value}.`)
}
))
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
二、快速上手
创建一个Vue应用
在本节中，我们将介绍如何在本地搭建Vue单页应用，创建的项目将使用基于Vite的构建设置，并允许我们使用Vue的单文件组件（SFC)。
确保你安装了最新版本的Node.js，并且你的当前工作目录是当前创建项目的目录。在命令行中运行以下命令
npm init vue@latest
这一指令将会安装并执行create-vue,它是Vue官方的项目脚手架工具。你将会看到一些诸如TypeScript和测试支持之类的可选功能提示：
如果不确定是否要开启某个功能，你可以直接按下回车键选择No。
在项目被创建后，通过以下步骤安装依赖并启动开发服务器：
> cd <your-project-name>
> npm install
> npm run dev
你现在应该已经运行起来了你的第一个Vue项目！下面是一些补充提示：
- 推荐的IDE配置是Visual Studio + Volar扩展。
通过CSN使用Vue
你可以借助script标签直接通过CSN来使用Vue：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
这里我们使用了unpkg,但你也可以使用任何提供npm包服务的CDN,例如jsdelivr或cdnjs。当然，你也可以下载此文件并自行提供服务。
通过CDN使用Vue时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的HTML或与后端框架集成。但是你无法使用单文件组件（SFC）语法。
使用全局构建版本
上面的例子使用了全局构建版本的Vue，该版本的所有顶层API都以属性的形式暴露在了全局的Vue对象上。这里有一个全局构建版本的例子：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
使用ES模块构建版本
在本文档的其余部分我们使用的主要是ES模块语法。现代浏览器大多都以原生支持ES模块。因此我们可以像这样通过CDN已经原生ES模块使用Vue：
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data(){
return {
message:"Hello Vue!"
}
}
}).mount("#app")
</script>
启用Import maps
在上面的实例中，我们使用了完整的CDN URL来导入，但在文档的其余部分中，你将看到如下代码
import {createApp} form 'vue'
我们可以使用导入映射表来告诉浏览器如何定位到导入 vue
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp } from 'vue'
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
注意： 到目前为止示例中使用的都是Vue的开发构建版本--如果你打算在生产中通过CDN使用Vue，请务必查看本节的生产部署-不使用构建工具章节
拆分模块
随着这份指南的逐步深入，我们可能需要将代码分割成单独的JavaScript文件，以便更容易管理，例如：
<div id="app" />
<script type ="module">
import { createApp } from 'vue'
import MyComponent form './my-component.js'
createApp(MyComponent).mount("app")
</script>
//my-component.js
export default {
data(){
return {count:0}
},
template:`<div>conut is {{count}}</div>`
}
补充：如果直接在浏览器中打开了上面的index.html,你会发现它抛出了一个错误，因为ES模块不能通过file://协议工作，为了使其工作，你需要使用本地HTTP服务器通过http://协议提供 index.html。
要启动一个本地的HTTP服务器，请先安装Node.js,然后通过命令行在HTML文件所在文件夹下运行 npx serve。你也可以使用其他任何可以基于正确的MIME类型服务静态文件的HTTP服务器。
二、创建一个应用
应用实例
每个Vue应用都是通过createApp 函数创建一个新的应用实例：
import {createApp} from 'vue'
const app = createApp({
//根组件选项
})
根组件
我们传入createApp的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。
如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件
import {createApp} from 'vue'
//从一个单文件组件导入根组件
import App from './App.vue'
const app = createApp(App)
挂载应用
应用实例必须在调用.mount()方法后再回渲染出来。该方法接收一个‘容器’参数，可以是一个实际的DOM元素或是一个CSS选择器字符串：
<div id="app" />
app.mount('#app')
应该根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。
.mount()方法应用应该是中国在整个应用配置和资源注册完成后被调用。同时请注意，不同屿其他资源注册方法，它的返回值是根组件实例而非应用实例。
DOM中的根组件模版
根组件的模板通常是组件本身的一部分，但也可以直接通过在挂载容器内编写模板来单独提供：
<div id="app">
<button @click="count++">{{ count }}</button>
</div>
import {createApp} from 'vue'
const app = createApp({
data(){
return {
count : 0
}
}
})
app.mount('#app')
补充：当根组件没有设置 template选项时，Vue将会自动使用容器的innerHTML作为模板。
应用配置
应用实例会暴露一个.config对象允许我们配置一些应用级的选项，列如定义一个应用级的错误处理器，用来捕捉所以子组件上的错误：
app.config.errorHandler = (err) =>{
//处理错误
}
应用实例还提供了 一些方法来注册应用范围内可以用的资源，例如注册一个组件：
app.component('TodoDeleButton',TodoDeleButton)
这使得TodoDeleButton在应用的任何地方都是可以用的
多个应用实例
应用实例并不只限于一个。createApp Api允许你在同一个页面中创建多个共存的Vue应用，而且每个应用都有自己的用于配置和全局资源的作用域。
const app1 = createApp({//...}) app1.mount('#container-1') const app2 = createApp({//...}) app2.mount('#container-2')
三、模板语法
Vue使用一种基于HTML的模板语法，使我们能够声明式将其组件实例的数组绑定到呈现的DOm上。所有的Vue模板都是语法层面合法的HTML，可以被符合规范的HTML解析。
在底层机制中，Vue会将模板编成高度优化的JAvaScript代码。结合相应式系统，当应用状态变更时，Vue能够智能地推导出需要重新渲染的最少数量，并应用最少得DOM操作。
如果使用JSX支持直接手写渲染函数而不采用模版。但请注意，这将不会享受到模板同等级别的编译时优化。
文本插值
最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法（即双大括号）：
<span>Message: {{ msg }}</span>
