OptionsAPI 與 CompositionAPI

Options API

Options API 是 Vue.js 2.x 中使用的傳統(tǒng)組件設(shè)計(jì)模式。它基于選項(xiàng)對(duì)象，將組件的數(shù)據(jù)、計(jì)算屬性、方法、生命周期鉤子等功能按照選項(xiàng)的形式進(jìn)行組織。Options API 的特點(diǎn)包括：

易于上手：Options API 的結(jié)構(gòu)清晰，容易理解和學(xué)習(xí)，適合初學(xué)者入門。
邏輯分離：不同功能的代碼被分離到不同的選項(xiàng)中，使得代碼更易維護(hù)和閱讀。
依賴注入：通過 this 上下文可以方便地訪問到組件的屬性和方法。

Composition API

Composition API 是 Vue.js 3.x 中引入的新特性，旨在解決 Options API 在復(fù)雜組件中難以維護(hù)的問題。Composition API 允許將組件的邏輯按照功能相關(guān)性進(jìn)行組織，而不是按照選項(xiàng)分散組織。Composition API 的特點(diǎn)包括：

邏輯復(fù)用：可以將邏輯抽取為可復(fù)用的函數(shù)，更方便地在不同組件之間共享邏輯。
代碼組織：將相關(guān)邏輯放在一起，使得組件更加清晰和易于維護(hù)。
更好的類型推斷：由于函數(shù)可以提供更多信息，TypeScript 在使用 Composition API 時(shí)能夠提供更好的類型推斷。

對(duì)比

Options類型的 API，數(shù)據(jù)、方法、計(jì)算屬性等，集中在：data、methods、computed中的，若想改動(dòng)一個(gè)需求，就需要分別修改：data、methods、computed，不便于維護(hù)和復(fù)用。

Composition 可以用函數(shù)的方式，更加優(yōu)雅的組織代碼，讓相關(guān)功能的代碼更加有序的組織在一起。

上面我將兩種形式的API都列出來了，總的來說OptionsAPI屬于Vue2，CompositionAPI屬于Vue3，本文主要結(jié)合兩者進(jìn)行介紹

介紹

在 Vue3 中，setup 函數(shù)是一個(gè)新引入的概念，它代替了之前版本中的 data、computed、methods 等選項(xiàng)，用于設(shè)置組件的初始狀態(tài)和邏輯。setup 函數(shù)的引入使得組件的邏輯更加清晰和靈活，本文將主要介紹Setup的基本用法和少量原理

• 更靈活的組織邏輯：setup 函數(shù)可以將相關(guān)邏輯按照功能進(jìn)行組織，使得組件更加清晰和易于維護(hù)。不再受到 Options API 中選項(xiàng)的限制，可以更自由地組織代碼。
• 邏輯復(fù)用：可以將邏輯抽取為可復(fù)用的函數(shù)，并在 setup 函數(shù)中進(jìn)行調(diào)用，實(shí)現(xiàn)邏輯的復(fù)用，避免了在 Options API 中通過 mixins 或混入對(duì)象實(shí)現(xiàn)邏輯復(fù)用時(shí)可能出現(xiàn)的問題。
• 更好的類型推斷：由于 setup 函數(shù)本身是一個(gè)普通的 JavaScript 函數(shù)，可以更好地與 TypeScript 配合，提供更好的類型推斷和代碼提示。
• 更好的響應(yīng)式處理：setup 函數(shù)中可以使用 ref、reactive 等函數(shù)創(chuàng)建響應(yīng)式數(shù)據(jù)，可以更方便地處理組件的狀態(tài)，實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)更新。
• 更細(xì)粒度的生命周期鉤子：setup 函數(shù)中可以使用 onMounted、onUpdated、onUnmounted 等函數(shù)注冊(cè)組件的生命周期鉤子，可以更細(xì)粒度地控制組件的生命周期行為。
• 更好的代碼組織：setup 函數(shù)將組件的邏輯集中在一個(gè)地方，使得代碼更易讀、易維護(hù)，并且可以更清晰地看到組件的整體邏輯。

上述特點(diǎn)有些暫時(shí)用不到，本節(jié)主要介紹下面三個(gè)特點(diǎn)

• setup函數(shù)返回的對(duì)象中的內(nèi)容，可直接在模板中使用。
• setup中訪問this是undefined。
• setup函數(shù)會(huì)在beforeCreate之前調(diào)用，它是“領(lǐng)先”所有鉤子執(zhí)行的。

從下面的圖就可以看出Setup的執(zhí)行要更優(yōu)先，以及this的不適用

<template>
   <div class="person">
     <h2>姓名：{{name}}</h2>
     <h2>年齡：{{age}}</h2>
     <button @click="changeName">修改名字</button>
     <button @click="changeAge">修改年齡</button>
     <button @click="showTel">查看聯(lián)系方式</button>
   </div>
 </template>
 
 <script lang="ts">
   export default {
     name:'Person',
     setup(){
       console.log('~',this) 
       let name = '花卷' //非響應(yīng)式
       let age = 22  //非響應(yīng)式
       let tel = '12435143545'  //非響應(yīng)式
       
       // 方法
       function changeName() {
         name = '饅頭' 
         console.log(name) 
       }
       function changeAge() {
         age += 1 
         console.log(age) 
       }
       function showTel() {
         alert(tel)
       }
 
       // 將數(shù)據(jù)、方法交出去
       return {name,age,tel,changeName,changeAge,showTel}
     }
   }
 </script>

setup 的返回值

若返回一個(gè)對(duì)象：則對(duì)象中的：屬性、方法等，在模板中均可以直接使用**（重點(diǎn)關(guān)注）。**

若返回一個(gè)函數(shù)：則可以自定義渲染內(nèi)容，代碼如下：

setup(){
  return ()=> '你好??！'
}

Setup語法糖

大家十分清楚語法糖到哪都是為了使代碼更簡便

接下來我介紹一下語法糖的寫法

<script setup>
</script>

它可以自動(dòng)返回，無需return返回，我們測(cè)試一下，首先在模版把a(bǔ)寫上

然后再script里面寫，這里的let a = 111，就自帶返回了，我們接下來看看頁面

<script setup>
   let a = 111
</script>

很不幸，報(bào)錯(cuò)了，我們讀一下報(bào)錯(cuò)內(nèi)容，兩個(gè)標(biāo)簽必須采用相同類型，那么我們統(tǒng)一就好

<script lang="ts" setup>
   let a = 111
</script>

這樣結(jié)果就出來了

我們?nèi)绻胍薷南旅娴拿?，除了重命名文件（大部分情況不采用），可以采用一個(gè)插件

我們可以借助vite中的插件簡化

• 第一步控制臺(tái)運(yùn)行：npm i vite-plugin-vue-setup-extend -D
• 第二步：vite.config.ts

完整代碼如下

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年齡：{{age}}</h2>
    <h2>地址：{{address}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年齡</button>
    <button @click="showTel">查看聯(lián)系方式</button>
  </div>
</template>

<script lang="ts" setup name="Person">  //自定義命名
  // 此時(shí)的name、age、tel都不是響應(yīng)式的數(shù)據(jù)
  let name = '張三'
  let age = 22
  let tel = '1424423451'
  let address = '北京市朝陽區(qū)'

  // 方法
  function changeName() {
    name = '' 
    console.log(name) 
  }
  function changeAge() {
    age += 1 
    console.log(age)
  }
  function showTel() {
    alert(tel)
  }
</script>

總結(jié)

一開始介紹了Vue2,3對(duì)應(yīng)的兩種API以及對(duì)比，之后簡單介紹了一下Vue3特有的函數(shù)—Setup，最后圍繞Setup介紹使用語法糖后，可以省略 export default 和 setup 屬性，使得組件的代碼更加簡潔和易讀。同時(shí)，Vue 3 也會(huì)將 參數(shù)地注入到 setup 函數(shù)中，使得在使用這些參數(shù)時(shí)不需要顯式地聲明。

以上就是一文詳解Vue3中的setup函數(shù)的用法和原理的詳細(xì)內(nèi)容，更多關(guān)于Vue3 setup函數(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論