vue3?setup語法糖各種語法新特性的使用方法(vue3+vite+pinia)
更新時(shí)間：2022年09月27日 10:22:24 作者：wuchus
這篇文章主要介紹了vue3?setup語法糖各種語法新特性的使用(vue3+vite+pinia),本文主要是記錄vue3的setup語法糖的各種新語法的使用方法,需要的朋友可以參考下
一、背景
最近工作了比較忙，比較少寫文章；最近做的開源項(xiàng)目，由于vue-cli和vuex要逐漸不維護(hù)了，因此需要對技術(shù)棧進(jìn)行升級；目前所使用的最新技術(shù)棧是：vue3 + vite + element-plus + axios + pinia + mitt + echarts；
其中：
vite是vue團(tuán)隊(duì)最新推出的腳手架，相比vue-cli來說速度更快，依賴更少；element-plus則是適配于vue3和vite的UI框架；pinia是vuex的替代版本，它取消了mutations，語法上比原來的vuex更加簡潔；mitt主要用來做EventBus的功能，因?yàn)?code>vue3取消了this指針，所以很多插件都是需要手動導(dǎo)入的，下文會介紹。
本文主要記錄在代碼重構(gòu)過程中對vue3新語法特性的學(xué)習(xí)使用，并且使用的是setup語法糖的語法特性。
二、vue3語法的使用
2.1. 父子通信props
子組件：
<script setup>
// 父傳子
defineProps({
value: {
type: Number,
default: 1
}
})
// 子傳父
const emit = defineEmits(['change', 'setValue'])
// 模板綁定的監(jiān)聽函數(shù)
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. 計(jì)算屬性computed
由于vue3中沒有this指針，因此使用計(jì)算屬性需要自己自行導(dǎo)入
<script setup>
import { computed } from '@vue/runtime-core'
const value = computed(() => {
return 1 + 1
})
</script>
2.4. pinia狀態(tài)管理器的使用
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的使用方法比較簡便，在組件中導(dǎo)入后，模塊可以直接引用，也可以使用計(jì)算屬性使用；同時(shí)，actions中的方法也可以直接調(diào)用，無需使用以往的mapState等方式。如下所示：
<script setup>
import stores from '@/stores/index'
import { computed } from '@vue/runtime-core'
// 解構(gòu)出menuState
const { menuState } from stores()
// 使用計(jì)算屬性獲取status
const showRightMenu = computed(() => {
return menuState.showRightMenu
})
// 調(diào)用方法，可直接調(diào)用
menuState.changeLeft(12)
</script>
<template>
<!-- 也可以直接在模板中使用 -->
<div>
{{menuState.top}}
</div>
</template>
2.5. watch監(jiān)聽器
watch監(jiān)聽器的使用比較簡單，并不需要導(dǎo)入，直接使用即可。
<script setup>
// dataSources是被監(jiān)聽的變量
watch(() => dataSources, () => {
console.log(dataSources)
})
</script>
2.6. 全局函數(shù)/變量注冊
細(xì)心的讀者可能發(fā)現(xiàn)了，mitt就是一個(gè)全局注冊的一個(gè)函數(shù)；同理，我們在定義一些全局函數(shù)或者變量時(shí)，也是使用這種方法。
// main.js
// 注冊element-plus的一個(gè)消息提示
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>
三、總結(jié)
本文主要是記錄vue3的setup語法糖的各種新語法的使用方法，之后有空再寫篇不使用setup語法糖的語法使用。
到此這篇關(guān)于vue3 setup語法糖各種語法新特性的使用(vue3+vite+pinia)的文章就介紹到這了,更多相關(guān)vue3 setup語法糖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue環(huán)境搭建簡單教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue前端實(shí)現(xiàn)導(dǎo)出頁面為pdf(分頁導(dǎo)出、不分頁導(dǎo)出及分模塊導(dǎo)出)
在實(shí)際應(yīng)用中可能用戶希望將系統(tǒng)中一個(gè)頁面展示的所有數(shù)據(jù)報(bào)表,用PDF的文件格式下載下來,以便于其他用途,這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)導(dǎo)出頁面為pdf(分頁導(dǎo)出、不分頁導(dǎo)出及分模塊導(dǎo)出)的相關(guān)資料,需要的朋友可以參考下2024-06-06
本篇文章主要介紹了vue-router 學(xué)習(xí)快速入門，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
vue父組件數(shù)據(jù)更新子組件相關(guān)內(nèi)容未改變問題(用watch解決)
這篇文章主要介紹了vue父組件數(shù)據(jù)更新子組件相關(guān)內(nèi)容未改變問題(用watch解決)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue中的項(xiàng)目打包及部署全流程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
超詳細(xì)教程實(shí)現(xiàn)Vue底部導(dǎo)航欄TabBar
本文詳細(xì)講解了Vue實(shí)現(xiàn)TabBar底部導(dǎo)航欄的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
本文主要介紹了vue獲取el-form的整體驗(yàn)證狀態(tài)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了針對Vue路由history模式下Nginx后臺配置操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
從 vue2 升級到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的選項(xiàng)式API。這篇文章主要介紹了vue3 setup() 高級用法,需要的朋友可以參考下2021-11-11
Vue3+vite實(shí)現(xiàn)使用svg可改變顏色的全過程
Vue3 + Vite 使用 SVG 的方法主要是為了引入和利用圖標(biāo)庫、自定義組件以及通過插件簡化項(xiàng)目構(gòu)建過程,這篇文章給大家介紹了Vue3+vite實(shí)現(xiàn)使用svg可改變顏色的全過程,需要的朋友可以參考下2024-07-07