Vue生命周期-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43876728/article/details/119148812

mounted 等于 onMounted

beforeUpdate 等于 onBeforeUpdate

Updated 等于 onUpdated

beforeUnmount 等于 onBeforeUnmount

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    let app = Vue.createApp({
        setup() {
        const { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onRenderTracked, onRenderTriggered } = Vue
            onBeforeMount(() => {
                console.log('onBeforeMount')
            })
            onMounted(() => {
                console.log('onMounted')
            })
            onBeforeUpdate(() => {
                console.log('onBeforeUpdate')
            })
            onUpdated(() => {
                console.log('onUpdated')
            })
            onBeforeUnmount(() => {
                console.log('onBeforeUnmount')
            })
            //每次渲染后重新响应式依赖
            onRenderTracked(() => {
                console.log('onRenderTracked')
            })
            //每次触发页面重新渲染时
            onRenderTriggered(() => {
                console.log('onRenderTriggered')
            })

        },
        template: `<div>hello </div>`,
    })
    app.mount('#root')
</script>
</html>

vue3 生命周期函数