您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“vue3.0中setup怎么使用”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“vue3.0中setup怎么使用”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
在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電腦。
一、setup函數(shù)的特性以及作用
可以確定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是說我們再日常工作中 可以在 Vue3 中使用 Vue2.x 的相關(guān)語法 但是當(dāng)你真正開始使用 Vue3 寫項(xiàng)目時(shí) 你會發(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使用
<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 里面設(shè)置接收參數(shù)
我們需要在 data 里面設(shè)置變量
我們需要在 computed 里面設(shè)置計(jì)算屬性
我們需要在 watch 里面設(shè)置監(jiān)聽屬性
我們需要在 methods 里面設(shè)置事件方法
你會發(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 給了我們更加廣闊的天地,那么我們更加需要慎重自約起來。
對于復(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)介紹完畢,想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。