怎么使用vue3的setup()

本篇內(nèi)容主要講解“怎么使用vue3的setup()”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么使用vue3的setup()”吧!

從 vue2 升級(jí)到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的選項(xiàng)式API。由于選項(xiàng)式API一個(gè)變量存在于多處，如果出現(xiàn)問(wèn)題時(shí)，就需要去多個(gè)函數(shù)內(nèi)檢查，項(xiàng)目較大時(shí)，遇到問(wèn)題，增加排故的難度。所以 vue3 中新增了 setup 配置項(xiàng)，用它來(lái)寫(xiě)組合式API。

一、選項(xiàng)式API 和 組合式API 區(qū)別

有些同學(xué)稀里糊涂用了vue一年了，竟然不知道選項(xiàng)式api ！你是那個(gè)同學(xué)嗎？是的話(huà)，趕緊收藏起來(lái)。

vue2 中的 Options API 就是選項(xiàng)式api，一個(gè)中文，一個(gè)英文，怎么叫都可以。

在一個(gè) vue 文件內(nèi)，會(huì)有 data、methods、mounted、computed、watch 等等用來(lái)定義屬性和方法，共同來(lái)處理頁(yè)面邏輯，我們把這種方式稱(chēng)為 Options API。

示例1：計(jì)數(shù)器

<template>
 <div>
  <button @click="add">+</button>
   {{num}}
  <button @click="reduce">-</button>
 </div>
</template>
<script>
export default {
 data(){
  return {
   num:0
  }
 },
 methods:{
  add(){
   this.num++
  },
  reduce(){
   this.num--
  }
 }
}
</script>

觀(guān)察上述示例，我們發(fā)現(xiàn) num 值的處理涉及到 data 和 methods 兩個(gè)選項(xiàng)，業(yè)務(wù)處理的比較分散，項(xiàng)目小了看著清晰明了，但是項(xiàng)目變大之后，data 和 methods會(huì)包含很多屬性和方法，此時(shí)就很難分清哪個(gè)屬性對(duì)應(yīng)哪個(gè)方法。所以 vue3 新增 setup 寫(xiě)組合式API。

Vue3 的 Composition API 就是組合式api。

組合式api 就是一個(gè)功能所定義的 api 會(huì)放在一起，這樣子即使項(xiàng)目變大，功能增大，我們能夠很快找到功能相關(guān)的所有api，不像 Options API 功能分散，需要改動(dòng)時(shí)，需要多處查找過(guò)程比較困難。

示例2：計(jì)數(shù)器

<template>
 <div>
  <button @click="add">+</button>
   {{num}}
  <button @click="reduce">-</button>
 </div>
</template>
<script>
 import { ref } from 'vue'
 export default{
  setup(){
   const num = ref(1)
   return{
    num,
    add(){
     num.value++
    },
    reduce(){
     num.value--
   }
  }
 }
}
</script>

ref 是讓基礎(chǔ)數(shù)據(jù)類(lèi)型具備響應(yīng)式的，下篇文章具體介紹它的用法，需要的同學(xué)可以點(diǎn)個(gè)關(guān)注不迷路！

用一張圖告訴你它們的區(qū)別：

二、setup 具體怎么用？

2.1、setup 什么時(shí)候執(zhí)行？

setup 用來(lái)寫(xiě)組合式 api，從生命周期鉤子函數(shù)角度分析，相當(dāng)于取代了 beforeCreate 。會(huì)在 creted 之前執(zhí)行。

<script>
 export default{
  created(){
   console.log('created');
  },
  setup(){
   console.log('setup');
  }
 }
</script>

執(zhí)行之后，setup 打印結(jié)果始終在前邊。

2.2、setup 數(shù)據(jù)和方法如何使用？

示例3：直接定義使用變量

<template>
 {{a}}
</template>
<script>
 export default{
  setup(){
   const a = 0
  }
 }
</script>

運(yùn)行后發(fā)現(xiàn)結(jié)果異常：

runtime-core.esm-bundler.js?5c40:6584 [Vue warn]: Property "a" was accessed during render but is not defined on instance.

提示我們?cè)L問(wèn)的屬性 a 并沒(méi)有掛載到實(shí)例上。

setup 內(nèi)部的屬性和方法，必須 return 暴露出來(lái)，將屬性?huà)燧d到實(shí)例上，否則沒(méi)有辦法使用，上述代碼添加return：

<script>
 export default{
  setup(){
   const a = 0
   return{
    a
   }
  }
 }
</script>

2.3、setup 內(nèi)部有 this 嗎？

自己在 setup 中打印下 this ，返回結(jié)果 是undefined 。說(shuō)明在 setup 內(nèi)部是不存在 this ，不能掛載 this 相關(guān)的東西。

2.4、setup 內(nèi)鉤子函數(shù)如何使用？

vue3 是可以兼容 vue2 的選項(xiàng)式寫(xiě)法，所以 鉤子函數(shù)可以與 setup 并列存在，就相當(dāng)于 Options API。

示例4：

export default{
 setup(){
  console.log('setup');
 },
 mounted(){
  console.log('mounted');
 }
}

vue3 新增的 setup() 函數(shù)用來(lái)寫(xiě)組合式 api，所以不建議這樣寫(xiě)代碼。所以需要使用 onXXX 一族的函數(shù)來(lái)注冊(cè)鉤子函數(shù)，注冊(cè)成功之后調(diào)用時(shí)傳遞的是一個(gè)回調(diào)函數(shù)。

示例5：

import { onMounted } from "vue";
export default{
 setup(){
  const a = 0
  return{
   a
  },
  onMounted(()=>{
   console.log("執(zhí)行");
 })
 }
}

注冊(cè)的這些生命周期鉤子函數(shù)只能在 setup 期間同步使用，因?yàn)樗鼈円蕾?lài)全局內(nèi)部狀態(tài)來(lái)定位當(dāng)前組件實(shí)例，不在當(dāng)前組件下調(diào)用函數(shù)時(shí)會(huì)拋出錯(cuò)誤。

其他的鉤子函數(shù)是一樣的，根據(jù)需要引入就好了。

2.5、setup與鉤子函數(shù)關(guān)系

setup 與鉤子函數(shù)并列時(shí)，setup 不能調(diào)用生命周期相關(guān)函數(shù)，但生命周期可以調(diào)用 setup 相關(guān)的屬性和方法。

示例6：

<template>
 <button @click="log">點(diǎn)我</button>
</template>
<script>
export default{
 setup(){
  const a = 0
  return{
   a
  }
 },
 methods:{
  log(){
   console.log( this.$options.setup() );//返回一個(gè)對(duì)象
  }
 }
}
</script>

this.$options.setup() 返回的是一個(gè)大對(duì)象，該對(duì)象內(nèi)包含了 setup 內(nèi)的所有屬性和方法。

三、setup 參數(shù)

使用setup 時(shí)，它將接收兩個(gè)參數(shù)：props 和 context 。

3.1、props

第一個(gè)參數(shù)是 props ，表示父組件給子組件傳值，props 是響應(yīng)式的，當(dāng)傳入新的 props 時(shí)，自動(dòng)更新。

示例7：

export default{
 props: {
  msg: String,
  ans: String,
 },
 setup(props,context){
  console.log(props);//Proxy {msg: "著急找對(duì)象", ans: "你有對(duì)象嗎？"}
 },
}

因?yàn)?props 是響應(yīng)式的，不能使用 ES6 解構(gòu)，會(huì)消除prop的響應(yīng)特性，此時(shí)需要借用 toRefs 解構(gòu)。示例8：

import { toRefs } from "vue";
 export default{
  props: {
   msg: String,
   ans: String,
  },
  setup(props,context){
   console.log(props);
   const { msg，ans } = toRefs(props)
   console.log(msg.value); //著急找對(duì)象
   console.log(ans.value); //你有對(duì)象嗎？
  },
 }

使用組件時(shí)，經(jīng)常會(huì)遇到可選參時(shí)，有些地方需要傳遞某個(gè)值，有些時(shí)候不需要，該如何處理呢？

如果 ans 是一個(gè)可選參數(shù)，則傳入 props 中可能沒(méi)有 ans 。在這種情況下 toRefs 將不會(huì)為 ans 創(chuàng)建一個(gè) ref ，需要使用 toRef 代替它。

import { toRef } from "vue";
setup(props,context){
 let ans  = toRef(props ,'ans')// 不存在時(shí)，創(chuàng)建一個(gè)ans
 console.log(ans.value);
}

3.2、context

context 上下文環(huán)境，其中包含了 屬性、插槽、自定義事件三部分。

setup(props,context){
 const { attrs,slots,emit } = context
 // attrs 獲取組件傳遞過(guò)來(lái)的屬性值，
 // slots 組件內(nèi)的插槽
 // emit 自定義事件 子組件
}

attrs 是一個(gè)非響應(yīng)式對(duì)象，主要接收 no-props 屬性，經(jīng)常用來(lái)傳遞一些樣式屬性。

slots 是一個(gè) proxy 對(duì)象，其中 slots.default() 獲取到的是一個(gè)數(shù)組，數(shù)組長(zhǎng)度由組件的插槽決定，數(shù)組內(nèi)是插槽內(nèi)容。

setup 內(nèi)不存在this，所以 emit 用來(lái)替換 之前 this.$emit 的，用于子傳父時(shí)，自定義事件觸發(fā)。

示例9：

<template>
 <div :>
  <slot></slot>  
  <slot name="hh"></slot>
  <button @click="emit('getVal','傳遞值')">子向父?jìng)髦?lt;/button> 
 </div> 
</template>
<script>
import { toRefs,toRef } from "vue";
export default{
 setup(props,context){
  const { attrs,slots,emit } = context
  // attrs 獲取組件傳遞過(guò)來(lái) style 屬性
 console.log('slots',slots.default());//插槽數(shù)組
 console.log('插槽屬性',slots.default()[1].props); //獲取插槽的屬性   
 return{
  attrs,
  emit
   }
  },
 }
</script>

到此，相信大家對(duì)“怎么使用vue3的setup()”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！