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

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

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

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

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

選項式API

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

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

如下選項式API示例代碼如下所示

<template>
  <div class="base-vue3-code-style">
      <el-button type="danger"  @click="handleIncrease"
      >選項式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>

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

一些選項配置參數(shù),是可進行配置的

組合式API(composition API)

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

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

通常,組合式會與<script setup></script>進行搭配使用

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

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

而非聲明選項的方式編寫vue組件,組合式API只是一種概括性的技術(shù)術(shù)語,因為它把一些API進行組合的使用

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

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

[3]. 依賴注入:使用provide()和inject(),可以在使用響應(yīng)式API時,利用Vue的依賴注入系統(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接受一個內(nèi)部值，返回一個響應(yīng)式的、可更改的 ref 對象，此對象只有一個指向其內(nèi)部值的屬性
  const count = ref(0);  
  // 用來修改狀態(tài),觸發(fā)更新元素,注意的是需要在邏輯中,需要使用`.value`進行訪問
  function handleIncrease() {
    count.value++;
  }
</script>

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

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

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

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

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

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

而組件式代碼內(nèi),是沒有this綁定的,this 會是 undefined,你可以在選項式 API 中訪問組合式 API 暴露的值，但反過來卻不行

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

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

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

只有自己熟悉與不熟悉,Vue3更是對vue2的一種升級和拓展

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

選項式API是以組件實例為中心,構(gòu)造器函數(shù),即this為核心,對于熟悉面向?qū)ο笳Z言的開發(fā)者來說,與類的使用變得更和諧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

為什么要有組合式API

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

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

2. 更靈活組織代碼

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

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

得在文件組件中,來回上下翻滾查看代碼片段

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

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

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

代碼邏輯的組織就會變得非常清晰

現(xiàn)在與同一個邏輯關(guān)注點相關(guān)的代碼被歸為了一組,我們無需再為一個邏輯關(guān)注點在不通的選項塊之間來回滾動切換

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

這在一些大型項目中是非常重要的,有利于項目的維護和迭代

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

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

大多時候,用Ts書寫的組合式API代碼和用js寫的都差不多

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

使用組合式API相比選項式API更加高效,因為組合式API,不會自動的引入生命周期,是純函數(shù),對代碼壓縮也更友好

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

不像選項式API需要依賴this上下文對象訪問屬性,被編譯的模板可以直接訪問<script setup></script>中定義的變量,無需與選項式API,實例對象中代理

使用組合式API,對代碼的壓縮更友好,因為本地變量的名字可以被壓縮,但對象的屬性名則不能

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

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

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

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

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

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

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

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

組合式API覆蓋所有場景

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

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

兩種API編程方式可以混用

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

可以通過setup()選項來使用組合式API

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

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

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

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

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