vue生命周期简概-优快云博客

本文链接：https://blog.youkuaiyun.com/fanwenrong/article/details/104679574

生命周期图
什么是生命周期：简单的讲就是数据驱动页面，页面在更新的过程就是生命周期。在这个过程中我们可以写我们的逻辑。
什么是生命周期钩子：生命周期钩子就是指的各个生命周期的回调函数

beforeCreate	组件属性刚创建完，组件计算属性之前例如data、watcher等
created	实例创建完成后被立即调用，属性已绑定，但是挂载阶段还没开始，$el 属性目前尚不可用
beforeMount	挂载开始之前被调用
mounted	挂载之后被调用，el 被新创建的 vm.$el 替换了
beforeUpdate	数据更新时调用，适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated	数据更改重新渲染和打补丁，在这之后会调用该钩子。
activated	被 keep-alive 缓存的组件激活时调用
deactivated	被 keep-alive 缓存的组件停用时调用
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed	销毁后调用
errorCaptured	当捕获一个来自子孙组件的错误时被调用。

<!DOCTYPE html>
<html>
<head>
    <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">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xiaofan 嘻嘻嘻" 
      },
       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 () {
            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); 
        },
        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 () {
            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)
        }
    })
</script>
</body>
</html>

console里执行以下命令，updata就会被触发
app.message= ‘yes !! I do’;
在这里插入图片描述
总结：
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载
beforeUpdate :该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
updataed:该钩子在服务器端渲染期间不被调用
activated/deactivated:该钩子在服务器端渲染期间不被调用。