vue3.2?Composition?API項目依賴升級
第一次Composition API
在vue3.2中，正式支持了script setup的寫法,這樣可以大大簡化組件的代碼量，減少一些重復(fù)操作，我認為當你寫vue3時，應(yīng)該把這當作默認寫法。 在vue3.2之前，一般會這樣寫。
<script>
export default {
setup(props,ctx){
const a = ref(0)
//必須return才能在template中使用，這里就存在一個重復(fù)操作的問題，每次都得cv,萬一忘記就得檢查
return {
a
}
}
}
</script>
那么現(xiàn)在，我們可以這樣寫,對比一下，減少了多少行代碼呢
<script setup>
const a = ref(0)
</script>
PS:之后的代碼我會省略script setup，默認都在script setup標簽下。
也許你會覺得這樣就更簡單了，其實恰恰相反，CompositionAPI其實要求你對邏輯處理有更清晰的認識，對于封裝有更高的要求，否則，你一樣會寫成比以前更丑的代碼。
例如：
const a = ref(0)
const b = ref('')
const c = ref(true)
const d = reactive({})
const actionA = ()=>{a.value++}
const actionC = ()=>{c.value=!c.value}
const actionB = ()=>{b.value += 'test' }
const actiond = async ( )=> {
const res = await ajax(`url`)
d.a = res.a
d.b = res.b
d.c = res.c
}
const resetD = ()=>{
Object.keys(d).forEach(key=>delete d[key])
}
這一堆代碼其實就是當你沒有考慮邏輯，沒有想過封裝的時候，像流水賬一樣直接寫出來的代碼，這些代碼真的比optionsApi更好閱讀嗎，當然不。
這里更加混亂，你很難一眼看出某個函數(shù)用的是哪個變量，順序混亂，這時候需要封裝，需要組合，這也是CompositionAPI的含義之一。
//usePage.js
export default ()=>{
const a = ref(0)
const b = ref('')
const c = ref(true)
const actionA = ()=>{a.value++}
const actionC = ()=>{c.value=!c.value}
const actionB = ()=>{b.value += 'test' }
//這時候需要寫return
return {
a,actionA，
b,actionB,
c,actionC
}
}
// usePageD.js
export default ()=>{
const d = reactive({})
const actionD = async ( )=> {
const res = await ajax(`url`)
d.a = res.a
d.b = res.b
d.c = res.c
}
const resetD = ()=>{
Object.keys(d).forEach(key=>delete d[key])
}
return {
d,actionD,resetD
}
}
這時候，當我們在不同的組件中使用時，我們可以按需使用，假設(shè)我們現(xiàn)在有A和D兩個組件
//組件A
import usePage from './usePage'
const {a,actionA} = usePage()
//組件D
import usePage from './usePageD'
const {actionD,resetD} = usePageD()
上述兩種，自然時封裝組合后更好閱讀。更方便的是，他有更好玩的用法。我目前這個項目是一個iOS混合開發(fā)的,這其中必不可少的需要用的jsBridge，由于iOS原生的限制，所有回調(diào)都是通過其他函數(shù)接收的。 例如，下方是我調(diào)取原生A方法時的代碼
//jsBridge.js
const callBridge = (msg)=>{
try {
window.webkit.xxxHandler.postMessage(msg)
}catch(e){
console.log(msg)
}
}
export const bridgeA = (id,cb='')=>{
const msg = {
func:'A',
params:{id},
cb
}
callBridge(msg)
}
而原生則會這樣告訴我結(jié)果(這塊是偽代碼，畢竟我不會iOS)
evaluateJavaScript(cb(data))
當我使用的時候，就會有這種邏輯
//App.vue
const store = useStore()
window.test = function(data){
store.commit('saveA',data)
}
//其他組件中
const handleClick = ()=>{
bridgeA('123','test')
}
而現(xiàn)在，我可以不需要通過vuex了,這樣寫不香嗎？
//useBridgeA.js
export default ()=>{
const id = ref('')
const saved = reactive({})
window.test = function(data){
saved.data = data
}
const handleClick = ()=>{
bridgeA('123','test')
}
onBeforeUnmount(()=>{window.test = null})
return {saved,handleClick,id}
}
最妙的是，這里實現(xiàn)當使用時注冊回調(diào)，不使用時移除，通過reactive通信,而且可以把回調(diào)方法隱藏起來，我需要的只是結(jié)果，而不需要把所有代碼都在外層。
當我寫組件時，代碼將更加簡單
<template>
<input v-model="id" />
<button @click="handleClick">
Action A
</button>
</template>
<script setup>
import useBridgeA from './useBridgeA'
const {id,handleClick} = useBridgeA()
</script>
這里其實我也確立了一些我的vue3的寫法吧。
組合不僅是功能點的組合，更是把一些關(guān)聯(lián)性比較高的方法，變量放到一起。
在上面這個例子，其實我們可以把回調(diào)方法再抽離出來，放一個單獨的文件中，我再import，但是這樣只會讓項目文件越來越多，每次查找的文件越來越多罷了。
思考setup
很少有人會去想，為什么這個新的生命周期叫setup，set up 有建立的意思，難道意思僅僅是這個App創(chuàng)建時嗎，那么created顯然更好理解一些。
我認為，setup是一個鏈接，是把數(shù)據(jù)和template連接起來的一個橋梁，因此才會使用這個動詞，本質(zhì)上這不是一個生命周期，是一個動作，是我們把數(shù)據(jù)和Vue連接起來。
我把你做的webApp比作一臺機器，setup就好比電源線，你把你變量，邏輯作為電源，輸入到電源線，機器就啟動了。
最常見的問題，忘記寫.value
其實在vue3中，我更喜歡用ref,ref結(jié)構(gòu)簡單，有著更可靠更方便的響應(yīng)式。 例如，當我們需要聲明一個響應(yīng)式的對象時，你可以有這兩種寫法
const a = shallowRef({})
const b = reactive({})
但是，當你需要替換整個對象時怎么辦？對于變量來說，直接修改value即可。
a.value = {c:1}
對于變量b，那就麻煩了，如果你的對象層級比較簡單，我能想到的方法就是用Object.assign
Object.assign(b,{c:1})
如果只是刪除這個c這屬性，對于變量a,很簡單
a.value = {}
對于變量b呢，使用了reactive的那個呢，顯然更加麻煩
b=reactive({}) // 報錯
能直接這樣寫嗎，不行，這樣會報錯，因為b是一個const。 于是乎，你簡單的思考一下，把const 改為let
let b = reactive({})
b.c = 1
b = reactive({})
理論上這樣沒有問題，在b沒有別的依賴或者是被別的變量依賴的時候。某種程度上講，這樣也會丟失響應(yīng)性。 你只能這樣做，這也是我之前為什么要寫reset的原因
delete b.c //假設(shè)b這個變量中有很多屬性，則需要遍歷 Object.keys(b).forEach(key=>delete b[key])
上面這些其實都是一些容易被忽略的點，也是我為什么更推薦ref的原因，但是有利有弊，ref最大的問題是容易忘記寫.value
const a = ref(0)
a=1 //報錯
//做判斷的時候
if(a){ //永遠為true,因為a是一個對象，不是數(shù)字}
這時候，我推薦你使用unref，上面的if判斷應(yīng)該這樣寫
const a = ref(0)
if(unref(a)>0){
// do sth
} else {
// do another
}
你可以毫無心智負擔的使用unref,哪怕這個變量不是ref
style v-bind 的優(yōu)缺點
style v-bind可能很多人不熟悉，我把這稱之為vue對css變量的hack。我項目中偶也也會使用一些css變量。
具體的css變量的教程，大家可以看一下這個鏈接 http://chabaoo.cn/css/364683.html
<template>
<p>123</p>
</template>
<style scoped>
p{
color:var(--pcolor)
}
</style>
這樣是純粹的原生css的寫法，vue幫我們做了一個hack.這里需要注意，style中的v-bind里面是一個字符串。
<template>
<p>123</p>
</template>
<script setup>
const pcolor = ref('#000')
</script>
<style scoped>
p{
color:v-bind('pcolor')
}
</style>
但是我發(fā)現(xiàn)一個問題，在某些情況下的偽元素中的content屬性似乎不生效,依舊是上面那個模板，我多寫幾個p
<template>
<div>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</template>
<script setup>
const text = ref('hello')
</script>
<style scoped>
div p:first-of-type:before{
content:v-bind('text')
}
</style>
這時候v-bind似乎沒生效，這個偽元素不顯示，也不知道是bug還是什么，這時候我建議你這樣寫
<template>
<div>
<p :data-text="text">123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</template>
<script setup>
const text = ref('hello')
</script>
<style scoped>
div p:first-of-type:before{
content:attr(data-text)
}
</style>
pinia or not
pinia約等于vuex5，使用起來和vuex稍有不同，我在項目中是這樣使用的
// store/user.js中定義具體的store
export const UserStore = defineStore('user', {
state:()=>({
name:'',
id:''
})
getters:{
nameId:state=>`${state.name}_${state.id}`
}
actions:{
async getUserInfo(){}
}
})
//store/index.js
//這樣寫的好處是，以后引用的時候可以直接from '@/store'，并且當文件多了，可以用通過webpack的require.context或者vite的import blob來自動處理
export {UserStore} from './user'
比vuex來說少了一個mutation,也不能說沒有，只是用$patch函數(shù)代替了,使用起來更靈活
import UserStore from '@/store'
const user = UserStore()
user.name = 'test'
//or
user.$patch({
name:'test',
id:123
})
//or
user.$patch(state =>{
state.name = 'test'
state.id = 123
})
問題是在js環(huán)境下，Webstorm似乎沒有代碼提示？
完全升級你的項目依賴吧
既然都已經(jīng)使用vue3了，意味著你本來就不再去兼容ie8，ie9這些，什么你可以把你的依賴完成升級到es8,es9，毫無保留的使用fetch、?. 、?? 這些最新的語法，獲取更好的編程體驗。
以上就是vue3.2 Composition API項目依賴升級的詳細內(nèi)容，更多關(guān)于vue3.2 Composition API項目依賴的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
今天小編就為大家分享一篇在Vue組件中獲取全局的點擊事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了詳解vuex的簡單todolist例子,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
基于ant-design-vue實現(xiàn)表格操作按鈕組件
這篇文章主要為大家介紹了基于ant-design-vue實現(xiàn)表格操作按鈕組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了vue 封裝 Adminlte3組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了使用md5在vue中的axios請求時加密API問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue生成token保存在客戶端localStorage中的方法
本篇文章主要介紹了vue生成token保存在客戶端localStorage中的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Vue前端開發(fā)中表單組件是排在前三的高頻使用的組件,下面這篇文章主要給大家介紹了關(guān)于vue可視化表單設(shè)計器自定義組件使用的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
本文主要介紹了vue3中watch監(jiān)聽的四種寫法,包含了ref 定義的數(shù)據(jù),reactive定義的數(shù)據(jù),函數(shù)返回的值（getter函數(shù)）和前面3個內(nèi)容的數(shù)組,具有一定的參考價值,感興趣的可以了了解一下2024-02-02
這篇文章主要介紹了Vue之定義全局工具類問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家介紹了推薦一款簡易的solid-js消息UI庫使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08