vue生命周期

Vue实例的生命周期

就像一个人，从出生到死亡会经历童年、少年、青年、中年、老年各个阶段。如果你是上帝，你可以让他童年做着无忧无虑的事情、少年用功读书、青年到处游学、中年娶妻生子、老年儿孙满堂。

Vue.js让你有了上帝之手，可以操纵Vue实例的整个生命周期。

一、生命周期

• 每个 Vue 实例在被创建之前都要经过一系列的初始化过程。

• 例如，实例需要：

  • 配置数据观测(data observer)
  • 编译模版、挂载实例到 DOM
  • 在数据变化时更新 DOM

• 在这个过程中，实例也会调用一些生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。比如，created 这个钩子在实例被创建之后被调用：

  var vm = new Vue({
    data: {
      a: 1
    },
    created: function () {
      // `this` 指向 vm 实例
      console.log('a is: ' + this.a)
    }
  })
  // -> "a is: 1"
  

• 也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例。

二、Vue1.0-实例生命周期图示

vue1.0生命周期.png

• 生命周期中钩子函数介绍：

       beforeCreate: function () {
            // 在实例初始化之后，数据观测(data observer)
               和 event/watcher 事件配置之前被调用。
        },
        created: function () {
            // 实例已经创建完成之后被调用。
               在这一步，实例已完成以下的配置：数据观测(data observer)，
               属性和方法的运算， watch/event 事件回调。
               然而，挂载阶段还没开始，$el 属性目前不可见。
        },
        beforeCreate: function () {
            // 在实例初始化之后，数据观测(data observer) 和 event/watcher
               事件配置之前被调用。
        },
        mounted: function () {
            // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
              如果 root 实例挂载了一个文档内元素，当 mounted 被调用时
              vm.$el 也在文档内。
        },
        beforeUpdate: function () {
            // 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
            // 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
        },
        update: function () {
            // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
            // 当这个钩子被调用时，组件 DOM 已经更新，
               所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，
               你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
        },

        // <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
        activated: function () {
            // keep-alive 组件激活时调用。
        },
        deactivated: function () {
            // keep-alive 组件停用时调用。
        },

        beforeDestroy: function () {
            // 实例销毁之前调用。在这一步，实例仍然完全可用。
        },
        destroyed: function () {
            // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
               所有的事件监听器会被移除，所有的子实例也会被销毁。
        }

• 上图中比较常用的钩子：

created：vue实例被生成后的一个生命周期钩子函数。(页面初始化数据加载一般写这里);

beforeCreate：给个loading界面 created撤销loading;

beforeDestory：当移除当前组件的时候调用

destoryed：当前组件已被删除，清空相关内容

mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情

<script>

    window.onload = function () {

        var vm=new Vue({
            el:'body',
            data:{
                msg:'well'
            },

            created:function(){
                alert('实例已经创建');
            },
            beforeCompile:function(){
                alert('编译之前');
            },
            compiled:function(){
                alert('编译之后');
            },
            ready:function(){
                alert('插入到文档中');
            },
            beforeDestroy:function(){
                alert('销毁之前');
            },
            destroyed:function(){
                alert('销毁之后');
            }
        });

        /*点击页面销毁vue对象*/
        document.onclick=function(){
            vm.$destroy();
        };
    }

</script>

三、Vue2.0-实例生命周期图示

vue2.0生命周期.png