完成第一個(gè) Vue3.2 項(xiàng)目后,這是我的技術(shù)總結(jié)

第一次Composition API

在vue3.2中，正式支持了script setup的寫(xiě)法,這樣可以大大簡(jiǎn)化組件的代碼量，減少一些重復(fù)操作，我認(rèn)為當(dāng)你寫(xiě)vue3時(shí)，應(yīng)該把這當(dāng)作默認(rèn)寫(xiě)法。在vue3.2之前，一般會(huì)這樣寫(xiě)。

      
      <script>
???export?default?{
?????setup(props,ctx){
??????const?a?=?ref(0)
??????//必須return才能在template中使用，這里就存在一個(gè)重復(fù)操作的問(wèn)題，每次都得cv,萬(wàn)一忘記就得檢查
??????return?{
??????????a
??????}
?????}
???}
</script>

    

那么現(xiàn)在，我們可以這樣寫(xiě),對(duì)比一下，減少了多少行代碼呢

      
      <script?setup>
????const?a?=?ref(0)
</script>

    

PS:之后的代碼我會(huì)省略script setup，默認(rèn)都在script setup標(biāo)簽下。

也許你會(huì)覺(jué)得這樣就更簡(jiǎn)單了，其實(shí)恰恰相反，CompositionAPI其實(shí)要求你對(duì)邏輯處理有更清晰的認(rèn)識(shí)，對(duì)于封裝有更高的要求，否則，你一樣會(huì)寫(xiě)成比以前更丑的代碼。例如：

      
      ???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])
???}

    

這一堆代碼其實(shí)就是當(dāng)你沒(méi)有考慮邏輯，沒(méi)有想過(guò)封裝的時(shí)候，像流水賬一樣直接寫(xiě)出來(lái)的代碼，這些代碼真的比optionsApi更好閱讀嗎，當(dāng)然不。

這里更加混亂，你很難一眼看出某個(gè)函數(shù)用的是哪個(gè)變量，順序混亂，這時(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'?}
???//這時(shí)候需要寫(xiě)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í)候，當(dāng)我們?cè)诓煌慕M件中使用時(shí)，我們可以按需使用，假設(shè)我們現(xiàn)在有A和D兩個(gè)組件

      
      //組件A
import?usePage?from?'./usePage'
const?{a,actionA}?=?usePage()

//組件D
import?usePage?from?'./usePageD'
const?{actionD,resetD}?=?usePageD()

    

上述兩種，自然時(shí)封裝組合后更好閱讀。更方便的是，他有更好玩的用法。我目前這個(gè)項(xiàng)目是一個(gè)iOS混合開(kāi)發(fā)的,這其中必不可少的需要用的jsBridge，由于iOS原生的限制，所有回調(diào)都是通過(guò)其他函數(shù)接收的。例如，下方是我調(diào)取原生A方法時(shí)的代碼

      
      //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)
}

    

而原生則會(huì)這樣告訴我結(jié)果(這塊是偽代碼，畢竟我不會(huì)iOS)

      
      evaluateJavaScript(cb(data))

    

當(dāng)我使用的時(shí)候，就會(huì)有這種邏輯

      
      //App.vue
const?store?=?useStore()
window.test?=?function(data){
????store.commit('saveA',data)
}?
//其他組件中
const?handleClick?=?()=>{
????bridgeA('123','test')
}

    

而現(xiàn)在，我可以不需要通過(guò)vuex了,這樣寫(xiě)不香嗎？

      
      //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}
}


    

最妙的是，這里實(shí)現(xiàn)當(dāng)使用時(shí)注冊(cè)回調(diào)，不使用時(shí)移除，通過(guò)reactive通信,而且可以把回調(diào)方法隱藏起來(lái)，我需要的只是結(jié)果，而不需要把所有代碼都在外層。

當(dāng)我寫(xiě)組件時(shí)，代碼將更加簡(jiǎn)單

      
      <template>
<input?v-model="id"?/>
<button?@click="handleClick">
Action?A
</button>
</template>
<script?setup>
import?useBridgeA?from?'./useBridgeA'
const?{id,handleClick}?=?useBridgeA()
</script>

    

這里其實(shí)我也確立了一些我的vue3的寫(xiě)法吧。

組合不僅是功能點(diǎn)的組合，更是把一些關(guān)聯(lián)性比較高的方法，變量放到一起。

在上面這個(gè)例子，其實(shí)我們可以把回調(diào)方法再抽離出來(lái)，放一個(gè)單獨(dú)的文件中，我再import，但是這樣只會(huì)讓項(xiàng)目文件越來(lái)越多，每次查找的文件越來(lái)越多罷了。

思考setup

很少有人會(huì)去想，為什么這個(gè)新的生命周期叫setup，set up 有建立的意思，難道意思僅僅是這個(gè)App創(chuàng)建時(shí)嗎，那么created顯然更好理解一些。

我認(rèn)為，setup是一個(gè)鏈接，是把數(shù)據(jù)和template連接起來(lái)的一個(gè)橋梁，因此才會(huì)使用這個(gè)動(dòng)詞，本質(zhì)上這不是一個(gè)生命周期，是一個(gè)動(dòng)作，是我們把數(shù)據(jù)和Vue連接起來(lái)。

我把你做的webApp比作一臺(tái)機(jī)器，setup就好比電源線，你把你變量，邏輯作為電源，輸入到電源線，機(jī)器就啟動(dòng)了。

最常見(jiàn)的問(wèn)題，忘記寫(xiě).value

其實(shí)在vue3中，我更喜歡用ref,ref結(jié)構(gòu)簡(jiǎn)單，有著更可靠更方便的響應(yīng)式。例如，當(dāng)我們需要聲明一個(gè)響應(yīng)式的對(duì)象時(shí)，你可以有這兩種寫(xiě)法

      
      const?a?=?shallowRef({})
const?b?=?reactive({})

    

但是，當(dāng)你需要替換整個(gè)對(duì)象時(shí)怎么辦？對(duì)于變量來(lái)說(shuō)，直接修改value即可。

      
      a.value?=?{c:1}

    

對(duì)于變量b，那就麻煩了，如果你的對(duì)象層級(jí)比較簡(jiǎn)單，我能想到的方法就是用Object.assign

      
      Object.assign(b,{c:1})

    

如果只是刪除這個(gè)c這屬性，對(duì)于變量a,很簡(jiǎn)單

      
      a.value?=?{}

    

對(duì)于變量b呢，使用了reactive的那個(gè)呢，顯然更加麻煩

      
      b=reactive({})?//?報(bào)錯(cuò)


    

能直接這樣寫(xiě)嗎，不行，這樣會(huì)報(bào)錯(cuò)，因?yàn)閎是一個(gè)const。于是乎，你簡(jiǎn)單的思考一下，把const 改為let

      
      let?b?=?reactive({})
b.c?=?1
b?=?reactive({})

    

理論上這樣沒(méi)有問(wèn)題，在b沒(méi)有別的依賴或者是被別的變量依賴的時(shí)候。某種程度上講，這樣也會(huì)丟失響應(yīng)性。你只能這樣做，這也是我之前為什么要寫(xiě)reset的原因

      
      delete?b.c
//假設(shè)b這個(gè)變量中有很多屬性，則需要遍歷
Object.keys(b).forEach(key=>delete?b[key])

    

上面這些其實(shí)都是一些容易被忽略的點(diǎn)，也是我為什么更推薦ref的原因，但是有利有弊，ref最大的問(wèn)題是容易忘記寫(xiě).value

      
      const?a?=?ref(0)
a=1?//報(bào)錯(cuò)
//做判斷的時(shí)候
if(a){?//永遠(yuǎn)為true,因?yàn)閍是一個(gè)對(duì)象，不是數(shù)字}

    

這時(shí)候，我推薦你使用unref，上面的if判斷應(yīng)該這樣寫(xiě)

      
      const?a?=?ref(0)
if(unref(a)>0){
?//?do?sth
}?else?{
?//?do?another
}

    

你可以毫無(wú)心智負(fù)擔(dān)的使用unref,哪怕這個(gè)變量不是ref

style v-bind 的優(yōu)缺點(diǎn)

style v-bind可能很多人不熟悉，我把這稱之為vue對(duì)css變量的hack。我項(xiàng)目中偶也也會(huì)使用一些css變量。

具體的css變量的教程，大家可以看一下這個(gè)鏈接www.ruanyifeng.com/blog/2017/05/css-variables.html

      
      <template>
<p>123</p>
</template>
<style?scoped>
p{
?color:var(--pcolor)
}
</style>

    

這樣是純粹的原生css的寫(xiě)法，vue幫我們做了一個(gè)hack.這里需要注意，style中的v-bind里面是一個(gè)字符串。

      
      <template>
<p>123</p>
</template>
<script?setup>
const?pcolor?=?ref('#000')
</script>
<style?scoped>
p{
?color:v-bind('pcolor')
}
</style>

    

但是我發(fā)現(xiàn)一個(gè)問(wèn)題，在某些情況下的偽元素中的content屬性似乎不生效,依舊是上面那個(gè)模板，我多寫(xiě)幾個(gè)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>

    

這時(shí)候v-bind似乎沒(méi)生效，這個(gè)偽元素不顯示，也不知道是bug還是什么，這時(shí)候我建議你這樣寫(xiě)

      
      <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，使用起來(lái)和vuex稍有不同，我在項(xiàng)目中是這樣使用的

      
      //?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
//這樣寫(xiě)的好處是，以后引用的時(shí)候可以直接from?'@/store'，并且當(dāng)文件多了，可以用通過(guò)webpack的require.context或者vite的import?blob來(lái)自動(dòng)處理
export?{UserStore}?from?'./user'

    

比vuex來(lái)說(shuō)少了一個(gè)mutation,也不能說(shuō)沒(méi)有，只是用$patch函數(shù)代替了,使用起來(lái)更靈活

      
      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
})

    

問(wèn)題是在js環(huán)境下，Webstorm似乎沒(méi)有代碼提示？

完全升級(jí)你的項(xiàng)目依賴吧

既然都已經(jīng)使用vue3了，意味著你本來(lái)就不再去兼容ie8，ie9這些，什么你可以把你的依賴完成升級(jí)到es8,es9，毫無(wú)保留的使用fetch、?. 、?? 這些最新的語(yǔ)法，獲取更好的編程體驗(yàn)。

作者： 冒菜師

https://juejin.cn/post/7083685762092236830

祝 您:2022 年暴富！萬(wàn)事如意！

點(diǎn)贊和在看就是最大的支持,比心??