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

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

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

使用 setup 原因

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

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

setup 用法

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

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

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

setup 詳解

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

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

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

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

setup 函數(shù)定義變量

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

定義一個基本類型變量

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

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

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

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

所以說修改上面的代碼：

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

將創(chuàng)建的 name 參數(shù)拋出后，重新保存刷新頁面，數(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 = '我是????.'   // 定義一個基本類型變量
      const age = 10
      const sex = true
      return { name, age, sex }
    }
  }
</script>

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

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

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

<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>

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

setup 創(chuàng)建方法

除了變量，方法也是需要寫在 setup 函數(shù)當(dāng)中的，同時和變量一樣，需要 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)建方法。

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

<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 }  // 將時間拋出
    }
  }
</script>

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

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

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

例如，頁面上有一個名字，點(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>

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

為什么報錯了累，稍微預(yù)告一下子，需要使用 ref 和 reactive 函數(shù)。

到此這篇關(guān)于詳解Vue3中setup函數(shù)的使用教程的文章就介紹到這了,更多相關(guān)Vue3 setup函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論