目錄

一、beforeCreate

下面是一個beforeCreate的簡單使用示例：

在控制臺輸出'before create hook'。

二、created

下面是一個created的簡單使用示例：

在控制臺輸出'created hook'。

三、beforeMount

下面是一個beforeMount的簡單使用示例：

在真實DOM生成后，頁面會顯示'hello world'。

四、mounted

下面是一個mounted的簡單使用示例：

控制臺輸出組件的innerText。

五、beforeUpdate

下面是一個beforeUpdate的簡單使用示例：

在調用changeMessage方法之后，控制臺會輸出'before update message: before update hook message'。

六、updated

下面是一個updated的簡單使用示例：

在調用changeMessage方法之后，控制臺會輸出'updated message: hello world'。

七、beforeUnmount

下面是一個beforeUnmount的簡單使用示例：

在組件DOM節(jié)點從頁面中移除之前，控制臺會輸出'before unmount'。

八、unmounted

下面是一個unmounted的簡單使用示例：

在組件DOM節(jié)點從頁面中移除之后，控制臺會輸出'unmount'。

以上就是Vue3的各個生命周期鉤子函數的詳細解釋和使用方法，希望可以對讀者有所幫助。

---

Vue3是Vue.js的最新版本，其生命周期相對于Vue.js 2.x版本有所改變，本文將詳細介紹Vue3的各個生命周期，包括其執(zhí)行順序、作用、使用方法以及配合代碼案例

一、beforeCreate

beforeCreate鉤子函數是在Vue3實例被創(chuàng)建之初執(zhí)行的，此時Vue3實例中的數據和方法都還未初始化，因此在beforeCreate中無法訪問到組件的data、computed、methods等屬性。

下面是一個beforeCreate的簡單使用示例：

<script>
export default {beforeCreate() {console.log('before create hook')}
}
</script>

在控制臺輸出'before create hook'。

二、created

created鉤子函數是在Vue3實例被創(chuàng)建后立即執(zhí)行的，此時Vue3實例中的數據已經被初始化，但是模板還未生成，因此在created中無法訪問到組件的DOM節(jié)點。

下面是一個created的簡單使用示例：

<script>
export default {created() {console.log('created hook')}
}
</script>

在控制臺輸出'created hook'。

三、beforeMount

beforeMount鉤子函數在Vue3實例的模板掛載到真實DOM之前執(zhí)行，此時Vue3實例已經將數據和模板聯(lián)系起來，但是還未生成DOM節(jié)點，可以在此時修改數據，這樣修改后的數據會在真實DOM生成后立即呈現(xiàn)出來。

下面是一個beforeMount的簡單使用示例：

<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'before mount hook message'}},beforeMount() {this.message = 'hello world'}
}
</script>

在真實DOM生成后，頁面會顯示'hello world'。

四、mounted

mounted鉤子函數在Vue3實例的模板已經掛載到真實DOM之后執(zhí)行，此時Vue3實例已經生成了DOM節(jié)點，并將數據綁定到了DOM節(jié)點上，此時可以訪問組件的DOM節(jié)點。

下面是一個mounted的簡單使用示例：

<template><div ref="message">{{ message }}</div>
</template><script>
export default {mounted() {console.log(this.$refs.message.innerText)}
}
</script>

控制臺輸出組件的innerText。

五、beforeUpdate

beforeUpdate鉤子函數在Vue3實例的數據發(fā)生改變，但是還未更新DOM節(jié)點之前執(zhí)行，此時可以在beforeUpdate中獲取到新的數據和舊的數據，以及修改之前的DOM節(jié)點狀態(tài)。

下面是一個beforeUpdate的簡單使用示例：

<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'before update hook message'}},methods: {changeMessage() {this.message = 'hello world'}},beforeUpdate() {console.log(`before update message: ${this.message}`)}
}
</script>

在調用changeMessage方法之后，控制臺會輸出'before update message: before update hook message'。

六、updated

updated鉤子函數在Vue3實例的數據發(fā)生改變并且DOM節(jié)點已經更新之后執(zhí)行，此時可以訪問到最新的DOM節(jié)點狀態(tài)。

下面是一個updated的簡單使用示例：

<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'updated hook message'}},methods: {changeMessage() {this.message = 'hello world'}},updated() {console.log(`updated message: ${this.message}`)}
}
</script>

在調用changeMessage方法之后，控制臺會輸出'updated message: hello world'。

七、beforeUnmount

beforeUnmount鉤子函數在Vue3實例被銷毀之前執(zhí)行，此時可以對Vue3實例進行一些清理工作，如清除定時器、取消訂閱等操作。

下面是一個beforeUnmount的簡單使用示例：

<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'before unmount hook message'}},mounted() {setTimeout(() => {this.$el.remove()}, 3000)},beforeUnmount() {console.log('before unmount')}
}
</script>

在組件DOM節(jié)點從頁面中移除之前，控制臺會輸出'before unmount'。

八、unmounted

unmounted鉤子函數在Vue3實例被銷毀之后執(zhí)行，此時Vue3實例已經從內存中移除，可以在此時清除定時器、取消訂閱、釋放內存等操作。

下面是一個unmounted的簡單使用示例：

<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'unmount hook message'}},mounted() {setTimeout(() => {this.$el.remove()}, 3000)},unmounted() {console.log('unmount')}
}
</script>

在組件DOM節(jié)點從頁面中移除之后，控制臺會輸出'unmount'。

以上就是Vue3的各個生命周期鉤子函數的詳細解釋和使用方法，希望可以對讀者有所幫助。