一篇文章带你深入学习 VueJS 的生命周期（珍藏版）

文章目录

一、生命周期图示
二、示例讲解Vue 的生命周期

一、生命周期图示

vue在生命周期中有这些状态，
beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed
在这里插入图片描述

二、示例讲解Vue 的生命周期

<!DOCTYPE html>
<html>

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

<body>
<div id="app">
    {{message}}
</div>
</body>
<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>

</html>

代码运行，然后打开浏览器，并进入它的 Console 面板：

vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容：

（1）beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
在这里插入图片描述
（2）created ：数据已经绑定到了对象实例，但是还没有挂载对象

首先会判断对象是否有 el 选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期

在这里插入图片描述

（3）beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的
在这里插入图片描述

可以看到此时是给vue实例对象添加$el成员，并且替换掉挂载的DOM元素。因为在之前console中打印的结果可以看到 beforeMount 之前 el 上还是 undefined。

（4）el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点

（5） mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el)生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作
在这里插入图片描述

在 mounted之前h1中还是通过{{message}}进行占位的，因为此时还有挂载到页面上，还是 JavaScript 中的虚拟DOM形式存在的。在mounted之后可以看到 dom 结构中的内容发生了变化。

（6）当我们的data发生改变时，会调用 beforeUpdate 和 updated 方
beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还
没有发生改变

updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到
dom上面，完成更新
在这里插入图片描述

（7） beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动

调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被毁。

也就是销毁的是创建的 vue 对象，并不会将页面内容销毁
在这里插入图片描述
通过生命周期的各个阶段，可以利用不同阶段的特性，实现一些功能

比如案例：待补充。。。