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 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬，此時再改變屬性已經再也不起做用。