vue3.0中setup怎么使用

本文小編為大家詳細介紹“vue3.0中setup怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“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 內容代碼量越來越大，但是始終圍繞著大而不亂，代碼結構清晰的路子前進。

讀到這里，這篇“vue3.0中setup怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。