OptionsAPI 與 CompositionAPI

Options API

Options API 是 Vue.js 2.x 中使用的傳統組件設計模式。它基于選項對象，將組件的數據、計算屬性、方法、生命周期鉤子等功能按照選項的形式進行組織。Options API 的特點包括：

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

Composition API

Composition API 是 Vue.js 3.x 中引入的新特性，旨在解決 Options API 在復雜組件中難以維護的問題。Composition API 允許將組件的邏輯按照功能相關性進行組織，而不是按照選項分散組織。Composition API 的特點包括：

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

對比

Options類型的 API，數據、方法、計算屬性等，集中在：data、methods、computed中的，若想改動一個需求，就需要分別修改：data、methods、computed，不便于維護和復用。

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

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

介紹

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

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

上述特點有些暫時用不到，本節(jié)主要介紹下面三個特點

• setup函數返回的對象中的內容，可直接在模板中使用。
• setup中訪問this是undefined。
• setup函數會在beforeCreate之前調用，它是“領先”所有鉤子執(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">查看聯系方式</button>
   </div>
 </template>
 
 <script lang="ts">
   export default {
     name:'Person',
     setup(){
       console.log('~',this) 
       let name = '花卷' //非響應式
       let age = 22  //非響應式
       let tel = '12435143545'  //非響應式
       
       // 方法
       function changeName() {
         name = '饅頭' 
         console.log(name) 
       }
       function changeAge() {
         age += 1 
         console.log(age) 
       }
       function showTel() {
         alert(tel)
       }
 
       // 將數據、方法交出去
       return {name,age,tel,changeName,changeAge,showTel}
     }
   }
 </script>

setup 的返回值

若返回一個對象：則對象中的：屬性、方法等，在模板中均可以直接使用**（重點關注）。**

若返回一個函數：則可以自定義渲染內容，代碼如下：

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

Setup語法糖

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

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

<script setup>
</script>

它可以自動返回，無需return返回，我們測試一下，首先在模版把a寫上

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

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

很不幸，報錯了，我們讀一下報錯內容，兩個標簽必須采用相同類型，那么我們統一就好

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

這樣結果就出來了

我們如果想要修改下面的名字，除了重命名文件（大部分情況不采用），可以采用一個插件

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

• 第一步控制臺運行：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">查看聯系方式</button>
  </div>
</template>

<script lang="ts" setup name="Person">  //自定義命名
  // 此時的name、age、tel都不是響應式的數據
  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>

總結

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

以上就是一文詳解Vue3中的setup函數的用法和原理的詳細內容，更多關于Vue3 setup函數的資料請關注腳本之家其它相關文章！

最新評論