首頁  >  文章  >  web前端  >  vue3.0中setup的用法是什麼

vue3.0中setup的用法是什麼

WBOY
WBOY原創
2022-02-25 14:43:224422瀏覽

在vue3.0中,setup函數是組合API的入口,用來定義資料和參數,語法為「setup(props,{slots,attrs,emit}){const name ='name'return {name}}」;函數只能是同步的不能是異步。

vue3.0中setup的用法是什麼

本文操作環境:windows10系統、Vue3版,DELL G3電腦。

vue3.0中setup的用法是什麼

一、setup函數的特性以及作用

  可以確定的是Vue3.0 是相容Vue2.x 版本的也就是說我們再日常工作中可以在Vue3 中使用Vue2.x 的相關語法但是當你真正開始使用Vue3 寫項目時你會發現他比Vue2.x 方便的多

  Vue3 的一大特性函數---- setup

  1、setup函數是處於生命週期函數beforeCreate 和Created 兩個鉤子函數之間的函數也就說在setup函數中是無法使用data 和methods 中的資料和方法的

  2、setup函數是Composition API(組合API)的入口

  3、在setup函數中定義的變數和方法最後都是需要return 出去的不然無法再模板中使用

二、setup函數的注意點:

  1、由於在執行setup函數的時候,還沒有執行Created 生命週期方法,所以在setup 函數中,無法使用data 和methods 的變數和方法

  2、由於我們無法在setup函數中使用data 和methods,所以Vue 為了避免我們錯誤的使用,直接將setup函數中的this修改成了undefined

  3、setup函數只能是同步的不能是異步的

用法1:結合ref使用

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

用法2:程式碼分割

Options API 和Composition API 

Options API 約定:

我們需要在props 裡面設定接收參數

我們需要在data 裡面設定變數

我們需要在computed 裡面設定計算屬性

我們需要在watch 裡面設定監聽屬性

我們需要在methods 裡面設定事件方法

你會發現Options APi 都約定了我們該在哪個位置做什麼事,這反倒在某種程度上也強制我們進行了程式碼分割。

現在用 Composition API,不再這麼約定了,於是乎,程式碼組織非常靈活,我們的控製程式碼寫在 setup 裡面即可。

setup函數提供了兩個參數props和context,重要的是在setup函數裡沒有了this,在vue3.0 中,訪問他們變成以下形式: this.xxx=》context.xxx

我們沒有了this 上下文,沒有了Options API 的強製程式碼分離。 Composition API 給了我們更廣闊的天地,那麼我們更需要謹慎自約起來。

對於複雜的邏輯程式碼,我們要更重視起 Composition API 的初心,不要吝嗇使用 Composition API 來分離程式碼,用來切割成各種模組導出。

我們期望是這樣的:

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

就算 setup 內容程式碼量越來越大,但是始終圍繞著大而不亂,程式碼結構清晰的路子前進。

【相關推薦:《vue.js教學》】

以上是vue3.0中setup的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn