快捷導(dǎo)航

Vue生命周期與setup深入詳解

更新時間：2022年09月26日 10:17:34 作者：super_wanan

Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載等?系列過程,稱這是Vue的?命周期

生命周期

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

先簡單介紹下setup函數(shù)：

setup() 鉤子是在組件中使用組合式 API 的入口
setup中沒有this
setup函數(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語法糖，看起來更簡潔一些。

<script setup lang="ts">
import { onMounted } from 'vue'
onMounted(() => {
    console.log('mounted')
})
onMounted(() => {
    console.log('mounted two')
})
</script>
<style scoped>
</style>

不同API的生命周期

選項式API	組合式API
beforeCreate	不需要（直接寫到setup函數(shù)中）
created	不需要（直接寫到setup函數(shù)中）
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroyed	onBeforeUnmount
destroyed	onUnmounted

setup介紹

1. 訪問Props

setup 函數(shù)的第一個參數(shù)是組件的 props。和標準的組件一致，一個 setup 函數(shù)的 props 是響應(yīng)式的，并且會在傳入新的 props 時同步更新。

export default {
  props: {
    title: String
  },
  setup(props) {
  	// 注意這里不要解構(gòu)props，這樣會使解構(gòu)出來的變量失去響應(yīng)性。如果一定要解構(gòu)需要使用響應(yīng)式api轉(zhuǎn)發(fā)下。
    console.log(props.title)
  }
}

2. setup上下文

傳入 setup 函數(shù)的第二個參數(shù)是一個 Setup 上下文對象。上下文對象暴露了其他一些在 setup 中可能會用到的值：

export default {
  setup(props, context) {
    // 透傳 Attributes（非響應(yīng)式的對象，等價于 $attrs）
    console.log(context.attrs)
    // 插槽（非響應(yīng)式的對象，等價于 $slots）
    console.log(context.slots)
    // 觸發(fā)事件（函數(shù)，等價于 $emit）
    console.log(context.emit)
    // 暴露公共屬性（函數(shù)）
    console.log(context.expose)
  }
}

與props不同，上下文對象是非響應(yīng)式的，可以安全地解構(gòu)：

export default {
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

attrs 和 slots 的屬性都不是響應(yīng)式的。如果你想要基于 attrs 或 slots 的改變來執(zhí)行副作用，那么你應(yīng)該在 onBeforeUpdate 生命周期鉤子中編寫相關(guān)邏輯。

expose函數(shù)用于顯式地限制該組件暴露出的屬性，當(dāng)父組件通過模板引用訪問該組件的實例時，將僅能訪問 expose 函數(shù)暴露出的內(nèi)容：

export default {
  setup(props, { expose }) {
    // 讓組件實例處于 “關(guān)閉狀態(tài)”
    // 即不向父組件暴露任何東西
    expose()
    const publicCount = ref(0)
    const privateCount = ref(0)
    // 有選擇地暴露局部狀態(tài)
    expose({ count: publicCount })
  }
}

3. 與渲染函數(shù)一起使用

setup 也可以返回一個渲染函數(shù)，此時在渲染函數(shù)中可以直接使用在同一作用域下聲明的響應(yīng)式狀態(tài)：

import { h, ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return () => h('div', count.value)
  }
}

返回一個渲染函數(shù)將會阻止我們返回其他東西。對于組件內(nèi)部來說，這樣沒有問題，但如果我們想通過模板引用將這個組件的方法暴露給父組件，那就有問題了。

可以通過調(diào)用 expose() 解決這個問題：

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)
  }
}

這樣父組件可以通過模板引用來訪問這個 increment 方法。

到此這篇關(guān)于Vue生命周期與setup深入詳解的文章就介紹到這了,更多相關(guān)Vue生命周期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: