生命周期

在vue中生命周期大的分為4個階段

1. create 創建 - 創建vue實例并初始化
2. mount 掛載 - 把vue實例和視圖進行關聯
3. update 更新（循環） - 監聽處理數據與視圖的變化
4. destroy 銷毀 - 銷毀vue實例

生命周期 - 鉤子函數

vue為上面的4個大的階段提供了一個可編程的借口，我們可以在這個4個的某個時段內寫入一些自己的邏輯，vue是通過配置中一個叫 生命周期 - 鉤子函數的選項來實現的：

• beforeCreate

  在實例初始化之后，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。

  <div id="app"></div>
  
  let vm = new Vue({
    el: '#app',
    data: {
      a: 1
    },
    beforeCreate() {
      console.log(this); //指向vue實例
      console.log(this.a); //undefined
    }
  })
  

• created

  實例已經創建完成之后被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

  let vm = new Vue({
    el: '#app',
    data: {
      a: 1
    },
    methods: {
      fn(){
        console.log("fn函數")
      }
    }
    created() {
      console.log(this.a); //1
      this.fn(); //fn函數
        console.log(this.$el) //undefined 
        //掛載還沒執行，不能操作頁面元素
    }
  })
  

• beforeMount

  把實例對象下的$el屬性指向設置中的el參數指定的元素

  let vm = new Vue({
    el: '#app',
    template: '<h1>Hello</h1>',
    created() {
        console.log(this.$el) //<div id="app"></div>
        //解析實例模板,這個解析后的模板還沒有和$el進行綁定
    }
  })
  console.log(vm.$el); //<h1>Hello</h1>
  

• mounted

  把解析后的模板和頁面元素進行綁定,用解析后的模板內容替換頁面指定的元素

  let vm = new Vue({
    el: '#app',
    template: '<h1>Hello</h1>',
    mounted() {
        console.log(this.$el) //<h1>Hello</h1>
    }
  })
  

• beforeUpdate

• updated

  當數據發生變化時觸發

  let vm = new Vue({
    el: '#app',
    template: '<h1>Hello</h1>',
    beforeUpdate() {
        console.log('beforeUpdate') 
    },
    updated() {
        console.log('updated') 
    }
  })
  
  vm.a = 10;
  //觸發： beforeUpdate updated
  

  ?

  動態組件

  <div id="app">
    <component :is="componentId"></component>
  </div>
  let vm = new Vue({
    el: '#app',
        data: {
          componentId: 'index'
        },
        components: {
          index: {
            template: '<h1>這是首頁</h1>'
            },
            list: {
                template: '<h1>這是列表</h1>'
            }
      }
  });
  

  vue的內置組件：component

  ? is: 指定要被渲染的組件

  <keep-alive>
    <component :is="currentView"></component>
  </keep-alive>
  

  當我們使用：keep-alive組件的時候，動態組件如果不被顯示，那么也不會銷毀，而是保留在內存中，只是給當前這個組件設置了一個停用狀態，而不會銷毀重建：觸發activated,deactivated;

  如果沒有使用keep-alive，那么這個時候不被顯示的話，該組件將被銷毀，觸發destroyed；