DBILITY

vue 3 instance lifecycle 본문

front-end & ui/vuejs

vue 3 instance lifecycle

DBILITY 2020. 11. 28. 16:40
반응형

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.global.min.js"></script>
</head>
<body>
<div id="app">
    {{ message }}
</div>
<script>
    const app = Vue.createApp({
        name: 'App',
        data() {
            return {
                message: 'Hello Vew.js!!'
            }
        },
        beforeCreate() {
            console.log('%d %s', 1, 'beforeCreate');
        },
        created() {
            console.log('%d %s', 2, 'created');
        },
        beforeMount() {
            console.log('%d %s', 3, 'beforeMount');
        },
        mounted() {
            console.log('%d %s', 4, 'mounted');
            this.message = 'Wow!'
        },
        beforeUpdate() {
            console.log('%d %s', 5, 'beforeUpdate');
        },
        updated() {
            console.log('%d %s', 6, 'updated');
        },
        beforeUnmount() {
            console.log('%d %s', 7, 'beforeUnmount');
        },
        unmounted() {
            console.log('%d %s', 8, 'unmounted');
        },
        renderTracked({key, target, type}) {
            console.log('%d %s %o', 9, 'renderTracked', {key, target, type})
        },
        renderTriggered({key, target, type}) {
            console.log('%d %s %o', 10, 'renderTriggered', {key, target, type})
        }
    });
    const vm = app.mount('#app');

    setTimeout(function () {
        app.unmount();
    }.bind(this), 2000);

</script>
</body>
</html>

index.html
0.00MB

반응형

'front-end & ui > vuejs' 카테고리의 다른 글

vuejs BASE_URL relative path build  (0) 2021.10.26
vue 3 image src binding  (0) 2021.08.06
vue 실습 01  (0) 2021.08.06
vue 3 vue-router,plugin 설치 및 project 적용  (0) 2021.08.04
vue 3 version project create  (0) 2021.07.30
공유하기 링크
'front-end & ui/vuejs' Related Articles more
Comments