欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue生命周期與setup深入詳解

 更新時(shí)間:2022年09月26日 10:17:34   作者:super_wanan  
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷(xiāo)毀的全過(guò)程,也就是new Vue() 開(kāi)始就是vue生命周期的開(kāi)始。Vue 實(shí)例有?個(gè)完整的?命周期,也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過(guò)程,稱(chēng)這是Vue的?命周期

生命周期

下圖對(duì)比了vue3(左)和vue2(右)的生命周期:vue3將destoryed該名成了unmounted,相應(yīng)的beforeDestory改成了beforeUnmounted。除此之外在組合式API中新增了個(gè)鉤子函數(shù):setup。它發(fā)生在beforeCreate之前。

先簡(jiǎn)單介紹下setup函數(shù):

  1. setup() 鉤子是在組件中使用組合式 API 的入口
  2. setup中沒(méi)有this
  3. setup函數(shù)只會(huì)在組件初始化的時(shí)候執(zhí)行一次
  4. 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ù)中)
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestroyedonBeforeUnmount
destroyedonUnmounted

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)文章

最新評(píng)論