vue2.0生命周期—码虫

1.下面是我对生命周期的一些理解首先我们先看一下Vue生命周期图。

这里写图片描述

2.它可以分为八个阶段

钩子函数	函数描述
beforeCreate	组件实例刚被创建，组件属性计算之前，如data属性等。
created	组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在。
beforeMount	模板编译 \| 挂载之前。
mounted	模板编译 \| 挂载之后。
beforeUpdate	组件更新之前。
updated	组件更新之后。
beforeDestroy	组件销毁前调用。
destroyed	组件销毁后调用。

3.结合代码让我们更好的去理解钩子函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
            <script type="text/javascript" src="js/vue.min.js" ></script>
    </head>
<body>
  <div id="app">
    <p>{{message}}</p>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
     //beforeCreate执行时：data和el均未初始化，值为undefined
    beforeCreate: function() {
      console.group('------beforeCreate创建前状态-------------');
      console.log(this.$el); 
      console.log(this.$data); 
      console.log(this.message) 
    },
    //.created执行时：Vue 实例观察的数据对象data已经配置好，
    //已经可以得到app.message的值，但Vue 实例使用的根 DOM 元素el还未初始化
    created: function() {
      console.group('------created创建完毕状态-------------');
      console.log(this.$el); 
      console.log(this.$data);
      console.log(this.message); 
    },
    //beforeMount执行时：data和el均已经初始化，但从{{message}}等现象可以看出
    //此时el并没有渲染进数据，el的值为“虚拟”的元素节点
    beforeMount: function() {
      console.group('------beforeMount挂载前状态-------------');
      console.log(this.$el);
      console.log(this.$data); 
      console.log(this.message);  
    },
    //mounted执行时：此时el已经渲染完成并挂载到实例上
    mounted: function() {
      console.group('------mounted 挂载结束状态-------------');
      console.log(this.$el);    
      console.log(this.$data); 
      console.log(this.message); 
    },
    //修改vue实例的data时，vue就会自动帮我们更新渲染视图，
    //在这个过程中，vue提供了beforeUpdate的钩子给我们，
    //在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate。
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态-------------');
      console.log(this.$el);  
      console.log(this.$data); 
      console.log(this.message); 
      //测试DOM
      console.log('Dom结构是：' + document.getElementById('app').innerHTML);
    },
     //由于数据更改导致虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
     //当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。
     //然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

    updated: function () {
      console.group('updated 更新完成状态-------------');
      console.log(this.$el);
      console.log(this.$data); 
      console.log(this.message); 
       //测试DOM
      console.log('Dom结构是：' + document.getElementById('app').innerHTML);
    },
     //实例销毁之前调用。在这一步，实例仍然完全可用
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态-------------');
      console.log(this.$el);    
      console.log(this.$data); 
      console.log(this.message); 
    },
     //Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，
     //所有的事件监听器会被移除，所有的子实例也会被销毁。
    destroyed: function () {
      console.group('destroyed 销毁完成状态-------------');
      console.log(this.$el);  
      console.log(this.$data); 
      console.log(this.message)
    }
  })

</script>
</html>