Vue生命周期

1.定义及作用

• 定义：每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等，不同的时期对应不同的周期；
• 生命周期钩子:不同周期开放出来的接口；
• 作用：可以在特定的时期添加需求，比如请求后台数据等；

2.生命周期钩子函数使用

• demo Code

  app = new Vue({
     el: '#app',
     data: {
         message : "vue demo"},          
     methods:{
         methodsTest(){
             return "methods test success"}},
     computed:{
         computedTest(){
             return "computed test success"}},
     beforeCreate:{……}，
     created：{……}，
     beforeMount：{……}，
     beforeUpdate：{……}，
     updated：{……}，
     beforeDestroy：{……}，
     destroyed：{……}，}
     
  setTimeout(function () {
    app.message= 'vue data changed';},0)
  
  setTimeout(function () {
     app.$destroy();
     app.message= 'vue data destroy';
   },10)

• 监测$el,data,computed,methods
  

1. beforeCreate周期内，组件实例还未被创建 ，各属性均未生成；

2. created周期内，Init injections and reactivity,这个阶段属性都已注入绑定，而且被$watch变成reactivity，但是$el还是没有生成，也就是DOM没有生成；

   //看看源码，创建Vue实例时候会通过this._init()初始化 
   function Vue (options) {
    if (process.env.NODE_ENV !== 'production' &&
   !(this instanceof Vue)
   ) {
   warn('Vue is a constructor and should be called with the `new` 
    keyword')
   }
   this._init(options) //初始化各个功能
   }
   
   //在_init()中有这样的一个执行顺序：其中initState()是在
   //beforeCreate和created之间
   initLifecycle(vm)
   initEvents(vm)
   initRender(vm)
   callHook(vm, 'beforeCreate')
   initInjections(vm) // resolve injections before data/props
   initState(vm) //初始化
   initProvide(vm) // resolve provide after data/props
   callHook(vm, 'created') 
   
   //在initState()做了这些事情：
   //所以Props，methods,data和computed的初始化都是在beforeCreated和created之间完成的。
   if (opts.props) initProps(vm, opts.props)//初始化Props
   if (opts.methods) initMethods(vm, opts.methods)//初始化methods
   if (opts.data) {
   initData(vm)} else {
   observe(vm._data = {}, true /* asRootData */)}//初始化data
   if (opts.computed) initComputed(vm, opts.computed)//初始化computed

3. beforeMount周期内，会判断options（new Vue()里面的大对象）里面是是否有$el，有的话再看options里面是否有template；若是没有，在等待vm.$mount(el)方法调用，为组件提供DOM容器，如果都提供了teamplate，则编译template模板，若是没有模板，则编译el里面的的元素。要注意的是此时只是编译了模板，还没有把属性挂载上去。
   
4. mounted周期内，属性均已挂载；
5. beforeUpdated，属性更新之前，注意此时属性已经发生变化 ；
6. updated，属性更新后；
7. beforeDestroy和destroyed，组件销毁前；实例销毁之前调用。在这一步，实例仍然完全可用。销毁后；Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁，此时再改变属性已经不再起作用。