Vue3 开发语法使用总结（超详细、超基础）

Vue3 开发语法使用总结（超详细、超基础）

前言

最近开源了一套后台管理模板Wocwin-Admin，是基于 Vue3.2、TypeScript、Vite4、Pinia、Element-Plus、Qiankun(微前端) 技术栈，借此归纳一下Vue3.2的新语法。

一、全局注册(属性/方法)

1、main.ts注册

import { createApp } from "vue";
import App from "./App.vue";
// 所有业务api接口
import api from "@/api";
const instance = createApp(App);
// 注册全局api方法
fig.globalProperties.$api = api;

2、.vue文件使用

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
const {  appContext } = getCurrentInstance()
const global = fig.globalProperties
// 获取所有业务api接口
console.log(global.$api)
</script>

输出结果如下：

二、获取 this

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
// proxy 就是当前组件实例，相当于Vue2单文件的this——没有全局的、路由、状态管理之类的
const { proxy, appContext } = getCurrentInstance()
// 这个 global 就是全局实例（可以获取挂载全局的方法）
const global = fig.globalProperties
</script>

三、template可存在多个根节点

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

<template><div>1</div><div>2</div><div>3</div>
</template>

四、获取 DOM

<template><el-button ref="buttonRef"></el-button>
</template>
<script setup lang="ts">
import { ref} from "vue";
// 注意：这个变量名和 DOM 上的 ref 属性必须同名，会自动形成绑定
const buttonRef= ref(null)
// 获取到 DOM
console.log(buttonRef.value)
</script>

五、解除绑定（定时器、监听之类的操作）

<script setup lang="ts">
import { onBeforeUnmount, onDeactivated } from 'vue'
// 组件卸载前
onBeforeUnmount(() => {// 清除定时器clearTimeout(timer)// 清除监听事件veAddEventListener('所监听的事件')
})
// 退出缓存组件
onDeactivated(() => {// 清除定时器clearTimeout(timer)// 清除监听事件veAddEventListener('所监听的事件')
})
</script>

六、ref 和 reactive使用

通常情况：ref 用于创建一个响应式的基本数据类型（如字符串、数字或布尔值）。它返回一个包含响应式值的对象，在script 可以通过 .value 属性访问该值,template 中直接使用。
通常情况：reactive 用于创建一个响应式的对象。它返回一个新的响应式对象，该对象与原始对象具有相同的属性和值。

<script setup lang="ts">
import { ref, reactive } from "vue"
const count = ref(1)
// 输出结果：1  注意：ref 返回的属性在 template 中直接使用，不需要再.value
console.log(count.value)const state= reactive({name: "wocwin",address: "广州市",...
})
console.log(state.name) // wocwin
</script>

七、toRef 和 toRefs使用(解决直接解构会丢失响应式)

解决直接解构会丢失响应式：这两共同点就是用来创建响应式的引用的，主要用来取出响应式对象里的属性，或者解构响应式对象，解构出来的属性值依然是响应式属性。

<script setup lang="ts">
import { reactive, toRef, toRefs } from "vue"
const state= reactive({name: "wocwin",address: "广州市",
})
// 这样能拿到 name / address，但是会变成普通变量，没有响应式效果
const { name, address} = state
// 取出来一个响应式属性
const name = toRef(state, 'name')
// 这样解构出来的所有属性都是有响应式的
const { name, address} = toRefs(state)
</script>

八、watch和 watchEffect使用

watch 是一个函数，能接收三个参数，参数一是监听的属性，参数二是接收新值和老值的回调函数，参数三是配置项
watch 是对传入的一个或多个值进行监听，触发时会返回新值和老值，且默认第一次不会执行
watchEffect 是传入一个立即执行函数，所以默认第一次就会执行，且不需要传入监听内容，会自动收集函数内的数据源作为依赖，当依赖发生变化时会重新执行函数，不会返回新值和老值。

<script setup lang="ts">
import { watch, ref, reactive,watchEffect } from "vue"
const name = ref("wocwin")
const state = reactive({address: "广州市",age: 22,children: []
})
// 监听 ref 属性
watch(name, (newName, oldName) => { ... })// 监听单个属性
watch(() => state.address, (newAddress, oldAddress) => { ... }
)
// 监听多个属性，数组放多个值，返回的新值和老值也是数组形式
watch([data.age, data.address], ([newAge, newAddress], [oldAge, oldAddress]) => { 
...
})
// 第三个参数是一个对象，为可配置项
watch(data.children, (newList, oldList) => { ... }, {// 这两个和 Vue2 一样immediate: true,deep: true,
})
// 在 watch 回调函数中能接收第三个参数 onInvalidate，为清除副作用的函数，首次触发监听的回调函数(handler)不会执行 onInvalidate，之后每次触发默认会先执行 onInvalidate
watch(name, (newName, oldName,onInvalidate) => { console.log("wocwin")onInvalidate(() => {console.log(2222)})
})
// onInvalidate 的使用场景就是：比如监听的回调函数(handler)里有一些异步操作，当再次触发 watch 的时候可以用它来对前面未完成的异步任务执行取消/重置/初始化等操作。
/**
*watchEffect
*/
watchEffect(() => {// 会自动收集这个函数使用到的属性作为依赖，进行监听// 监听的是 state.name 属性，不会监听 stateconsole.log(state.name)
})
</script>

九、computed（计算属性——是一个函数）

<script setup lang="ts">
import { computed } from "vue"
const props = defineProps({modelValue: {type: [String, Number, Array]},
})
const emits = defineEmits(['update:modelValue'])// 函数写法
const isFirst = computed(() => {
...
})// 对象写法
// vue3 v-model简写
let childSelectedValue: any = computed({get() {delValue},set(val) {emits('update:modelValue', val)}
})</script>

十、nextTick

<script setup lang="ts">
import { nextTick} from 'vue'
// 方式 一
const handleClick = async () => {await nextTick()console.log("wocwin")
}
// 方式二
nextTick(() => {console.log("wocwin")
})
// 方式三
nextTick().then(() => {console.log("wocwin")})
</script>

十一、mixins 和 hooks

Vue2 中逻辑的抽离复用一般用 mixins：但是其没有独立命名空间，mixins 会和组件内部产生命名冲突
Vue3 中逻辑抽离复用的 hooks 语法，其实就是一个函数，可以传参，拿返回值来用。

1、封装hooks(具体代码查看Wocwin-Admin)

import { storeToRefs } from "pinia";
import { Theme } from "./interface";
import { ElMessage } from "element-plus";
import { DEFAULT_PRIMARY } from "@/config";
import { useGlobalStore } from "@/store/modules/global";
import { getLightColor, getDarkColor } from "@/utils/color";
import { asideTheme, AsideThemeType } from "@/styles/theme/aside";
/*** @description 全局主题 hooks* */
export const useTheme = () => {const globalStore = useGlobalStore();const { primary, isDark, isGrey, isWeak, asideInverted, layout } = storeToRefs(globalStore);// 切换暗黑模式 ==> 并带修改主题颜色、侧边栏颜色const switchDark = () => {const body = document.documentElement as HTMLElement;if (isDark.value) body.setAttribute("class", "dark");else body.setAttribute("class", "");changePrimary(primary.value);setAsideTheme();};// 修改主题颜色const changePrimary = (val: string | null) => {if (!val) {val = DEFAULT_PRIMARY;ElMessage({ type: "success", message: `主题颜色已重置为 ${DEFAULT_PRIMARY}` });}// 计算主题颜色变化document.documentElement.style.setProperty("--el-color-primary", val);document.documentElement.style.setProperty("--el-color-primary-dark-2",isDark.value ? `${getLightColor(val, 0.2)}` : `${getDarkColor(val, 0.3)}`);for (let i = 1; i <= 9; i++) {const primaryColor = isDark.value ? `${getDarkColor(val, i / 10)}` : `${getLightColor(val, i / 10)}`;document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, primaryColor);}globalStore.setGlobalState("primary", val);};// 灰色和弱色切换const changeGreyOrWeak = (type: Theme.GreyOrWeakType, value: boolean) => {const body = document.body as HTMLElement;if (!value) veAttribute("style");const styles: Record<Theme.GreyOrWeakType, string> = {grey: "filter: grayscale(1)",weak: "filter: invert(80%)"};body.setAttribute("style", styles[type]);const propName = type === "grey" ? "isWeak" : "isGrey";globalStore.setGlobalState(propName, false);};// 设置侧边栏样式 ==> light、inverted、darkconst setAsideTheme = () => {// 默认所有侧边栏为 light 模式let type: AsideThemeType = "light";// transverse 布局下菜单栏为 inverted 模式if (layout.value == "transverse") type = "inverted";// 侧边栏反转色目前只支持在 vertical 布局模式下生效if (layout.value == "vertical" && asideInverted.value) type = "inverted";// 侧边栏 dark 模式if (isDark.value) type = "dark";const theme = asideTheme[type!];for (const [key, value] ies(theme)) {document.documentElement.style.setProperty(key, value);}};// init themeconst initTheme = () => {switchDark();if (isGrey.value) changeGreyOrWeak("grey", true);if (isWeak.value) changeGreyOrWeak("weak", true);};return {initTheme,switchDark,changePrimary,changeGreyOrWeak,setAsideTheme};
};

2、具体页面使用

<template>
<div class="theme-item"><span>主题颜色</span><el-color-picker v-model="primary" :predefine="colorList" @change="changePrimary" /></div>
</template>
<script setup lang="ts">
import { useTheme } from "@/hooks/useTheme";
const { changePrimary } = useTheme();
</script>

十二、多个 v-model

// 父组件写法
<template><child v-model:name="name" v-model:age="age" />
</template>
<script setup lang="ts">
import { ref } from "vue"
const name = ref('wocwin')
const age = ref(22)
</script>// 子组件
<script setup lang="ts">
const emit = defineEmits(['update:name', 'update:age'])const handleClick = () => {console.log('点击了')emit('update:name', '这是新的名字')
}
</script>

十三、CSS 样式穿透

<style lang="scss" scoped>
:deep(.el-form) {.el-form-item { ...}
</style>

十四、CSS 绑定 JS 变量

<template><div class="name">wocwin</div>
</template>
<script setup>
import { ref } from "vue"
const str = ref('#f00')
</script>
<style scoped lang="scss">
.name {color: v-bind(str); // JS 中的色值变量 #f00 就赋值到这来了
}
</style>

相关文章

wocwin-admin地址

wocwin-admin在线预览地址

基于ElementUi或AntdUI再次封装基础组件文档

基于Element-plus再次封装基础组件文档(vue3+ts)