vue組件的編寫(xiě)風(fēng)格有哪些

這篇文章主要介紹了vue組件的編寫(xiě)風(fēng)格有哪些的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue組件的編寫(xiě)風(fēng)格有哪些文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

烏什網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司2013年至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

隨著vue3的逐漸穩(wěn)定,以及周邊生態(tài)的完善,現(xiàn)在vue3已經(jīng)成為默認(rèn)的使用方式了的

所以,對(duì)于一個(gè)前端開(kāi)發(fā)者,Vue2與Vue3都得要會(huì),在vue3中新增很多東西,比如:Fragment,Teleport,Suspense,也去掉了vue2中一些特性,比如:移除keyCode支持作為v-on的修飾符等

在編程風(fēng)格上也有一些區(qū)別

選項(xiàng)式API

選項(xiàng)式API也可以成為配置項(xiàng)API,它是將組件的實(shí)例選項(xiàng)對(duì)象來(lái)描述組件的邏輯,比如:組件的data,methods,還有生命周期鉤子mounted,以及watch監(jiān)聽(tīng)器。

組件所定義的屬性都會(huì)暴露在函數(shù)內(nèi)部的this上,它會(huì)指向當(dāng)前組件的實(shí)例,在生命周期以及方法內(nèi),可以通過(guò)this進(jìn)行訪(fǎng)問(wèn)讀取

如下選項(xiàng)式API示例代碼如下所示

<template>
  <div class="base-vue3-code-style">
      <el-button type="danger"  @click="handleIncrease"
      >選項(xiàng)式API累加</el-button>
      <p>{{count}}</p>
  </div>
</template>

<script>
  export default {
    data() {
        return {
            count:0
        }
    },
    methods: {
      // 定義方法,修改data下面的數(shù)據(jù)  
      handleIncrease() {
        this.count++
      }
    },
  };
</script>
<style scoped>
  .base-vue3-code-style {
    text-align: center;
  }
</style>

對(duì)于選項(xiàng)式API,是vue2.0書(shū)寫(xiě)規(guī)范,響應(yīng)式數(shù)據(jù)與頁(yè)面顯示相關(guān)的,就掛載在data下,綁定方法就放在methods里面,它是約定俗成的

一些選項(xiàng)配置參數(shù),是可進(jìn)行配置的

組合式API(composition API)

組合式API(Composition API)是一系列API的集合

通過(guò)組合式API,可以通過(guò)從vue中導(dǎo)入特定的API(比如ref(普通數(shù)據(jù)類(lèi)型),reactive(只適用于對(duì)象)),函數(shù)來(lái)描述組件的邏輯,實(shí)現(xiàn)我們想要的功能

通常,組合式會(huì)與<script setup></script>進(jìn)行搭配使用

這個(gè)setup是一個(gè)標(biāo)識(shí),就像type="text/javascript"一樣,告訴vue需要在編譯時(shí)進(jìn)行一些處理

讓我們可以簡(jiǎn)潔的使用組合式API,比如:<script setup></script>中的導(dǎo)入和頂層變量或函數(shù)都能夠直接在模板中使用

而非聲明選項(xiàng)的方式編寫(xiě)vue組件,組合式API只是一種概括性的技術(shù)術(shù)語(yǔ),因?yàn)樗岩恍?code>API進(jìn)行組合的使用

[1]. 響應(yīng)式API:例如:ref()和reactive(),可以直接創(chuàng)建基礎(chǔ)數(shù)據(jù)類(lèi)型響應(yīng)式,和對(duì)象數(shù)據(jù)類(lèi)型響應(yīng)式

[2]. 生命周期鉤子: 例如onMounted(),onUnmounted(),可以在組件的生命周期階段添加邏輯

[3]. 依賴(lài)注入:使用provide()和inject(),可以在使用響應(yīng)式API時(shí),利用Vue的依賴(lài)注入系統(tǒng)

具體代碼如下所示

<template>
   <div class="base-vue3-code-style">
     <el-button type="primary"  @click="handleIncrease"
      >組合式API累加</el-button>
      <p>{{count}}</p>
     </div> 
</template>
<script setup>
  // 引入ref API
  import  {ref} from "vue";
  // 響應(yīng)式數(shù)據(jù)狀態(tài),初始化數(shù)據(jù),ref接受一個(gè)內(nèi)部值，返回一個(gè)響應(yīng)式的、可更改的 ref 對(duì)象，此對(duì)象只有一個(gè)指向其內(nèi)部值的屬性
  const count = ref(0);  
  // 用來(lái)修改狀態(tài),觸發(fā)更新元素,注意的是需要在邏輯中,需要使用`.value`進(jìn)行訪(fǎng)問(wèn)
  function handleIncrease() {
    count.value++;
  }
</script>

[1]. 需要從vue中引入ref這個(gè)API函數(shù)

[2]. 在組件的邏輯代碼中,需要使用xxx.value取值,并修改

[3]. 模板中不需要寫(xiě)xxx.value,在函數(shù)中定義的響應(yīng)式變量數(shù)據(jù)可以直接在模板中使用

從選項(xiàng)式API和組合式API兩種代碼編寫(xiě)風(fēng)格當(dāng)中對(duì)比可以看出,若使用選項(xiàng)式API,那么頁(yè)面中綁定的響應(yīng)式數(shù)據(jù)需要掛載在data配置選項(xiàng)下,而綁定方法

則需要放在methods配置選項(xiàng)下,寫(xiě)法都是固定的,在選項(xiàng)式API中,邏輯內(nèi)想要訪(fǎng)問(wèn)屬性和方法,更多依賴(lài)的是this,達(dá)到訪(fǎng)問(wèn)組件實(shí)例下的數(shù)據(jù)和方法,而在組合式API,是具體需要什么,就從vue當(dāng)中引入解決什么問(wèn)題功能的API,做到真正的按需引入

想要一個(gè)基礎(chǔ)的數(shù)據(jù)具備響應(yīng)式能力,那么需要使用ref函數(shù)包裹起來(lái),此時(shí),它就具備響應(yīng)式的能力

而組件式代碼內(nèi),是沒(méi)有this綁定的,this 會(huì)是 undefined,你可以在選項(xiàng)式 API 中訪(fǎng)問(wèn)組合式 API 暴露的值，但反過(guò)來(lái)卻不行

如下這張圖很好對(duì)比了選項(xiàng)式API與組件式API的區(qū)別

兩種風(fēng)格的對(duì)比

vue2已經(jīng)穩(wěn)定很多年,各周邊生態(tài)已非常完善,選項(xiàng)式API,和組件式API,兩種不同風(fēng)格代碼沒(méi)有哪一個(gè)好與不好

只有自己熟悉與不熟悉,Vue3更是對(duì)vue2的一種升級(jí)和拓展

在底層系統(tǒng)上,提供了兩套不同的接口供開(kāi)發(fā)者自由的選擇和使用

選項(xiàng)式API是以組件實(shí)例為中心,構(gòu)造器函數(shù),即this為核心,對(duì)于熟悉面向?qū)ο笳Z(yǔ)言的開(kāi)發(fā)者來(lái)說(shuō),與類(lèi)的使用變得更和諧

它是將與組件的相關(guān)細(xì)節(jié)抽象出來(lái),比如數(shù)據(jù),方法,并通過(guò)一些約定的規(guī)則,將數(shù)據(jù),方法,進(jìn)行分離,保持各自獨(dú)立,按照選項(xiàng)式的方式來(lái)組織我們的代碼

對(duì)于新手初學(xué)者是非常友好的

而組合式API的核心是直接在函數(shù)作用域內(nèi)定義響應(yīng)式狀態(tài)變量,不會(huì)跟選項(xiàng)式API那樣,需要掛載到data實(shí)例選項(xiàng)下

它是直接從函數(shù)中得到狀態(tài),通過(guò)直接從vue當(dāng)中引入相對(duì)應(yīng)的響應(yīng)式API函數(shù),對(duì)基數(shù)數(shù)據(jù)類(lèi)型和非基礎(chǔ)數(shù)據(jù)類(lèi)型進(jìn)行包裝

實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)式

這種編程方式更加自由,代碼的執(zhí)行效率也會(huì)更高,它的靈活性使得組織和重用邏輯的模式變得非常強(qiáng)大

如果說(shuō)vue2是帶著緊箍咒的野馬,那么vue3就是脫離了緊箍咒的野馬,變得更加自由

學(xué)習(xí)建議

[1]. Vue2與Vue3也是可以混用的,但是選擇自己喜歡熟悉的一種方式編碼就可以了的,無(wú)非就是多一種風(fēng)格的編碼

[2].在生產(chǎn)項(xiàng)目中,當(dāng)您不需要使用構(gòu)建工具,或者打算要在低復(fù)雜度的場(chǎng)景中使用vue，比如,漸進(jìn)增強(qiáng)的應(yīng)用場(chǎng)景,那么官方推薦您采用選項(xiàng)式API,也就是vue2的編程風(fēng)格

[3]. 當(dāng)您打算用vue構(gòu)建完整的單頁(yè)面應(yīng)用,那么官方推薦采用組合式API+單文件組件方式去構(gòu)建您自己的項(xiàng)目

低版本的Vue2.7如何使用vue3

在vue3和vue2.7以上的版本,都是可以使用組合式API,對(duì)于低版本vue2.7以下的,可以使用官方維護(hù)的插件 @vue/composition-api

在vue3中,組合式API基本都會(huì)配合<script setup></script>語(yǔ)法在單文件組件中使用

組合式API并不是函數(shù)式編程

組合式API的風(fēng)格是基于函數(shù)的組合,但它不是函數(shù)式編程

函數(shù)式編程:可以把函數(shù)當(dāng)做數(shù)據(jù),參數(shù)進(jìn)行傳遞,函數(shù)是第一公民,純UI函數(shù),如果你用過(guò)React的話(huà),那就知道這個(gè)的

純函數(shù):無(wú)狀態(tài)的世界,有輸入和輸出,React中的高階函數(shù),以及數(shù)組當(dāng)中的map,reduce都是一種函數(shù)式編程

組合式API是已Vue中數(shù)據(jù)可變的,細(xì)粒度的響應(yīng)式系統(tǒng)為基礎(chǔ)的,而函數(shù)式編程通常強(qiáng)調(diào)的是數(shù)據(jù)不可變,也就是單向數(shù)據(jù)流向的

為什么要有組合式API

1. 更好的邏輯復(fù)用

組合式API能夠通過(guò)組合函數(shù)來(lái)實(shí)現(xiàn)更加簡(jiǎn)潔高效的邏輯復(fù)用,在選項(xiàng)式API中我們主要的邏輯復(fù)用機(jī)制是mixins,而有了組合式API, 可以解決mixins中的所有缺陷

2. 更靈活組織代碼

在vue2.0選項(xiàng)式API編程里,必須要遵從vue的使用規(guī)范,去組織自己的代碼,響應(yīng)式數(shù)據(jù)放在data下,而方法則放在methods里面

然而,在選項(xiàng)式API在單個(gè)文件組件的邏輯復(fù)雜到一定程度時(shí),會(huì)出現(xiàn)一些問(wèn)題,這些問(wèn)題主要是在多個(gè)邏輯關(guān)注點(diǎn)上

得在文件組件中,來(lái)回上下翻滾查看代碼片段

處理相同的邏輯關(guān)注點(diǎn)的代碼被強(qiáng)制拆分在不同的選項(xiàng)中,位于文件的不同部分

在一個(gè)如有幾百行的大組件中,要讀懂代碼中的一個(gè)邏輯關(guān)注點(diǎn),是需要來(lái)回在當(dāng)前文件上下滾動(dòng)的,而如果想要將一個(gè)邏輯關(guān)注點(diǎn)

抽取重構(gòu)到一個(gè)可復(fù)用的工具函數(shù)中,需要從文件的多個(gè)不同部分找到所需要的正確的片段,而如果是使用組合式API重構(gòu)這個(gè)組件

代碼邏輯的組織就會(huì)變得非常清晰

現(xiàn)在與同一個(gè)邏輯關(guān)注點(diǎn)相關(guān)的代碼被歸為了一組,我們無(wú)需再為一個(gè)邏輯關(guān)注點(diǎn)在不通的選項(xiàng)塊之間來(lái)回滾動(dòng)切換

另外,還可以將這一組代碼移到一個(gè)外部文件中,不在需要為了抽象而重新組織代碼,大大降低了重構(gòu)的成本

這在一些大型項(xiàng)目中是非常重要的,有利于項(xiàng)目的維護(hù)和迭代

更好的類(lèi)型推導(dǎo)

組合式API主要利用基本的變量和函數(shù),它們本身就是類(lèi)型友好的,用組合式API重寫(xiě)的代碼可以享受到完整的類(lèi)型推導(dǎo),不需要書(shū)寫(xiě)太多類(lèi)型標(biāo)注

大多時(shí)候,用Ts書(shū)寫(xiě)的組合式API代碼和用js寫(xiě)的都差不多

更小的生產(chǎn)包體積

使用組合式API相比選項(xiàng)式API更加高效,因?yàn)榻M合式API,不會(huì)自動(dòng)的引入生命周期,是純函數(shù),對(duì)代碼壓縮也更友好

這也是<script setup></script>形式書(shū)寫(xiě)的組件模板被編譯為一個(gè)內(nèi)聯(lián)函數(shù),和<script setup></script>中的代碼位于同一個(gè)作用域

不像選項(xiàng)式API需要依賴(lài)this上下文對(duì)象訪(fǎng)問(wèn)屬性,被編譯的模板可以直接訪(fǎng)問(wèn)<script setup></script>中定義的變量,無(wú)需與選項(xiàng)式API,實(shí)例對(duì)象中代理

使用組合式API,對(duì)代碼的壓縮更友好,因?yàn)楸镜刈兞康拿挚梢员粔嚎s,但對(duì)象的屬性名則不能

關(guān)于組件式API的思考

使用組合式API不像選項(xiàng)式API那樣,會(huì)約定俗成的將指定的邏輯掛載在指定的選項(xiàng)配置對(duì)象下面,它的編程風(fēng)格使用是固定的,確實(shí)是可以在編寫(xiě)Vue組件里

讓開(kāi)發(fā)者少思考,你只需要按照配方,一步一步先后順序來(lái)就可以了的

而組合式API,它比較偏向原生js,不受框架的規(guī)則約束和限制,比較自由,灑脫,像編寫(xiě)普通的javascript那樣來(lái)編寫(xiě)組件的代碼

可以編寫(xiě)組織好的javascript,有能力編寫(xiě)組合式API代碼

選項(xiàng)式API代碼風(fēng)格,一定程度上確實(shí)可以減少自己思考的時(shí)間,想要實(shí)現(xiàn)一個(gè)具體的功能,那么你需要按照框架的規(guī)則去組織自己的代碼,沒(méi)有選擇的余地

這也會(huì)導(dǎo)致一個(gè)問(wèn)題,脫離了框架,那么就不能干活的弊端

在一些比較大規(guī)模的項(xiàng)目中,選項(xiàng)式API代碼風(fēng)格想要重構(gòu)的話(huà),是非常費(fèi)勁的,比較難以進(jìn)行重構(gòu)和提高代碼質(zhì)量,在這一方面,組合式API提供了更好的長(zhǎng)期可維護(hù)性

組合式API覆蓋所有場(chǎng)景

在官方介紹當(dāng)中,組合式API基本上能夠覆蓋所有狀態(tài)邏輯方面的需求,也就是說(shuō),使用vue2選項(xiàng)式API實(shí)現(xiàn)的功能

同樣使用vue3依舊能夠?qū)崿F(xiàn)

兩種API編程方式可以混用

選項(xiàng)式API和組合式API是可以進(jìn)行混用的,如果在選項(xiàng)式API中想要使用組合式API,基于Vue3或vue2.7后的版本

可以通過(guò)setup()選項(xiàng)來(lái)使用組合式API

在官方文檔中,談到了,在一個(gè)基于選項(xiàng)式API開(kāi)發(fā)很久,但又需要和基于組合式API的新代碼或第三方庫(kù)整合的項(xiàng)目中,就使用setup()這種方式的

換而言之,就是vue2的項(xiàng)目,依舊使用選項(xiàng)式API方式,Vue3的項(xiàng)目就選用組合式API，無(wú)非就是多了一種編寫(xiě)代碼的風(fēng)格

選項(xiàng)式API不會(huì)被廢棄,是vue不可分割的一部分,選項(xiàng)式 API 是在組合式 API 的基礎(chǔ)上實(shí)現(xiàn)的,對(duì)于中小型項(xiàng)目,使用選項(xiàng)式API是一個(gè)不錯(cuò)的選擇

而組合式API比較適合大型復(fù)雜項(xiàng)目,這兩種代碼風(fēng)格都是可以實(shí)現(xiàn)的,看自己對(duì)哪種更熟悉和青睞。

關(guān)于“vue組件的編寫(xiě)風(fēng)格有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue組件的編寫(xiě)風(fēng)格有哪些”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標(biāo)題：vue組件的編寫(xiě)風(fēng)格有哪些
鏈接URL：http://www.jbt999.com/article0/pdgjoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、做網(wǎng)站、軟件開(kāi)發(fā)、響應(yīng)式網(wǎng)站、微信公眾號(hào)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)