[保姆级] Vue3 开发文档

最近一个粉丝公司项目由 Vue2 升级到 Vue3 了，他一下子不适应，有好多不会用的，所以我就写了这篇开发文档，包含了 Vue3 项目开发中使用的所有语法，希望所有像他一样还不熟的伙伴快速上手 Vue3 项目开发

 

本文所有语法为 Vue 3.2.41 版本，如果是3.0到3.2以内的版本个别地方可能会有些许不一样，但绝大部分都是一样的

开发文档

获取 this

Vue2 中每个组件里使用 this 都指向当前组件实例，this 上还包含了全局挂载的东西、路由、状态管理等啥啥都有

而 Vue3 中没有 this，如果想要类似的用法，有两种，一是获取当前组件实例，二是获取全局实例，如下自己可以去打印出来看看

<script setup>
import { getCurrentInstance } from 'vue'

// proxy 就是当前组件实例，可以理解为组件级别的 this，没有全局的、路由、状态管理之类的
const { proxy, appContext } = getCurrentInstance()

// 这个 global 就是全局实例
const global = appContext.config.globalProperties
</script>
复制代码

全局注册(属性/方法)

Vue2 中我们要往全局上挂载东西通常就是如下，然后在所有组件里都可以通过 this.xxx 获取到了

Vue.prototype.xxx = xxx
复制代码

而 Vue3 中不能这么写了，换成了一个能被所有组件访问到的全局对象，就是上面说的全局实例的那个对象，比如在 main.js 中做全局注册

// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 添加全局属性
app.config.globalProperties.name = '沐华'
复制代码

在其他组件中调用

<script setup>
import { getCurrentInstance } from 'vue'
const { appContext } = getCurrentInstance()

const global = appContext.config.globalProperties
console.log(global.name) // 沐华
</script>
复制代码

template

Vue2 中只能有一个根节点，而 Vue3 中支持多个根节点，这个大家都知道

其实本质上 Vue3 每个组件还是一个根节点，因为 DOM 树只能是树状结构的，只是 Vue3 在编译阶段新增了判断，如果当前组件不只一个根元素，就添加一个 fragment 组件把这个多根组件的给包起来，相当于这个组件还是只有一个根节点。而 fragment 跟 keep-alive 一样是一个不会被渲染出来的内置组件

<template>
    <div>1</div>
    <div>2</div>
</template>
复制代码

获取 DOM

Vue3 中获取 DOM 如下

<template>
    <el-form ref="formRef"></el-form>
    <child-component />
</template>
<script setup lang="ts">
import ChildComponent from './child.vue'
import { getCurrentInstance } from 'vue'
import { ElForm } from 'element-plus'

// 方法一，这个变量名和 DOM 上的 ref 属性必须同名，会自动形成绑定
const formRef = ref(null)
console.log(formRef.value) // 这就获取到 DOM 了

// 方法二
const { proxy } = getCurrentInstance()
proxy.$refs.formRef.validate((valid) => { ... })

// 方法三，比如在 ts 里，可以直接获取到组件类型
// 可以这样获取子组件
const formRef = ref<InstanceType<typeof ChildComponent>>()
// 也可以这样 获取 element ui 的组件类型
const formRef = ref<InstanceType<typeof ElForm>>()
formRef.value?.validate((valid) => { ... })
</script>
复制代码

初始化

Vue2 中进入页面就请求接口，或者其他一些初始化的操作，一般放在 created 或 mounted，而 Vue3 中 beforeCreated 和 created 这俩钩子就不用了，因为 setup 在这俩之前执行，还要这俩的话就多此一举了

所以以前用在 beforeCreated / created / beforeMount / mounted 这几个钩子里的内容，在 Vue3 中可以直接放在 setup 里，或者放在 onMounted/onBeforeMount 里

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

// 请求接口函数
const getDat