Vue生命週期

時間 2019-12-09

標籤 vue 生命週期简体版

原文原文鏈接

Vue生命週期

首先，每一個Vue實例在被建立以前都要通過一系列的初始化過程,這個過程就是vue的生命週期。首先看一張圖吧~這是官方文檔上的圖片相信你們必定都會很熟悉：vue

能夠看到在vue一整個的生命週期中會有不少鉤子函數提供給咱們在vue生命週期不一樣的時刻進行操做, 那麼先列出全部的鉤子函數，而後咱們再一一詳解:react

vue生命週期分爲初始化,運行中,銷燬一共8個鉤子函數算法

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

初始化

beforeCreate

解析:app

1.在組件建立前觸發,目的是爲了組件的生命週期和組件的事件作準備dom

2.數據沒有獲取到，真實dom也沒有渲染出來函數

3.項目而言沒有太大的用處，能夠在這一步進行數據請求（能夠修改數據） 4.執行一次this

<body>
    <div id="app">
        <Hello></Hello>
    </div>
    <template id="hello">
    <div>
      <p> {{ msg }} </p>
    </div>
  </template>
</body>


//beforeCreate()鉤子函數 表示在組件建立以前觸發（意思就是尚未這個組件，因此並不會獲取到數據）

Vue.component('Hello', {
        template: '#hello',
        data() {
            return {
                msg: 'hello 相親了'
            }
        },
        beforeCreate() {
            console.log('1-beforeCreate')
            console.log('data', this.msg)   //並無輸出數據
            console.log('真實dom', document.querySelector('p') //並無輸出真實的dom
        },

created

解析:code

1.組件建立結束component

2.數據獲得了，真實dom沒有渲染出來對象

3.能夠進行數據請求，提供一次數據修改的機會

4.執行了一次

Vue.component('Hello', {
        template: '#hello',
        data() {
            return {
                msg: 'hello 相親了'
            }
        },
          created() {
            console.log('2-created')
            console.log('data', this.msg)   //data,hello 相親了
            console.log('真實dom', document.querySelector('p'))   //沒法獲取
        },
     }

beforeMount

解析：

1.組件掛載前

2.任務:判斷el 判斷template

2.1若是沒有el：解析不往下執行，須要咱們手動掛載

2.2若是有el：那麼會判斷是否有template，有template，就會進行render函數

2.3若是沒有template：經過outerHTML 手動書寫模板

3.數據能夠獲取到，可是真實數據尚未渲染（由於beforeMount這一步 render函數尚未生效，也就是說，此時仍是虛擬的dom ）

4.能夠進行數據請求，也能夠數據修改

5.執行一次

解析：outerHTML

<body>
  <div class="box"></div>
</body>

<script>
  var box = document.querySelector('.box')
  // box.innerHTML = 'Gabriel Yan'
  box.outerHTML = 'Gabriel Yan'
</script>

注意：outHTML會幹掉外部標籤

beforeMount

beforeMount() {
            console.log('3-beforeMount')
            console.log('data', this.msg)
            console.log('真實dom', document.querySelector('p'))
        },

//Vue內部render函數用來解析jsx轉換成虛擬dom對象模型

mounted

1.組件掛載結束

2.數據得到了，真實dom也得到了

3.也能夠進行數據請求，數據修改

4.執行了一次

5.能夠進行真實dom的操做（能夠進行第三方庫的實例化）

mounted() {
            console.log('4-mounted')
            console.log('data', this.msg)
            console.log('真實dom', document.querySelector('p'))
        }

綜上總結：

1.數據請求通常寫在created裏面

2.第三方庫實例化通常在mounted中寫

運行中

觸發條件: 數據更新(數據修改的時候纔會觸發)

beforeUpdate

解析：

1.更新前

2.從新渲染vdom(虛擬dom)，而後經過diff算法比較兩次vdom，生成patch 補丁對象

3.這個鉤子函數更多的是進行內部操做，通常咱們不干預

4.只要數據改變就會被觸發（觸發屢次）

beforeUpdate () {
      console.log('beforeUpdate')
      console.log('data',this.msg)
      console.log('真實dom',document.querySelector('p'))
    },

Update

解析：

1.更新結束

2.真實dom獲得了,數據也獲得了（更新後的）

3.動態數據獲取（第三方庫實例化）

updated () {
      console.log('updated')
      console.log('data',this.msg)
      console.log('真實dom',document.querySelector('p'))
    }

beforedestroy

解析：

1.Vue的銷燬有兩種形式

1.1經過開關的形式

1.2經過調用$destroy 方法

1.3兩種方式的對比：

外部銷燬不只能銷燬組件,也能銷燬該組件的dom結構

內部銷燬只能銷燬組件,不能銷燬組件的dom結構

2.觸發條件:當組件銷燬時觸發

3.使用:用來善後，好比第三方實例的刪除，關閉計時器等

經過開關的形式

beforeDestroy () {
      console.log('beforeDestroy')  //組件被銷燬時候纔會觸發
    },
    destroyed () {
      console.log('destroyed')
    }

destroy

1.解析: 和beforeDestroy的功能都是同樣的沒什麼區別

（vue的生命週期是模仿react的 react已經將銷燬的兩個生命週期合併成一個）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。