快捷導(dǎo)航

詳解Vue3中setup函數(shù)的使用教程

更新時(shí)間：2022年07月04日 08:08:54 作者：ed。

在vue3版本中，引入了一個(gè)新的函數(shù)，叫做setup，引入他的原因總結(jié)一下主要原因是：為了使用組合式 API，setup函數(shù)是Composition 的入口。本文將詳細(xì)介紹一下Vue3中setup函數(shù)的使用教程，感興趣的可以了解一下

vue2 和 vue3 開發(fā)的區(qū)別

首先，目前來(lái)說(shuō) vue3 發(fā)布已經(jīng)有一段時(shí)間了，但是呢，由于還處于優(yōu)化完善階段，對(duì)于 vue3 開發(fā)項(xiàng)目的需求不是很高，主要還是以 vue2 開發(fā)為主，但是相信，vue3 進(jìn)行項(xiàng)目開發(fā)是大勢(shì)所趨。

vue2 開發(fā)項(xiàng)目過程中，會(huì)存在代碼冗余和結(jié)構(gòu)雜亂問題，這是 vue3 主要解決的問題，vue3 可以將相關(guān)功能的代碼抽離分割在一起，方便開發(fā)者快速閱讀，提高項(xiàng)目代碼的可讀性和可維護(hù)性。

使用 setup 原因

在 vue3 版本中，引入了一個(gè)新的函數(shù)，叫做 setup，引入他的原因總結(jié)一下主要原因是：為了使用組合式 API，setup 函數(shù)是 Composition 的入口。

為什么不繼續(xù)使用 vue2 當(dāng)中的選項(xiàng) API 了呢，原因也很簡(jiǎn)單，像 data、computed、methods、watch 在組織邏輯大多數(shù)的情況下都是沒有問題的，但是當(dāng)組件邏輯變得更加豐富，那么邏輯處理關(guān)注點(diǎn)就會(huì)越來(lái)越多，很容易導(dǎo)致組件閱讀和維護(hù)成本提高，通過 setup 函數(shù)能夠?qū)⒃摬糠诌壿嫵殡x成函數(shù)，讓開發(fā)者不必在關(guān)心該部分的邏輯問題。

setup 用法

setup 函數(shù)是組合式 API 的入口。
setup 函數(shù)是啟動(dòng)頁(yè)面后自動(dòng)執(zhí)行的函數(shù)。
頁(yè)面中所涉及的變量和方法等，都需要寫在 setup 函數(shù)中。
在 setup 中定義的變量、方法需要通過 return 返回出去才可以使用，否則無(wú)法在視圖中使用。
setup 函數(shù)位于 created 和 beforCreated 鉤子之前，用來(lái)代替這兩個(gè)鉤子。

setup 可以接受哪些參數(shù)

setup 函數(shù)可以接受 props、context，其中， props 由于是響應(yīng)式數(shù)據(jù)，不能直接解構(gòu)賦值，context 不是響應(yīng)式數(shù)據(jù)，可以通過解構(gòu)賦值，setup 函數(shù)必須返回一個(gè)對(duì)象，只要返回對(duì)象，便可以向 vue2 的方式一樣使用返回的屬性或方法。

setup 詳解

setup 函數(shù)自動(dòng)執(zhí)行

上邊提到，setup 函數(shù)是頁(yè)面打開之后自動(dòng)執(zhí)行的一個(gè)方法，當(dāng)頁(yè)面打開會(huì)自動(dòng)執(zhí)行 setup 函數(shù)當(dāng)中的邏輯代碼。

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

打開頁(yè)面，可以看到我們輸出打印的 我是????. 輸出在控制臺(tái)。

setup 函數(shù)定義變量

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

定義一個(gè)基本類型變量

在 setup 函數(shù)中，創(chuàng)建一個(gè) name 參數(shù)，并且在頁(yè)面中渲染該字段的內(nèi)容。

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

上面的代碼編寫完成，保存刷新頁(yè)面，發(fā)現(xiàn)名稱渲染出現(xiàn)問題，展示不出來(lái)，同時(shí)控制臺(tái)報(bào)錯(cuò)告警。

出現(xiàn)這個(gè)問題的原因其實(shí)很簡(jiǎn)單，如果從 vue2 轉(zhuǎn)到 vue3 的人很容易就遇到這種問題，因?yàn)樯厦嫣岬竭^，在 setup 中創(chuàng)建的變量需要在 setup 函數(shù)最后通過 return 返回，才可以使用。

所以說(shuō)修改上面的代碼：

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

將創(chuàng)建的 name 參數(shù)拋出后，重新保存刷新頁(yè)面，數(shù)據(jù)渲染就正常了。

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

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

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

setup 創(chuàng)建復(fù)雜數(shù)據(jù)類型

setup 函數(shù)創(chuàng)建復(fù)雜數(shù)據(jù)類型，例如數(shù)組，對(duì)象之類的，和基本數(shù)據(jù)類型相同，也是，必須通過 return 拋出后，才可以在頁(yè)面中使用。

<template>
  <div>
    <h1>setup 函數(shù)</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 = ['彈吉他', '做作業(yè)', '練街舞']
      return { boy, todo }
    }
  }
</script>

保存刷新頁(yè)面，渲染正常。

setup 創(chuàng)建方法

除了變量，方法也是需要寫在 setup 函數(shù)當(dāng)中的，同時(shí)和變量一樣，需要 return 拋出才可以使用。

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

      // 一、通過 function 的方式創(chuàng)建
      function btn() {
        console.log('按鈕被點(diǎn)擊了')
      }

      // 二、通過箭頭函數(shù)的方式創(chuàng)建
      const btn = () => {
        console.log('按鈕被點(diǎn)擊了')
      }

以上兩種方式都可以創(chuàng)建方法。

例如：在頁(yè)面添加一個(gè)按鈕，點(diǎn)擊按鈕打印一段話在控制臺(tái)輸出。

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

保存代碼，刷新頁(yè)面，點(diǎn)擊按鈕在控制臺(tái)輸出內(nèi)容。

動(dòng)態(tài)更新數(shù)據(jù)

在 vue2 里面，可以通過雙向數(shù)據(jù)綁定動(dòng)態(tài)修改頁(yè)面內(nèi)容，vue3 當(dāng)然也是可以的。

例如，頁(yè)面上有一個(gè)名字，點(diǎn)擊按鈕，修改名稱內(nèi)容。

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

保存上面代碼，刷新頁(yè)面，點(diǎn)擊按鈕之后，發(fā)現(xiàn)姓名沒有變成 我是????. 而是直接報(bào)錯(cuò)了。