3.VueJS生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程.

 

 

 

 vue在生命周期中有这些状态， beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue 在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子 中，vue实例到底执行了那些操作，我们先看下面执行的例子
 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>生命周期</title>
        <script src="js/vuejs-2.5.16.js"></script>
    </head>

    <body>
        <div id="app"> {{message}} </div>

        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    message: 'hello world'
                },
                beforeCreate: function() {
                    console.log(this);
                    showData('创建vue实例前', this);
                },
                created: function() {
                    showData('创建vue实例后', this);
                },
                beforeMount: function() {
                    showData('挂载到dom前', this);
                },
                mounted: function() {
                    showData('挂载到dom后', this);
                },
                beforeUpdate: function() {
                    showData('数据变化更新前', this);
                },
                updated: function() {
                    showData('数据变化更新后', this);
                },
                beforeDestroy: function() {
                    vm.test = "3333";
                    showData('vue实例销毁前', this);
                },
                destroyed: function() {
                    showData('vue实例销毁后', this);
                }

            });

            function realDom() {
                console.log('真实dom结构：' + document.getElementById('app').innerHTML);
            }

            function showData(process, obj) {
                console.log(process);
                console.log('data 数据：' + obj.message);
                console.log('挂载的对象：');
                console.log(obj.$el);
                realDom();
                console.log('------------------');
                console.log('------------------');
            }
            vm.message = "good...";
            vm.$destroy();
        </script>
    </body>
</html>

 

posted @ 2020-04-09 12:31  *乐途*  阅读(337)  评论(0)    收藏  举报