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ù)：

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: