vue3.0中setup的用法是什麼

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

本文操作環境：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 '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 裡面設定接收參數

我們需要在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'./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 內容程式碼量越來越大，但是始終圍繞著大而不亂，程式碼結構清晰的路子前進。

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

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