vue生命周期（vue页面生命周期的运行逻辑）

时间 2019-12-10

标签 vue 生命周期页面运行逻辑繁體版

原文原文链接

一、生命周期图示

参考官网页面：Vue生命周期图示javascript

二、Vue 的生命周期包括四个状态（记住这四个）

一、creating 状态 ----vue 实例el被建立的过程
二、mounting 状态 ----挂到到真实的 DOM 节点，渲染出html页面
三、updating 状态 ----若是 data 中的数据改变就会触发对应组件的从新渲染
四、destroying 状态 ----实例销毁html

三、四个状态对应 8 个方法

beforeCreate ----el 和 data 并未初始化，el、data、message都仍是 undefined
created ----实例建立成功，完成了 data 数据的初始化，el是undefined，data和message已经定义vue

beforeMount ----完成了 el 和 data 初始化，date数据还未挂载到html，仍是{{ message }}
mounted ----模版中的 data 数据直接显示出来了，完成挂载java

beforeUpdate ----当 data 数据发生变化调用，发生在虚拟 DOM 从新渲染和打补丁以前
updated ----数据更改致使的虚拟 DOM 从新渲染和打补丁app

beforeDestroy ----在 vue 实例销毁以前调用，此时实例仍然可用
destroyed ----在 vue 实例销毁以后调用，vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁ide

四、代码解读

一、直接运行下面代码；
二、F12查看Console;
三、输入：app.message= 'this is update！！！！';
四、输入：app.$destroy() //实例销毁ui

<!DOCTYPE html>
<html>
<head>
    <title>vue生命周期</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 : "hello  world" 
      },
       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>