關于vue生命周期了解

在開發過程中總是遇到資料不能正常展示，有時是因為dom結構未生成等原因，是以此時對于生命周期的了解非常重要，

他可以幫助我們在合适的時機編寫需要的業務邏輯

vue執行個體的生命周期

beforeCreate

vue執行個體建立之前,此時vue執行個體的data屬性與dom結構都是未定義狀态,此時均不可使用

beforeCreate:function(){
    console.log('即将建立');
    console.log(this.$data);
    console.log(this.$el);
  }
           

輸出：

即将建立
  undefined
  undefined
           

create

beforeCreate之後的狀态是create，此時vue執行個體的data屬性已經建立，但是dom結構還是是未定義狀态，是以this.$el依舊是ubdefined

create:function(){
    console.log(this.$data);
    console.log(this.$el);
  }
           

輸出：

Object對象
  undefined
           

beforeMount

vue執行個體中的data資料挂載之前，此階段dom結建構立完畢,是以$el存在了，但是vue執行個體的data資料還沒有挂載到頁面中

beforeMount(){
    console.log('即将挂載');
    console.log(this.$el);
  }
           

輸出：

即将挂載
  <div id="app">{{name}}</div>

           

mounted

vue執行個體的data資料挂載完畢階段，此時{{name}}被渲染

mounted:function(){
    console.log('挂載完畢');
    console.log(this.$el);
  }
           

輸出：

挂載完畢
  <div id="app">name的真實值</div>
           

beforeUpdate

vue執行個體建立渲染完成後,此時vue執行個體的data資料發生變更，此時需要重新渲染頁面，即重新挂載新的data資料，

在重新渲染資料之前觸發beforeUpdate，$refs可以用于擷取之前的屬性值，

{{name}}原有值：’name的真實值’

{{name}}最新值：’name的最新值’

beforeUpdate:function(){
    console.log('資料發生變更，重新渲染頁面');
    let name = this.$refs.app.innerHTML;
    console.log('name:'+name);
  }
           

輸出：

資料發生變更，重新渲染頁面
  name的真實值
           

可以用于在發生變化重新渲染前進行資料處理

updated

可以用于編寫渲染完成時的邏輯

updated:function(){
    console.log('資料發生變更，重新渲染頁面完成');
    let name = this.$refs.app.innerHTML;
    console.log('name:'+name);
  }
           

輸出：

資料發生變更，重新渲染頁面完成
  name的最新值
           

beforeDestroy

調用執行個體的destroy( )方法可以銷毀目前的元件，在銷毀前，會觸發beforeDestroy鈎子,

銷毀前還可使得視圖發生變更

beforeDestroy:function(){
      //銷毀前需要處理的内容
  }
           

destroyed

成功銷毀之後，會觸發destroyed鈎子，此時該執行個體與其他執行個體的關聯已經被清除，它與視圖之間也被解綁。

此時在操作執行個體視圖也不會再發生變更

destroyed:function(){
    console.log('銷毀執行個體');
  }
           

輸出：

銷毀執行個體
           

actived

keep-alive元件被激活的時候調用

deactivated

keep-alive 元件停用時調用

var vue = new Vue({
        el: "#app",
        data: {
            name: 'name的真實值',
        },
        methods: {

        },
        mounted:function(){
        }
})