在vue3.0中,setup函數是組合API的入口,用來定義資料和參數,語法為「setup(props,{slots,attrs,emit}){const name ='name'return {name}}」;函數只能是同步的不能是異步。
本文操作環境:windows10系統、Vue3版,DELL G3電腦。
一、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中文網其他相關文章!