前端面試題 Vue 中的 生命函式(鉤子函式)

一，生命周期(鉤子函式) 的簡介

生命周期函式 又叫 鉤子函式, 像它的名字一樣,這也是個函式,與其他 methods 中定義的函式不同的是,Vue 中已經規定好了他的觸發條件,而這些不同的觸發條件就是 一個 Vue 檔案從初始化到洗掉關閉必定經歷的一些時間點,而我們就可以通過這些時間點進行各種操作

真正的鉤子函式有很多,這里只介紹四類八個最常用的,如果想進行深入了解,請點擊一下到這里去看看,這是官網,如果你只是正常作業開發或者面試需要,那么這篇文章可能會對您有些幫助

常用的鉤子函式分為四類:

如下是一個 Vue 的生命周期順序:

二，四類鉤子函式的 觸發條件 及 使用方法

鉤子函式宣告的位置:

四類函式都是需要與 methods 同級宣告,并且不可被 methods 呼叫,以 updated 舉例如下

export default {
  data () {
  },
  methods: {
  },

  // 鉤子函式和 methods 同級宣告
  updated () {
    console.log('看到了嗎 宣告到這個位置');
  }
}

1. Lifecycle-初始化 beforeCreate 和 create

這個階段有兩個函式 beforeCreate 和 create

此階段就是在 瀏覽器 初始化 data 和 methods 中資料前和后的時間點 會分別呼叫beforeCreate 和 create

beforeCreate 代表的就是 Vue 中 data 和 methods 中定義的資料函式 添加到瀏覽器之前 這個時間點會觸發的函式; 用處不是太大,因為 data 的資料在此時還沒有添加到,因此無法操作資料,很少用,列印測驗一下 data 中的資料最后獲得的也是 undefined (定義方法如圖,可以親自測驗一下加深印象)

created 代表的就是 Vue 中 data 和 methods 中定義的資料函式 添加到瀏覽器初始化完畢之后 觸發的函式; 它此時 data 和 methods 中的資料方法都已經定義初始化完畢,已經可以呼叫其中的資料函式了,這也是一個最早的可以操作 資料 的鉤子函式

另外提一句,這個函式 created 和 mounted 經常用來發初始化ajax請求渲染頁面,但是根據每個人的習慣不同,用哪個的都有,我本人而言一般用 created ,除非涉及到獲取DOM元素否則很少用 mounted 這是因為 created 的請求更早,打開頁面不會出現閃的情況,網頁加載更快

export default {
  data () {
    return {
      bl: true
    }
  },
  methods: {
    change () {
      this.bl = !this.bl
    }
  },

  <!-- Vue內部添加data和method資料前 -->
  beforeCreate(){
    // 在這里 列印的結果是 undefined
    console.log(this.bl)
  }

  <!-- Vue內部添加data和method資料后 -->
  created(){
    // 在這里 列印的結果是 true
    console.log(this.bl)
  }
  
}

2.Lifecycle-掛載 beforeMount 和 mounted

這個階段就是將 Vue的資料 在記憶體中渲染為虛擬DOM模板, 將這個虛擬DOM模板渲染為真實的頁面DOM元素前和后這兩個時間點分別呼叫 beforeMount 和 mounted

beforeMount 簡單來說,就是記憶體里的虛擬DOM已經運算完畢,但是還沒有渲染到瀏覽器中,此時還無法看到頁面內容,也無法訪問DOM元素,用處也不大,如果硬是要訪問,會回傳 undefined

mounted 這個鉤子函式就是 虛擬DOM已經成功渲染到瀏覽器中了 此時呼叫mounted 中的內容,這個函式和 created 一樣可以用來發送初始化ajax請求,但是我本人更習慣用 created ,因為mounted 在生命周期中比較靠后,反應較慢,只有涉及到操作 組件 DOM節點 的時候才會用 mounted

beforeMount 不可以列印 DOM節點 ,mounted 可以,具體如圖:

?<template>
  <div id="app">
    <div ref="biaoqian">這是個DOM節點</div>
  </div>
</template>

<script>
export default {
  // dom節點 渲染瀏覽器之前
  beforeMount () {
    console.log('beforeMount 列印結果:',this.$refs.biaoqian);
  },

  // dom節點 渲染瀏覽器完成
  mounted(){
    console.log('mounted 列印結果:',this.$refs.biaoqian);
  }
}
</script>
?

3.Lifecycle-更新 beforeUpdate 和 updated

這個階段是 頁面DOM元素相關的資料更新 時,正在更新和更新完畢后兩個時間點 觸發 beforeUpdate 和 updated,非相關資料更新不會觸發

beforeUpdate 是頁面元素相關聯的資料已經改變,但是還未更改完畢的中間這個狀態,發生在虛擬DOM重新渲染和打補丁之前,具體就是記憶體中的更新程序這個時間點會觸發這個鉤子函式,此時還未渲染到瀏覽器中DOM,但此時如果列印被改動的資料仍然會列印出改動成功后的資料,也可以基于改動后的資料進一步改動,這樣下次再訪問這個資料就是最新的 如下圖

export default {
  data () {
    return {
      text: '我是還沒被改的文字'
    }
  },
  methods: {
    // 改動資料事件
    change () {
      this.text = '我被改了'
      console.log('change事件', this.text);    // 21行 列印結果
    }
  },

  // beforeUpdate 鉤子函式
  beforeUpdate () {
    this.text = '我又被改了,我不干凈了'
    console.log('改變時', this.text);    // 26行 列印結果
  }
}
</script>

updated 是資料改動完成并且成功重新打補丁渲染完成后呼叫的鉤子函式,此時獲取的資料一定是經過 改動 和 beforeUpdate 的最新資料,但是最好不要在updated 中改動資料,這樣可能會再次觸發 beforeUpdate 因此會造成死回圈重復執行,列印結果如下:

?export default {
  data () {
    return {
      text: '我是還沒被改的文字'
    }
  },
  methods: {
    // 改動資料事件
    change () {
      this.text = '我被改了'
      console.log('change事件', this.text); // 21行 列印結果
    }
  },

  // beforeUpdate 鉤子函式
  beforeUpdate () {
    this.text = '我又被改了,我不干凈了'
    console.log('改變時', this.text); // 26行 列印結果
  },

  // updated 鉤子函式
  updated () {
    console.log('改變之后', this.text); // 45行 列印結果
  },
}
</script>
?

4.Lifecycle-銷毀 beforeDestroy 和 destroyed

beforeDestroy 和 destroyed用法如上一樣,只不過他的觸發時機是 Vue實體銷毀的前后,destroyed用處多用于 清除定時器和 清空localstorage中的資料,beforeDestroy用的不多,很慚愧這兩個我也不是很了解