一：生命周期的概念

? ? ? ? 生命周期是指從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載 Dom -> 渲染、更新 -> 渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期，它主要強調(diào)一個時間段。用一句話來概括就是：

Vue實例的生命周期: 從創(chuàng)建到銷毀的整個過程

二：鉤子函數(shù)

Vue框架內(nèi)置函數(shù),隨著組件的生命周期階段,自動執(zhí)行?

作用：特定的時間點執(zhí)行特定的操作?

三：vue2的生命周期

vue2的生命周期可以用一句話來劃分就是：四大階段，八個方法。

1.初始化階段（Creation）

????????1.beforeCreate：這是生命周期所執(zhí)行的第一個鉤子函數(shù)，執(zhí)行于組件實例被創(chuàng)建之初，data 和 methods 中的數(shù)據(jù)還沒有初始化。
????????2.created：在實例創(chuàng)建完成后被調(diào)用，此階段完成了數(shù)據(jù)觀測 (data observer)、屬性和方法的運算，以及 watch/event 事件的設(shè)置。但是此時還沒有掛載到 DOM 上。

? ? ? ? 3.代碼和效果如下：

<template>
  <div>
    <div id="test">{{name}}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '暴怒的代碼'
      }
    },
    beforeCreate() {
      console.log('------------------初始化階段------------------')
      //這里data 和 methods 中的數(shù)據(jù)還沒有初始化，所以輸出的應(yīng)該是undefined
      console.log(`這是beforeCreate的執(zhí)行:${this.name}`)
    },
    created() {
      //這里數(shù)據(jù)已經(jīng)初始化了，可以輸出data中的內(nèi)容
      console.log(`這是Create的執(zhí)行:${this.name}`)
      //因為在created（）中還沒有渲染到DOM頁面，所以在渲染前修改，選的數(shù)據(jù)是下面的內(nèi)容
      this.name = '在渲染到DOM之前就修改內(nèi)容'
    }
  }
</script>

?

2.掛載階段（Mounting）

? ? ? ? 1.beforeMount：模板渲染，相關(guān)的 render 函數(shù)首次被調(diào)用，模板已經(jīng)在內(nèi)存中編譯好了，但是尚未掛載到頁面中去。

? ? ? ? 2.mounted：在實例被掛載到 DOM 后調(diào)用，真實DOM生成，此階段完成了模板編譯并且將實例掛載到 DOM 上。

? ? ? ? 3.代碼和效果如下：

<template>
  <div>
    <div id="test">{{name}}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '暴怒的代碼'
      }
    },
    beforeCreate() {
      console.log('------------------初始化階段------------------')
      //這里data 和 methods 中的數(shù)據(jù)還沒有初始化，所以輸出的應(yīng)該是undefined
      console.log(`這是beforeCreate的執(zhí)行:${this.name}`)
    },
    created() {
      //這里數(shù)據(jù)已經(jīng)初始化了，可以輸出data中的內(nèi)容
      console.log(`這是Create的執(zhí)行:${this.name}`)
      //因為在created（）中還沒有渲染到DOM頁面，所以在渲染前修改，選的數(shù)據(jù)是下面的內(nèi)容
      this.name = '在渲染到DOM之前就修改內(nèi)容'
    },
    beforeMount() {
      console.log('------------------掛載階段------------------')
      //開始編譯數(shù)據(jù),但是當前數(shù)據(jù)只在內(nèi)存中渲染,并沒有真實的渲染到html頁面上
      console.log(`這是beforeMount的執(zhí)行:${document.getElementById('test').innerText}`)
    },
    mounted() {
      // 獲取到數(shù)據(jù),內(nèi)存中的數(shù)據(jù)真實的掛載到頁面中,Vue實例創(chuàng)建完成
      console.log(`這是mounted的執(zhí)行:${document.getElementById('test').innerText}`)
    }
  }
</script>

?

3.更新階段（Updating）

? ? ? ? 1.beforeUpdate：在數(shù)據(jù)更新之前被調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補丁之前，此階段頁面中渲染的數(shù)據(jù)還是舊的，但data里的數(shù)據(jù)是最新的，頁面尚未和最新數(shù)據(jù)保持同步。

? ? ? ? 2.updated：在數(shù)據(jù)更新完成后被調(diào)用，實例的 DOM 已經(jīng)更新。

? ? ? ? 3.代碼和效果如下：

<template>
  <div>
    <div id="test">{{name}}</div>
    <el-button @click="name='點擊更新的內(nèi)容'">更新內(nèi)容</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '暴怒的代碼'
      }
    },
    beforeCreate() {
      console.log('------------------初始化階段------------------')
      //這里data 和 methods 中的數(shù)據(jù)還沒有初始化，所以輸出的應(yīng)該是undefined
      console.log(`這是beforeCreate的執(zhí)行:${this.name}`)
    },
    created() {
      //這里數(shù)據(jù)已經(jīng)初始化了，可以輸出data中的內(nèi)容
      console.log(`這是Create的執(zhí)行:${this.name}`)
      //因為在created（）中還沒有渲染到DOM頁面，所以在渲染前修改，選的數(shù)據(jù)是下面的內(nèi)容
      this.name = '在渲染到DOM之前就修改內(nèi)容'
    },
    beforeMount() {
      console.log('------------------掛載階段------------------')
      //開始編譯數(shù)據(jù),但是當前數(shù)據(jù)只在內(nèi)存中渲染,并沒有真實的渲染到html頁面上
      console.log(`這是beforeMount的執(zhí)行:${document.getElementById('test').innerText}`)
    },
    mounted() {
      //獲取到數(shù)據(jù),內(nèi)存中的數(shù)據(jù)真實的掛載到頁面中,Vue實例創(chuàng)建完成
      console.log(`這是mounted的執(zhí)行:${document.getElementById('test').innerText}`)
    },
    beforeUpdate() {
      console.log('------------------更新階段------------------')
      //頁面上的數(shù)據(jù)還是以前的，內(nèi)存中的數(shù)據(jù)是最新的
      console.log(`這是beforeUpdate的執(zhí)行,頁面數(shù)據(jù):${document.getElementById('test').innerText}`)
      console.log(`這是beforeUpdate的執(zhí)行,data數(shù)據(jù):${this.name}`)
    },
    updated() {
      //頁面上的數(shù)據(jù)和內(nèi)存中的數(shù)據(jù)都是最新的
      console.log(`這是updated的執(zhí)行,頁面數(shù)據(jù):${document.getElementById('test').innerText}`)
      console.log(`這是updated的執(zhí)行,data數(shù)據(jù):${this.name}`)
    }
  }
</script>

?

4.銷毀階段（Destruction）

? ? ? ? 1.beforeDestroy:在實例銷毀之前調(diào)用，此時實例仍然完全可用，還沒有真正的執(zhí)行銷毀，vue從運行階段進入到銷毀階段。

? ? ? ? 2.destroyed:在實例銷毀后調(diào)用，此階段完成了實例的事件監(jiān)聽器和子組件的銷毀，vue上所有的實例都不可以用了。

? ? ? ? 3.代碼和效果如下：

<template>
  <div>
    <div id="test">{{name}}</div>
    <el-button @click="name='點擊更新的內(nèi)容'">更新內(nèi)容</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '暴怒的代碼'
      }
    },
    render(h) {
      return h('div', [
        h('h1', this.name),
        h('button', {
          on: {
            click: () => {
              alert('點擊了我')
            }
          }
        }, 'Click me')
      ]);
    },
    beforeCreate() {
      console.log('------------------初始化階段------------------')
      //這里data 和 methods 中的數(shù)據(jù)還沒有初始化，所以輸出的應(yīng)該是undefined
      console.log(`這是beforeCreate的執(zhí)行:${this.name}`)
    },
    created() {
      //這里數(shù)據(jù)已經(jīng)初始化了，可以輸出data中的內(nèi)容
      console.log(`這是Create的執(zhí)行:${this.name}`)
      //因為在created（）中還沒有渲染到DOM頁面，所以在渲染前修改，選的數(shù)據(jù)是下面的內(nèi)容
      this.name = '在渲染到DOM之前就修改內(nèi)容'
    },
    beforeMount() {
      console.log('------------------掛載階段------------------')
      //開始編譯數(shù)據(jù),但是當前數(shù)據(jù)只在內(nèi)存中渲染,并沒有真實的渲染到html頁面上
      console.log(`這是beforeMount的執(zhí)行:${document.getElementById('test').innerText}`)
    },
    mounted() {
      //獲取到數(shù)據(jù),內(nèi)存中的數(shù)據(jù)真實的掛載到頁面中,Vue實例創(chuàng)建完成
      console.log(`這是mounted的執(zhí)行:${document.getElementById('test').innerText}`)
    },
    beforeUpdate() {
      console.log('------------------更新階段------------------')
      //頁面上的數(shù)據(jù)還是以前的，內(nèi)存中的數(shù)據(jù)是最新的
      console.log(`這是beforeUpdate的執(zhí)行,頁面數(shù)據(jù):${document.getElementById('test').innerText}`)
      console.log(`這是beforeUpdate的執(zhí)行,data數(shù)據(jù):${this.name}`)
    },
    updated() {
      //頁面上的數(shù)據(jù)和內(nèi)存中的數(shù)據(jù)都是最新的
      console.log(`這是updated的執(zhí)行,頁面數(shù)據(jù):${document.getElementById('test').innerText}`)
      console.log(`這是updated的執(zhí)行,data數(shù)據(jù):${this.name}`)
    },
    beforeDestroy() {
      console.log('------------------銷毀階段------------------')
      // 仍可以使用data與method方法
      console.log(`這是beforeDestroy的執(zhí)行:${this.name}`)
    },
    destroyed() {
      // 已經(jīng)銷毀data與method方法
      console.log(`這是destroyed的執(zhí)行:${this.name}`)
    },
  }
</script>

?

5.生命周期圖解

6.兩個特殊的生命周期鉤子函數(shù)?

????????vue2中有兩個特殊的生命周期鉤子函數(shù)，

• activated：?keep-alive 組件專屬，組件激活時調(diào)用該函數(shù)。
• deactivated：keep-alive 組件專屬，組件被銷毀時調(diào)用該函數(shù)。

總結(jié)?

? ? ? ? ?生命周期是vue2中一個很重要的知識點，同時也是面試中容易問到的高頻面試點。熟練掌握了vue2的生命周期，可以讓我們在項目開發(fā)過程中少走很多彎路，減少很多莫名其妙的bug，所以，希望本文能夠?qū)Ω魑恍』锇橛兴鶐椭叮?/p>

另：附上項目的Gitee源碼，地址如下

vue2全家桶練習: 包含vue2下使用router路由跳轉(zhuǎn)，vuex狀態(tài)管理，inject注入，minixs混入，watch監(jiān)聽https://gitee.com/qianchen12138/vue2-family-bucket-practice文章來源地址http://www.zghlxwxcb.cn/news/detail-767426.html

到了這里，關(guān)于vue2的生命周期詳解（代碼演示+源碼）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！