vue生命周期

vue生命周期函数是vue实例在一个时间点会自动执行的函数

生命周期函数不需要写在method中

创建vue实例的过程

生命周期函数执行时间：

    // vue生命周期函数就是vue实例在某一个时间点会自动执行的函数,
    // 没有模板时会将el内容或者el内部的内容当做模板渲染
    var vm = new Vue({
      el: '#app',
      template: `<div>{{test}}</div>`,
      data: {
        test: 'hello world'
      },
      // 基础初始化后调用
      beforeCreate: function(){
        console.log('beforeCreate');
      },
      // 处理完双向绑定和依赖注入等内容，此时基本完成初始化
      created:function(){
        console.log('created');
      },
      // 实例中是否存在el或者template？有时，将模板进行渲染；没有时，把el当成模板进行渲染
      // 页面渲染template前
      beforeMount: function(){
        console.log('beforeMount',this.$el);
      },
      // 页面挂载之后
      mounted: function(){
        console.log('mounted',this.$el);
      },
      // vm.$destroy()被调用时执行beforeDestroyed()
      beforeDestroy(){
        console.log('deforeDestroy');
      },
      // 组件完全销毁完成后执行destroyed()
      destroyed(){
        console.log('Destroyed');
      },
      // 数据发生改变且未重新渲染 
      beforeUpdate(){
        console.log('beforeUpdate', this.$el);
      },
      // 数据发送改变且页面重新渲染完成 
      updated(){
        console.log('updated', this.$el);
      }
    })

vue其他的相关生命周期函数（此处官网内容中有较为详细的vue生命周期函数执行时间的讲解）

对于vue官网中vue实例相关内容学习：

vue实例在创建时会需要进行系列的初始化过程：设置数据监听，编译模板，将实例挂载到DOM上并且在数据变化时更新DOM，在这个过程中会运行相应的生命周期钩子函数可以让用户在不同阶段添加自己的代码。

注意： 不要在选项property或者回调上使用箭头函数，因为箭头函数没有this，this会作为变量一直向上级词法作用域查找。上级的this并不一定是你所需要的vue实例。

并且所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。

生命周期相关的执行时间:

初始化基础事件后，（实例完成初始化，数据观测和event/watcher配置之前）：beforeCreate
实例创建完成后立即被调用，此时实例已经完成相关配置（数据观测，property和方法的运算）但是还没开始挂载，$el不可用： created // TODO 为什么很多生命周期钩子（以下所有包括其他）在服务器渲染期间不可被调用？？？
页面渲染template前（在服务器端渲染期间不可被调用）： beforeMount
页面渲染template后 Mounted
数据更新但是页面未重新渲染（这里可以在更新之前访问现有的dom）：beforeUpdate
更新数据且页面完成重新渲染（此钩子被调用时组件dom已经更新）：updated

updated不会保证所有的子组件也被重绘，如果需要等整个视图都重绘完毕，可在其中使用vm.$nextTick

// TODO nextTick()作用？？？

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}

调用vm.$destroy() 后（这个钩子中实例仍然可用）: beforeDestroy
实例销毁后调用( 销毁watchers，子实例，移除事件监听器等 )：destroyed

其他的相关钩子：(//TODO 此处还不太懂keep-alive和以下三个钩子)

activated: keep-alive缓存的组件被激活时调用

keep-alive

动态组件
deactivated: keep-alive缓存的组件停用时调用
errorCaptured (err: Error, vm: Component, info) =>?boolean : 捕获到子孙组件的错误时被调用。err：错误对象，vm：发生错误的组件实例，info：包含错误来源信息的字符串。可返回false来阻止错误继续向上传递。

vue慕课网（去哪儿）学习（第三章 3.2 vue实例生命周期）

vue生命周期

对于vue官网中vue实例相关内容学习：