Vue生命周期與setup深入詳解
生命周期
下圖對(duì)比了vue3(左)和vue2(右)的生命周期:vue3將destoryed該名成了unmounted,相應(yīng)的beforeDestory改成了beforeUnmounted。除此之外在組合式API中新增了個(gè)鉤子函數(shù):setup。它發(fā)生在beforeCreate之前。
先簡(jiǎn)單介紹下setup函數(shù):
- setup() 鉤子是在組件中使用組合式 API 的入口
- setup中沒(méi)有this
- setup函數(shù)只會(huì)在組件初始化的時(shí)候執(zhí)行一次
- setup函數(shù)在beforeCreate生命周期鉤子執(zhí)行之前執(zhí)行
生命周期函數(shù)
與vue2不同,vue3中使用生命周期函數(shù)需要先導(dǎo)入生命周期鉤子函數(shù),并且生命周期函數(shù)可以調(diào)用多次。
<script lang="ts"> import { onMounted } from 'vue' export default { setup() { onMounted(() => { console.log('mounted') }) onMounted(() => { console.log('mounted two') }) } } </script>
你也可以使用setup語(yǔ)法糖,看起來(lái)更簡(jiǎn)潔一些。
<script setup lang="ts"> import { onMounted } from 'vue' onMounted(() => { console.log('mounted') }) onMounted(() => { console.log('mounted two') }) </script> <style scoped> </style>
不同API的生命周期
選項(xiàng)式API | 組合式API |
---|---|
beforeCreate | 不需要(直接寫(xiě)到setup函數(shù)中) |
created | 不需要(直接寫(xiě)到setup函數(shù)中) |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeDestroyed | onBeforeUnmount |
destroyed | onUnmounted |
setup介紹
1. 訪問(wèn)Props
setup 函數(shù)的第一個(gè)參數(shù)是組件的 props。和標(biāo)準(zhǔn)的組件一致,一個(gè) setup 函數(shù)的 props 是響應(yīng)式的,并且會(huì)在傳入新的 props 時(shí)同步更新。
export default { props: { title: String }, setup(props) { // 注意這里不要解構(gòu)props,這樣會(huì)使解構(gòu)出來(lái)的變量失去響應(yīng)性。如果一定要解構(gòu)需要使用響應(yīng)式api轉(zhuǎn)發(fā)下。 console.log(props.title) } }
2. setup上下文
傳入 setup 函數(shù)的第二個(gè)參數(shù)是一個(gè) Setup 上下文對(duì)象。上下文對(duì)象暴露了其他一些在 setup 中可能會(huì)用到的值:
export default { setup(props, context) { // 透?jìng)?Attributes(非響應(yīng)式的對(duì)象,等價(jià)于 $attrs) console.log(context.attrs) // 插槽(非響應(yīng)式的對(duì)象,等價(jià)于 $slots) console.log(context.slots) // 觸發(fā)事件(函數(shù),等價(jià)于 $emit) console.log(context.emit) // 暴露公共屬性(函數(shù)) console.log(context.expose) } }
與props不同,上下文對(duì)象是非響應(yīng)式的,可以安全地解構(gòu):
export default { setup(props, { attrs, slots, emit, expose }) { ... } }
attrs 和 slots 的屬性都不是響應(yīng)式的。如果你想要基于 attrs 或 slots 的改變來(lái)執(zhí)行副作用,那么你應(yīng)該在 onBeforeUpdate 生命周期鉤子中編寫(xiě)相關(guān)邏輯。
expose函數(shù)用于顯式地限制該組件暴露出的屬性,當(dāng)父組件通過(guò)模板引用訪問(wèn)該組件的實(shí)例時(shí),將僅能訪問(wèn) expose 函數(shù)暴露出的內(nèi)容:
export default { setup(props, { expose }) { // 讓組件實(shí)例處于 “關(guān)閉狀態(tài)” // 即不向父組件暴露任何東西 expose() const publicCount = ref(0) const privateCount = ref(0) // 有選擇地暴露局部狀態(tài) expose({ count: publicCount }) } }
3. 與渲染函數(shù)一起使用
setup 也可以返回一個(gè)渲染函數(shù),此時(shí)在渲染函數(shù)中可以直接使用在同一作用域下聲明的響應(yīng)式狀態(tài):
import { h, ref } from 'vue' export default { setup() { const count = ref(0) return () => h('div', count.value) } }
返回一個(gè)渲染函數(shù)將會(huì)阻止我們返回其他東西。對(duì)于組件內(nèi)部來(lái)說(shuō),這樣沒(méi)有問(wèn)題,但如果我們想通過(guò)模板引用將這個(gè)組件的方法暴露給父組件,那就有問(wèn)題了。
可以通過(guò)調(diào)用 expose() 解決這個(gè)問(wèn)題:
import { h, ref } from 'vue' export default { setup(props, { expose }) { const count = ref(0) const increment = () => ++count.value expose({ increment }) return () => h('div', count.value) } }
這樣父組件可以通過(guò)模板引用來(lái)訪問(wèn)這個(gè) increment 方法。
到此這篇關(guān)于Vue生命周期與setup深入詳解的文章就介紹到這了,更多相關(guān)Vue生命周期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3+ElementPlus封裝圖片空間組件的門(mén)面實(shí)例
圖片空間是用于管理上傳圖片的工具,可以讓用戶方便地存儲(chǔ)、管理和調(diào)用圖片,提高工作效率,它通常具備多樣的樣式,但操作入口統(tǒng)一,便于使用,通過(guò)圖片空間組件,用戶能直接在其他模塊(例如商品圖片)中選擇所需圖片2024-09-09vue.js中toast用法及使用toast彈框的實(shí)例代碼
這篇文章主要介紹了vue.js中toast用法及使用toast彈框的實(shí)例代碼,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒加載,需要的朋友可以參考下2018-08-08vue3?setup語(yǔ)法糖各種語(yǔ)法新特性的使用方法(vue3+vite+pinia)
這篇文章主要介紹了vue3?setup語(yǔ)法糖各種語(yǔ)法新特性的使用(vue3+vite+pinia),本文主要是記錄vue3的setup語(yǔ)法糖的各種新語(yǔ)法的使用方法,需要的朋友可以參考下2022-09-09elementUi vue el-radio 監(jiān)聽(tīng)選中變化的實(shí)例代碼
這篇文章主要介紹了elementUi vue el-radio 監(jiān)聽(tīng)選中變化,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06vue 實(shí)現(xiàn)通過(guò)手機(jī)發(fā)送短信驗(yàn)證碼注冊(cè)功能
這篇文章主要介紹了vue 實(shí)現(xiàn)通過(guò)手機(jī)發(fā)送短信驗(yàn)證碼注冊(cè)功能的相關(guān)資料,需要的朋友可以參考下2018-04-04如何在vue3.0+中使用tinymce及實(shí)現(xiàn)多圖上傳文件上傳公式編輯功能
本文給大家分享tinymce編輯器如何在vue3.0+中使用tinymce及實(shí)現(xiàn)多圖上傳文件上傳公式編輯功能,tinymce安裝方法文中也給大家詳細(xì)介紹了,對(duì)vue tinymce實(shí)現(xiàn)上傳公式編輯相關(guān)知識(shí)感興趣的朋友跟隨小編一起學(xué)習(xí)下吧2021-05-05vue3中ts語(yǔ)法使用element plus分頁(yè)組件警告錯(cuò)誤問(wèn)題
這篇文章主要介紹了vue3中ts語(yǔ)法使用element plus分頁(yè)組件警告錯(cuò)誤問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04