vue3?setup語法糖各種語法新特性的使用方法(vue3+vite+pinia)
更新時間：2022年09月27日 10:22:24 作者：wuchus
這篇文章主要介紹了vue3?setup語法糖各種語法新特性的使用(vue3+vite+pinia),本文主要是記錄vue3的setup語法糖的各種新語法的使用方法,需要的朋友可以參考下
一、背景
最近工作了比較忙，比較少寫文章；最近做的開源項目，由于vue-cli和vuex要逐漸不維護了，因此需要對技術(shù)棧進行升級；目前所使用的最新技術(shù)棧是：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指針，所以很多插件都是需要手動導(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. 計算屬性computed
由于vue3中沒有this指針，因此使用計算屬性需要自己自行導(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)入后，模塊可以直接引用，也可以使用計算屬性使用；同時，actions中的方法也可以直接調(diào)用，無需使用以往的mapState等方式。如下所示：
<script setup>
import stores from '@/stores/index'
import { computed } from '@vue/runtime-core'
// 解構(gòu)出menuState
const { menuState } from stores()
// 使用計算屬性獲取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ù)/變量注冊
細心的讀者可能發(fā)現(xiàn)了，mitt就是一個全局注冊的一個函數(shù)；同理，我們在定義一些全局函數(shù)或者變量時，也是使用這種方法。
// 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>
三、總結(jié)
本文主要是記錄vue3的setup語法糖的各種新語法的使用方法，之后有空再寫篇不使用setup語法糖的語法使用。
到此這篇關(guān)于vue3 setup語法糖各種語法新特性的使用(vue3+vite+pinia)的文章就介紹到這了,更多相關(guān)vue3 setup語法糖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了vue中插槽(slot)幾種類型的使用方法,主要分三種,默認插槽,具名插槽,作用域插槽,下面就來一起介紹一下,感興趣的可以了解一下2024-03-03
vue?element-plus中el-input修改邊框border的方法
element樣式還是蠻好的,只是有時候我們需要做一些調(diào)整,比如el-input的邊框,下面這篇文章主要給大家介紹了關(guān)于vue?element-plus中el-input修改邊框border的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue通過tailwindcss實現(xiàn)class動態(tài)綁定
這篇文章主要介紹了vue通過tailwindcss實現(xiàn)class動態(tài)綁定,文中給大家介紹了一些常用類名語法記錄，對vue動態(tài)綁定class相關(guān)知識感興趣的朋友一起看看吧2023-07-07
插槽slot可以說在一個Vue項目里面處處都有它的身影，比如我們使用一些UI組件庫的時候，我們通常可以使用插槽來自定義我們的內(nèi)容，這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了vue前端sku實現(xiàn)的相關(guān)方法,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下2024-11-11
這篇文章主要介紹了vue3中ref綁定dom或者組件失敗的原因及分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue3+Canvas實現(xiàn)坦克大戰(zhàn)游戲(一)
這篇文章將利用Vue3和Canvas編寫一個童年經(jīng)典游戲—坦克大戰(zhàn)，文中的示例代碼講解詳細，感興趣的小伙伴快來跟隨小編一起學(xué)習(xí)一下吧2022-03-03
vue router解決路由帶參數(shù)跳轉(zhuǎn)時出現(xiàn)404問題
我的頁面是從一個vue頁面router跳轉(zhuǎn)到另一個vue頁面,并且利用windows.open() 瀏覽器重新創(chuàng)建一個頁簽,但是不知道為什么有時候可以有時候又不行,所以本文給大家介紹了vue router解決路由帶參數(shù)跳轉(zhuǎn)時出現(xiàn)404問題,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue如何基于vue-i18n實現(xiàn)多國語言兼容,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
vue腳手架是個好東西，能夠快速搭建vue單頁面應(yīng)用，vue是基于node環(huán)境的，所以要先安裝node。下面通過圖文并茂的形式給大家介紹vue腳手架搭建過程圖解，感興趣的朋友一起看看吧2018-06-06