Vue生命周期

2019-02-26 本文已影响1人极客传

Vue 官网的示意图：

vue生命周期

通过代码来测试 Vue 生命周期的执行顺序：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://unpkg.com/vue"></script>
    
</head>
<body>

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

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "this is vue lifecycle test" 
      },
       beforeCreate: function () {
              console.group('beforeCreate 创建前状态===============》');
              console.log("%c%s", "color:red", "this   : " + this); //[object Object]
              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 
        },
        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>

当声明一个 Vue 实例时，会先执行这个实例中的这几个方法：beforeCreate ——> created ——> beforeMount ——> mounted ；

beforeCreate，dom 元素 el 和 data 都未初始化；
created，初始化 data；
beforeMount，初始化 dom 元素 el；

当 data 中的 message 发生改变时，会执行 beforeUpdate 和 updated；并且在 beforeUpdate 状态， data 和 el 的内容就已经改变；

页面created，组件created，组件mounted，页面mounted。

【1】https://segmentfault.com/a/1190000011381906?utm_source=tag-newest

Vue生命周期

猜你喜欢

热点阅读