项目由 Vue2 升级到 Vue3 了,本文包含了 Vue3 项目开发中使用的所有语法,希望所有像他一样还不熟的伙伴快速上手 Vue3 项目开发.
开发文档
获取 this
Vue2 中每个组件里使用 this 都指向当前组件实例,this 上还包含了全局挂载的东西、路由、状态管理等啥啥都有
而 Vue3 组合式 API 中没有 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 getData = () => {
xxxApi.then(() => {
... })
}
onMounted(() => {
getData()
})
</script>
解除绑定
Vue2 中一般清除定时器、监听之类的操作有两种方法:
- 一是用$once 搭配 hook: BeforeDestroy 使用,这个 Vue3 不支持了
- 二是用 beforeDestroy / deactivated 这俩钩子,Vue3 中只是把钩子函数重命名了一下
<script setup>
import {
onBeforeUnmount, onDeactivated } from 'vue'
// 组件卸载前,对应 Vue2 的 beforeDestroy
onBeforeUnmount(() => {
clearTimeout(timer)
window.