vue 生命周期的理解(created && mouted的区别)

生命周期先上图

什么是生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

每个钩子函数都在啥时间触发

beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

下面的代码建议复制后自己在控制台看效果。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title></title>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
    </head>

    <body>

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

        <script type="text/javascript">
            (function myFunction() {
                setTimeout(function() {
                    alert("Hello");
                }, 3000);
            })()
            var app = new Vue({
                el: '#app',
                data: {
                    message: "vue is frame"
                },
                beforeCreate: function() {
                    console.group('beforeCreate 创建前状态===============》');
                    console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                    console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
                    console.log("%c%s", "color:red", "message: " + this.message)
                },
                created: function() {
                    console.group('created 创建完毕状态===============》');
                    console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                    console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
                    console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
                },
                beforeMount: function() {
                    console.group('beforeMount 挂载前状态===============》');
                    console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
                    console.log(this.$el);
                    console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
                    console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
                },
                mounted: function() { 
                
                    //beforecreated：el 和 data 并未初始化 
                    //created:完成了 data 数据的初始化，el没有
                    //beforeMount：完成了 el 和 data 初始化 
                    //mounted ：完成挂载
                    //另外在beforeMount，我们能发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。
                    console.group('mounted 挂载结束状态===============》');
                    console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
                    console.log(this.$el);
                    console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                    console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
                },
                beforeUpdate: function() {
                    console.group('beforeUpdate 更新前状态===============》');
                    console.log("%c%s", "color:red", "el     : " + this.$el);
                    console.log(this.$el);
                    console.log("%c%s", "color:red", "data   : " + this.$data);
                    console.log("%c%s", "color:red", "message: " + this.message);
                },
                updated: function() {
                    console.group('updated 更新完成状态===============》');
                    console.log("%c%s", "color:red", "el     : " + this.$el);
                    console.log(this.$el);
                    console.log("%c%s", "color:red", "data   : " + this.$data);
                    console.log("%c%s", "color:red", "message: " + this.message);
                    console.log('updated:', document.getElementsByTagName('p').length)
                },
                beforeDestroy: function() {
                    console.group('beforeDestroy 销毁前状态===============》');
                    console.log("%c%s", "color:red", "el     : " + this.$el);
                    console.log(this.$el);
                    console.log("%c%s", "color:red", "data   : " + this.$data);
                    console.log("%c%s", "color:red", "message: " + this.message);
                },
                destroyed: function() { //销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。
                    console.group('destroyed 销毁完成状态===============》');
                    console.log("%c%s", "color:red", "el     : " + this.$el);
                    console.log(this.$el);
                    console.log("%c%s", "color:red", "data   : " + this.$data);
                    console.log("%c%s", "color:red", "message: " + this.message)
                }
            })
            //
//el:为了将实例化后的vue挂载到指定的dom元素中。
//如果在实例化vue的时候指定el，则该vue将会渲染在此el对应的dom中，反之，若没有指定el，则vue实例会处于一种“未挂载”的状态，此时可以通过$mount来手动执行挂载。
//
//注：如果$mount没有提供参数，模板将被渲染为文档之外的的元素，并且你必须使用原生DOM API把它插入文档中。
            //控制台输入更新状态app.message= 'yes !! I do'
            //app.$destroy();
            //https://segmentfault.com/a/1190000008010666?utm_source=tag-newest   摘自这个网页加上自己的注释
            //总结部分            beforecreate : 举个栗子：可以在这加个loading事件 
            //created ：在这结束loading，还做一些初始化，实现函数自执行 
            //mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
            //beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容
        </script>
    </body>

</html>

补充：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/yiyihuazi/article/details/103972525
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-08 10:33:14
阅读 ( 1030 )
分类：前端