快捷導(dǎo)航

vue3.0中setup的兩種用法實(shí)例

更新時(shí)間：2022年09月20日 10:43:24 作者：一只小小的蝸牛_

setup函數(shù)是一個(gè)新的組件選項(xiàng),作為在組件內(nèi)使用Composition Api的入口點(diǎn),下面這篇文章主要給大家介紹了關(guān)于vue3.0中setup的兩種用法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

這篇文章主要介紹了vue3.0中setup使用，本文通過(guò)兩種用法給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

什么是setup

setup是vue3新增的生命周期函數(shù)，setup的加入就是為了讓vue3使用組合式API（Composition API）。使用組合式API更符合大型項(xiàng)目的開(kāi)發(fā)，通過(guò)setup可以將該部分抽離成函數(shù),讓其他開(kāi)發(fā)者就不用關(guān)心該部分邏輯。

setup真香

setup位于beforeCreated之前,用于代替created 和beforeCreated。不僅是作為vue3新增的生命周期函數(shù)，還可以在setup中引入外部js文件方法，可在js中共用vue全部生命周期。

哈哈，是不是和之前的mixin很像？沒(méi)錯(cuò)，setup可以更好的拆分業(yè)務(wù)，只把需要用到的公共參數(shù)和方法return出去使用，而不像mixin一樣完全侵入原有vue文件，再也不用考慮參數(shù)方法重名問(wèn)題了，用到哪個(gè)取哪個(gè)，引入再多js也不怕。

一、setup函數(shù)的特性以及作用

可以確定的是 Vue3.0 是兼容 Vue2.x 版本的也就是說(shuō)我們?cè)偃粘９ぷ髦?可以在 Vue3 中使用 Vue2.x 的相關(guān)語(yǔ)法但是當(dāng)你真正開(kāi)始使用 Vue3 寫(xiě)項(xiàng)目時(shí) 你會(huì)發(fā)現(xiàn)他比 Vue2.x 方便的多

Vue3 的一大特性函數(shù) ---- setup

1、setup函數(shù)是處于生命周期函數(shù) beforeCreate 和 Created 兩個(gè)鉤子函數(shù)之間的函數(shù) 也就說(shuō)在 setup函數(shù)中是無(wú)法使用 data 和 methods 中的數(shù)據(jù)和方法的

2、setup函數(shù)是 Composition API（組合API）的入口

3、在setup函數(shù)中定義的變量和方法最后都是需要 return 出去的不然無(wú)法再模板中使用

二、setup函數(shù)的注意點(diǎn)：

1、由于在執(zhí)行 setup函數(shù)的時(shí)候，還沒(méi)有執(zhí)行 Created 生命周期方法，所以在 setup 函數(shù)中，無(wú)法使用 data 和 methods 的變量和方法

2、由于我們不能在 setup函數(shù)中使用 data 和 methods，所以 Vue 為了避免我們錯(cuò)誤的使用，直接將 setup函數(shù)中的this修改成了 undefined

3、setup函數(shù)只能是同步的不能是異步的

用法1:結(jié)合ref使用

<template>
 <div id="app">
  {{name}}
  <p>{{age}}</p>
  <button @click="plusOne()">+</button>
 </div>
</template>
  
<script>
import {ref} from 'vue'
export default {
 name:'app',
 data(){
  return {
   name:'xiaosan'
  }
 },
 setup(){
  const name =ref('小四')
  const age=ref(18)
  function plusOne(){
   age.value++ //想改變值或獲取值 必須.value
  }
  return { //必須返回 模板中才能使用
   name,age,plusOne
  }
 }
}
</script>

用法2：代碼分割

Options API 和 Composition API

Options API 約定：

我們需要在 props 里面設(shè)置接收參數(shù)

我們需要在 data 里面設(shè)置變量

我們需要在 computed 里面設(shè)置計(jì)算屬性

我們需要在 watch 里面設(shè)置監(jiān)聽(tīng)屬性

我們需要在 methods 里面設(shè)置事件方法

你會(huì)發(fā)現(xiàn) Options APi 都約定了我們?cè)撛谀膫€(gè)位置做什么事，這反倒在一定程度上也強(qiáng)制我們進(jìn)行了代碼分割。

現(xiàn)在用 Composition API，不再這么約定了，于是乎，代碼組織非常靈活，我們的控制代碼寫(xiě)在 setup 里面即可。

setup函數(shù)提供了兩個(gè)參數(shù) props和context,重要的是在setup函數(shù)里沒(méi)有了this,在 vue3.0 中，訪問(wèn)他們變成以下形式： this.xxx=》context.xxx

我們沒(méi)有了 this 上下文，沒(méi)有了 Options API 的強(qiáng)制代碼分離。Composition API 給了我們更加廣闊的天地，那么我們更加需要慎重自約起來(lái)。

對(duì)于復(fù)雜的邏輯代碼，我們要更加重視起 Composition API 的初心，不要吝嗇使用 Composition API 來(lái)分離代碼，用來(lái)切割成各種模塊導(dǎo)出。

我們期望是這樣的：

importuseAfrom'./a';
importuseBfrom'./b';
importuseCfrom'./c';
exportdefault{
 setup (props) {
 let{ a, methodsA } = useA();
 let{ b, methodsB } = useA();
 let{ c, methodsC } = useC();
 return{
   a,
    methodsA,
    b,
    methodsB,
    c,
    methodsC
  }
 }
}

就算 setup 內(nèi)容代碼量越來(lái)越大，但是始終圍繞著大而不亂，代碼結(jié)構(gòu)清晰的路子前進(jìn)。