一、背景
最近工作了比较忙，比较少写文章；最近做的开源项目，由于 vue-cli 和 vuex 要逐渐不维护了，因此需要对技术栈进行升级；目前所使用的最新技术栈是： vue3 + vite + element-plus + axios + pinia + mitt + echarts ；
其中：
vite 是 vue 团队最新推出的脚手架，相比 vue-cli 来说速度更快，依赖更少； element-plus 则是适配于 vue3 和 vite 的 UI 框架； pinia 是 vuex 的替代版本，它取消了 mutations ，语法上比原来的 vuex 更加简洁； mitt 主要用来做 EventBus 的功能，因为 vue3 取消了 this 指针，所以很多插件都是需要手动导入的，下文会介绍。本文主要记录在代码重构过程中对 vue3 新语法特性的学习使用，并且使用的是 setup 语法糖的语法特性。
二、vue3语法的使用
2.1. 父子通信props
子组件：
<script setup>
// 父传子
defineProps({
value: {
type: Number,
default: 1
}
})
// 子传父
const emit = defineEmits(['change', 'setValue'])
// 模板绑定的监听函数
function changeValue(val) {
emit('change', val)
}
function changeSet(val) {
emit('setValue', val)
}
</script>
父组件：
// 父组件的使用方法和vue2相同 <child :value="value" @change="change" @setValue="setValue"></child>
2.2. EventBus
注意：需要自行安装 mitt
npm i mitt
mian.js 文件
// main.js import mitt from 'mitt' app.config.globalProperties.mittBus = new mitt()
组件中使用
<script setup>
import { getCurrentInstance } from "@vue/runtime-core"
const $bus = getCurrentInstance().appContext.config.globalProperties.$bus
$bus.$emit('change', value)
$bus.$on('change', (val) => {
console.log(val)
})
</script>
2.3. 计算属性computed
由于 vue3 中没有 this 指针，因此使用计算属性需要自己自行导入
<script setup>
import { computed } from '@vue/runtime-core'
const value = computed(() => {
return 1 + 1
})
</script>
2.4. pinia状态管理器的使用
2.4.1. 模块化
在安装 pinia 后，在目录 stores 下新建 index.js 文件，作为模块化的入口文件。
index.js 文件
// 引入模块文件
import aside from './aside'
import header from './header'
import menuState from './menuState'
import tags from './tags'
export default function stores() {
return {
aside: aside(),
header: header(),
menuState: menuState(),
tags: tags()
}
}
在同目录下新建模块文件，如 menuState 文件：
// menuState
import { defineStore } from "pinia"
export default defineStore('menuState', {
state() {
return {
showRightMenu: false,
left: 0,
top: 0,
rightMenuList: []
}
},
actions: {
changeShowRightMenu(val) {
this.showRightMenu = val
},
changeLeft(val) {
this.left = val
},
changeTop(val) {
this.top = val
},
changeRightMenuList(val) {
this.rightMenuList = val
}
}
})
2.4.2. 使用方法
pinia 的使用方法比较简便，在组件中导入后，模块可以直接引用，也可以使用计算属性使用；同时， actions 中的方法也可以直接调用，无需使用以往的 mapState 等方式。如下所示：
<script setup>
import stores from '@/stores/index'
import { computed } from '@vue/runtime-core'
// 解构出menuState
const { menuState } from stores()
// 使用计算属性获取status
const showRightMenu = computed(() => {
return menuState.showRightMenu
})
// 调用方法，可直接调用
menuState.changeLeft(12)
</script>
<template>
<!-- 也可以直接在模板中使用 -->
<div>
{{menuState.top}}
</div>
</template>
2.5. watch监听器
watch 监听器的使用比较简单，并不需要导入，直接使用即可。
<script setup>
// dataSources是被监听的变量
watch(() => dataSources, () => {
console.log(dataSources)
})
</script>
2.6. 全局函数/变量注册
细心的读者可能发现了， mitt 就是一个全局注册的一个函数；同理，我们在定义一些全局函数或者变量时，也是使用这种方法。
// main.js
// 注册element-plus的一个消息提示
import { ElMessage } from 'element-plus'
app.config.globalProperties.$message.success = () => {
ElMessage({
message: "OK",
type: 'success'
})
}
组件中使用：
<script setup>
import { getCurrentInstance } from "@vue/runtime-core";
const $message.success = getCurrentInstance().appContext.config.globalProperties.$message.success
$message.success()
</script>
三、总结
本文主要是记录 vue3 的 setup 语法糖的各种新语法的使用方法，之后有空再写篇不使用 setup 语法糖的语法使用。
到此这篇关于vue3 setup语法糖各种语法新特性的使用(vue3+vite+pinia)的文章就介绍到这了,更多相关vue3 setup语法糖内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
查看更多关于vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)的详细内容...