詳解Vue3中setup函數的使用教程

Posted on by

vue2 和 vue3 開發的區別

首先，目前來說 vue3 發佈已經有一段時間瞭，但是呢，由於還處於優化完善階段，對於 vue3 開發項目的需求不是很高，主要還是以 vue2 開發為主，但是相信，vue3 進行項目開發是大勢所趨。

vue2 開發項目過程中，會存在代碼冗餘和結構雜亂問題，這是 vue3 主要解決的問題，vue3 可以將相關功能的代碼抽離分割在一起，方便開發者快速閱讀，提高項目代碼的可讀性和可維護性。

使用 setup 原因

在 vue3 版本中，引入瞭一個新的函數，叫做 setup，引入他的原因總結一下主要原因是：為瞭使用組合式 API，setup 函數是 Composition 的入口。

為什麼不繼續使用 vue2 當中的選項 API 瞭呢，原因也很簡單，像 data、computed、methods、watch 在組織邏輯大多數的情況下都是沒有問題的，但是當組件邏輯變得更加豐富，那麼邏輯處理關註點就會越來越多，很容易導致組件閱讀和維護成本提高，通過 setup 函數能夠將該部分邏輯抽離成函數，讓開發者不必在關心該部分的邏輯問題。

setup 用法

  • setup 函數是組合式 API 的入口。
  • setup 函數是啟動頁面後自動執行的函數。
  • 頁面中所涉及的變量和方法等，都需要寫在 setup 函數中。
  • 在 setup 中定義的變量、方法需要通過 return 返回出去才可以使用，否則無法在視圖中使用。
  • setup 函數位於 created 和 beforCreated 鉤子之前，用來代替這兩個鉤子。

setup 可以接受哪些參數

setup 函數可以接受 props、context，其中， props 由於是響應式數據，不能直接解構賦值，context 不是響應式數據，可以通過解構賦值，setup 函數必須返回一個對象，隻要返回對象，便可以向 vue2 的方式一樣使用返回的屬性或方法。

setup 詳解

setup 函數自動執行

上邊提到，setup 函數是頁面打開之後自動執行的一個方法，當頁面打開會自動執行 setup 函數當中的邏輯代碼。

<template>
  <div>
    <h1>setup 函數</h1>
  </div>
</template>
<script>
  export default {
    setup() {
      console.log('我是𝒆𝒅.')
    }
  }
</script>

打開頁面，可以看到我們輸出打印的 我是𝒆𝒅. 輸出在控制臺。

setup 函數定義變量

組件中所有的變量都要在 setup 函數中定義，並且需要在 setup 函數最後通過 return 返回，才可以像 vue2 一樣在模板中使用。

定義一個基本類型變量

在 setup 函數中，創建一個 name 參數，並且在頁面中渲染該字段的內容。

<template>
  <div>
    <h1>setup 函數</h1>
    <h1>名稱：{{name}}</h1>
  </div>
</template>
<script>
  export default {
    setup() {
      const name = '我是𝒆𝒅.'   // 定義一個基本類型變量
    }
  }
</script>

上面的代碼編寫完成，保存刷新頁面，發現名稱渲染出現問題，展示不出來，同時控制臺報錯告警。

出現這個問題的原因其實很簡單，如果從 vue2 轉到 vue3 的人很容易就遇到這種問題，因為上面提到過，在 setup 中創建的變量需要在 setup 函數最後通過 return 返回，才可以使用。

所以說修改上面的代碼：

<template>
  <div>
    <h1>setup 函數</h1>
    <h1>名稱：{{name}}</h1>
  </div>
</template>
<script>
  export default {
    setup() {
      const name = '我是𝒆𝒅.'   // 定義一個基本類型變量
      return { name }  // 將 name 參數拋出 【重要】
    }
  }
</script>

將創建的 name 參數拋出後，重新保存刷新頁面，數據渲染就正常瞭。

同樣，創建其他基本類型也是一樣的編寫方式。

<template>
  <div>
    <h1>setup 函數</h1>
    <h1>名稱：{{name}}</h1>
    <h1>年齡：{{age}}</h1>
    <h1>性別：{{sex}}</h1>
  </div>
</template>
<script>
  export default {
    setup() {
      const name = '我是𝒆𝒅.'   // 定義一個基本類型變量
      const age = 10
      const sex = true
      return { name, age, sex }
    }
  }
</script>

切記，聲明的變量如果需要在頁面中展示，必須使用 return 將聲明的變量拋出。

setup 創建復雜數據類型

setup 函數創建復雜數據類型，例如數組，對象之類的，和基本數據類型相同，也是，必須通過 return 拋出後，才可以在頁面中使用。

<template>
  <div>
    <h1>setup 函數</h1>
    <h1>名稱：{{boy.name}}</h1>
    <h1>年齡：{{boy.age}}</h1>
    <h1>性別：{{boy.sex}}</h1>
    <p v-for="(item, index) in todo" :key="index">{{item}}</p>
  </div>
</template>
<script>
  export default {
    setup() {
      const boy = {
        name: '我是𝒆𝒅.',
        age: 10,
        sex: true
      }
      const todo = ['彈吉他', '做作業', '練街舞']
      return { boy, todo }
    }
  }
</script>

保存刷新頁面，渲染正常。

setup 創建方法

除瞭變量，方法也是需要寫在 setup 函數當中的，同時和變量一樣，需要 return 拋出才可以使用。

創建方法的方式有兩種，第一種就是很常見的通過 function 的方式創建，另一種使用過箭頭函數的方式創建。

      // 一、通過 function 的方式創建
      function btn() {
        console.log('按鈕被點擊瞭')
      }

      // 二、通過箭頭函數的方式創建
      const btn = () => {
        console.log('按鈕被點擊瞭')
      }

以上兩種方式都可以創建方法。

例如：在頁面添加一個按鈕，點擊按鈕打印一段話在控制臺輸出。

<template>
  <div>
    <h1>setup 函數</h1>
    <el-button type="primary" @click="btn">按鈕</el-button>
  </div>
</template>
<script>
  export default {
    setup() {
      // 通過箭頭函數的方式創建
      const btn = () => {
        console.log('按鈕被點擊瞭')
      }
      return { btn }  // 將時間拋出
    }
  }
</script>

保存代碼，刷新頁面，點擊按鈕在控制臺輸出內容。

動態更新數據

在 vue2 裡面，可以通過雙向數據綁定動態修改頁面內容，vue3 當然也是可以的。

例如，頁面上有一個名字，點擊按鈕，修改名稱內容。

<template>
  <div>
    <h1>setup 函數</h1>
    <h1>姓名：{{name}}</h1>
    <el-button type="primary" @click="btn">修改內容</el-button>
  </div>
</template>
<script>
  export default {
    setup() {
      const name = '𝒆𝒅.'
      // 通過箭頭函數的方式創建
      const btn = () => {
        name = '我是𝒆𝒅.'
      }
      return { name, btn }
    }
  }
</script>

保存上面代碼，刷新頁面，點擊按鈕之後，發現姓名沒有變成 我是𝒆𝒅. 而是直接報錯瞭。

為什麼報錯瞭累，稍微預告一下子，需要使用 ref 和 reactive 函數。

到此這篇關於詳解Vue3中setup函數的使用教程的文章就介紹到這瞭,更多相關Vue3 setup函數內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：