本文小編為大家詳細(xì)介紹“vue3.0中setup怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue3.0中setup怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)建站專注于沁縣企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站制作。沁縣網(wǎng)站建設(shè)公司,為沁縣等地區(qū)提供建站服務(wù)。全流程按需求定制開發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

在vue3.0中，setup函數(shù)是組合API的入口，用于定義數(shù)據(jù)和參數(shù)，語法為“setup(props,{slots,attrs,emit}){const name ='name'return{name}}”；該函數(shù)只能是同步的不能是異步。

本文操作環(huán)境：windows10系統(tǒng)、Vue3版，DELL G3電腦。

vue3.0中setup的用法是什么

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

可以確定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是說我們再日常工作中 可以在 Vue3 中使用 Vue2.x 的相關(guān)語法 但是當(dāng)你真正開始使用 Vue3 寫項(xiàng)目時(shí) 你會(huì)發(fā)現(xiàn)他比 Vue2.x 方便的多

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

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

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

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

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

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

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

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

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

用法2：代碼分割

Options API 和 Composition API

Options API 約定：

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

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

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

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

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

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

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

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

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

對(duì)于復(fù)雜的邏輯代碼，我們要更加重視起 Composition API 的初心，不要吝嗇使用 Composition API 來分離代碼，用來切割成各種模塊導(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)容代碼量越來越大，但是始終圍繞著大而不亂，代碼結(jié)構(gòu)清晰的路子前進(jìn)。

讀到這里，這篇“vue3.0中setup怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。