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