vue組件的編寫風格有哪些

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

隨著vue3的逐漸穩定,以及周邊生態的完善,現在vue3已經成為默認的使用方式了的

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

在編程風格上也有一些區別

選項式API

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

組件所定義的屬性都會暴露在函數內部的this上,它會指向當前組件的實例,在生命周期以及方法內,可以通過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下面的數據  
      handleIncrease() {
        this.count++
      }
    },
  };
</script>
<style scoped>
  .base-vue3-code-style {
    text-align: center;
  }
</style>

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

一些選項配置參數,是可進行配置的

組合式API(composition API)

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

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

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

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

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

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

[1]. 響應式API:例如:ref()和reactive(),可以直接創建基礎數據類型響應式,和對象數據類型響應式

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

[3]. 依賴注入:使用provide()和inject(),可以在使用響應式API時,利用Vue的依賴注入系統

具體代碼如下所示

<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";
  // 響應式數據狀態,初始化數據,ref接受一個內部值，返回一個響應式的、可更改的 ref 對象，此對象只有一個指向其內部值的屬性
  const count = ref(0);  
  // 用來修改狀態,觸發更新元素,注意的是需要在邏輯中,需要使用`.value`進行訪問
  function handleIncrease() {
    count.value++;
  }
</script>

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

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

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

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

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

想要一個基礎的數據具備響應式能力,那么需要使用ref函數包裹起來,此時,它就具備響應式的能力

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

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

兩種風格的對比

vue2已經穩定很多年,各周邊生態已非常完善,選項式API,和組件式API,兩種不同風格代碼沒有哪一個好與不好

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

在底層系統上,提供了兩套不同的接口供開發者自由的選擇和使用

選項式API是以組件實例為中心,構造器函數,即this為核心,對于熟悉面向對象語言的開發者來說,與類的使用變得更和諧

它是將與組件的相關細節抽象出來,比如數據,方法,并通過一些約定的規則,將數據,方法,進行分離,保持各自獨立,按照選項式的方式來組織我們的代碼

對于新手初學者是非常友好的

而組合式API的核心是直接在函數作用域內定義響應式狀態變量,不會跟選項式API那樣,需要掛載到data實例選項下

它是直接從函數中得到狀態,通過直接從vue當中引入相對應的響應式API函數,對基數數據類型和非基礎數據類型進行包裝

實現數據的響應式

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

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

學習建議

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

[2].在生產項目中,當您不需要使用構建工具,或者打算要在低復雜度的場景中使用vue，比如,漸進增強的應用場景,那么官方推薦您采用選項式API,也就是vue2的編程風格

[3]. 當您打算用vue構建完整的單頁面應用,那么官方推薦采用組合式API+單文件組件方式去構建您自己的項目

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

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

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

組合式API并不是函數式編程

組合式API的風格是基于函數的組合,但它不是函數式編程

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

純函數:無狀態的世界,有輸入和輸出,React中的高階函數,以及數組當中的map,reduce都是一種函數式編程

組合式API是已Vue中數據可變的,細粒度的響應式系統為基礎的,而函數式編程通常強調的是數據不可變,也就是單向數據流向的

為什么要有組合式API

1. 更好的邏輯復用

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

2. 更靈活組織代碼

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

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

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

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

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

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

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

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

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

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

更好的類型推導

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

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

更小的生產包體積

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

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

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

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

關于組件式API的思考

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

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

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

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

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

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

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

組合式API覆蓋所有場景

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

同樣使用vue3依舊能夠實現

兩種API編程方式可以混用

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

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

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

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

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

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

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