生命周期解读

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命周期'
    },
    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);//undefined 
      console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳'); 
    },
    created: function() {
    	debugger; //测试使用
      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); //已被初始化
      console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数');
      console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取');
      console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染');
    },
    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);//已被初始化  
      console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated');
      console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取');
     	console.log('接下来开始render，渲染出真实dom');
    },
    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); 
      console.log('beforeUpdate:重新渲染之前触发');
      console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染');  
    },
    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:数据已经更改完成，dom也重新render完成');
    },
    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); 
      console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...');
    },
    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);
      console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后');
    }
  })
</script>
</html>

总结如下：
生命周期图及demo验证显示总结：

调用beforeCreate之前，仅仅初始化了vue实例（都为undefined）；
调用created之前，已经进行了数据的初始化、属性和方法的运算以及watch/event事件回调，但还没有将其挂载（此时页面的数据已经获取到，如message=‘vue’ 的周期，el=‘undefined’）
*调用beforeMount之前，先判断vue实例是否有el属性

当vue实例没有el属性时，就会停止编译，即beforeMount，mounted钩子函数不会执行。此时只有手动调用vm.$(el)将el挂载在页面后，才能调用这两个钩子函数。
当vue实例有el属性时，如果vue实例中有template属性（用来包含组件的标签），会把它当做render函数处理，该子组件的内容会替换掉页面中定义的内容。

调用mounted之前，vue实例可以继续添加el属性，内容也会随之覆盖（此时，才将用户定义的内容显示在页面，之前只是用{{ message }}进行占位）
当vue实例的数据发生更新时，可以调用beforeUpdate和updated钩子函数
在vue实例销毁之前，可以调用beforeDestory钩子函数；在vue实例销毁后，可以调用destoryed钩子函数，此刻该vue实例指向的所有东西都会解绑定，所有的事件监听器都会被移除，所有的子实例也会被销毁。

Vue用法

Vue实例中钩子函数有：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed；
在创建vue实例时，能够调用的钩子函数：beforeCreate、created、beforeMount、mounted；
当Vue实例的数据(data)发生改变时,会进行对应组件的重新渲染，能够调用的钩子:beforeUpdate,updated;
在Vue实例销毁前能调用钩子beforeDestroy,销毁后能够调用钩子destroyed。

猜你喜欢