vue的生命周期鉤子函數(shù)怎么應(yīng)用

本篇內(nèi)容介紹了“vue的生命周期鉤子函數(shù)怎么應(yīng)用”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

在vue中，生命周期鉤子函數(shù)指的是當(dāng)生命周期經(jīng)歷創(chuàng)建和更新DOM的過程中，會在其中運(yùn)行的一些函數(shù)；在這些函數(shù)內(nèi)部可以創(chuàng)建和聲明vue組件。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

什么是vue的生命周期鉤子函數(shù)

每個(gè) Vue 實(shí)例都經(jīng)過一系列初始化步驟。從創(chuàng)建時(shí)設(shè)置數(shù)據(jù)到編譯模板，將實(shí)例裝載到DOM，最后在數(shù)據(jù)更改期間更新 DOM。這個(gè)過程被稱為 Vue 實(shí)例的生命周期，在默認(rèn)情況下，當(dāng)它們經(jīng)歷創(chuàng)建和更新 DOM 的過程中，會在其中運(yùn)行一些函數(shù)，在這些函數(shù)內(nèi)部創(chuàng)建并聲明 Vue 組件，這些函數(shù)稱為生命周期鉤子。

Vue 有八種生命周期方法：

• Before create

• Created

• Before mount

• Mounted

• Before update

• Updated

• Before destroy

• Destroyed

本文將使用測試組件，它位于 src 文件夾內(nèi)的 components 文件夾中。它應(yīng)該看起來像這樣：

// src/components/Test.vue
<template>
 <div>
 </div>
</template>
<script>
export default {
 name: ‘Test’,
 props: {
  msg: String
 }
}
</script>
<! — Add “scoped” attribute to limit CSS to this component only →
<style scoped>
h4 {
 margin: 40px 0 0;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

beforeCreate()

這是在 Vue.js 中調(diào)用的第一個(gè)生命周期鉤子，它在 Vue 實(shí)例初始化后立即被調(diào)用。

<script>
export default {
  name: 'Test',
  beforeCreate() {
    alert('beforCreate hook has been called');
    console.log('beforCreate hook has been called');
  }
}
</script>

你可以在開發(fā)環(huán)境中運(yùn)行程序來檢查界面。

npm run serve

注意，在加載組件之前，首先執(zhí)行的是在生命周期鉤子中寫入的 alert 語句。這正是函數(shù)在 Vue 引擎創(chuàng)建應(yīng)用程序組件之前調(diào)用的表現(xiàn)。此時(shí)正處在 beforeCreate 階段，尚未設(shè)置計(jì)算屬性、觀察者、事件、數(shù)據(jù)屬性和操作等內(nèi)容。

created()

正如你所猜測的那樣，這是在 beforeCreated 鉤子之后立即調(diào)用的第二個(gè)生命周期鉤子。在這個(gè)階段，Vue 實(shí)例已經(jīng)初始化，并且已經(jīng)激活了計(jì)算屬性、觀察者、事件、數(shù)據(jù)屬性和隨之而來的操作。

<script>
export default {
  name: 'Test',
  data() {
    return {
      books: 0
    }
    },
  created() {
    alert('Created hook has been called');
    console.log(`books is of type ${typeof this.books}`);
  }
}
</script>

如果你運(yùn)行該程序，你將會發(fā)現(xiàn)現(xiàn)在可以顯示數(shù)據(jù)類型。著在 beforeCreated 階段是不可能的，因?yàn)檫@時(shí)發(fā)生的激活還沒有發(fā)生。但是 Vue 實(shí)例在此階段尚未安裝，因此你無法在此處操作 DOM，元素屬性尚不可用。

beforeMount()

這是在 DOM 上掛載實(shí)例之前的那一刻，模板和作用域樣式都在這里編譯，但是你仍然無法操作DOM、元素屬性仍然不可用。

<script>
export default {
  beforeMount() {
    alert('beforeMount is called')
  }
}
</script>

mounted()

這是在 beforeMounted 之后調(diào)用的下一個(gè)生命周期鉤子。在安裝實(shí)例后會立即調(diào)用它。現(xiàn)在 app 組件或項(xiàng)目中的其他組件都可以使用了?，F(xiàn)在可以進(jìn)行數(shù)據(jù)適合模板、DOM元素替換為數(shù)據(jù)填充元素之類的操作了，元素屬性現(xiàn)在也可以使用了。

<script>
export default {
  mounted() {
    alert('mounted has been called'); 
   }
}
</script>

這是使用 Vue CLI 創(chuàng)建的項(xiàng)目的默認(rèn)位置，因?yàn)檎缥覀冊陂_頭看到的那樣，已經(jīng)在 main.js 文件中完成了安裝。這就是你有可能無法使用其他掛鉤的原因，因?yàn)槟J(rèn)情況下已經(jīng)為你安裝了實(shí)例。

beforeUpdate()

在這里對需要更新 DOM 的數(shù)據(jù)進(jìn)行更改。在進(jìn)行刪除事件偵聽器之類的更改之前，此階段適合任何邏輯。

<template>
 <div> {{hello}}
 </div>
</template>
<script>
 export default {
  name: 'Test',
  data() {
   return {
    books: 0,
    hello: 'welcome to Vue JS'
   }
 },
beforeUpdate(){
 alert('beforeUpdate hook has been called');
},
mounted(){
 this.$data.hello= 'lalalalallalalalalaalal';
 }
}
</script>

最初在 DOM 上有一個(gè)歡迎注釋，但是在掛載階段（可以操作DOM的地方），數(shù)據(jù)會發(fā)生變化，因此beforeUpdate 的 alert 會在更改之前出現(xiàn)。

updated()

在對 DOM 更新之后立即調(diào)用此生命周期鉤子，它在調(diào)用 beforeUpdate 掛鉤之后執(zhí)行?？梢栽诖颂巿?zhí)行與 DOM 相關(guān)的操作，但不建議更改此鉤子內(nèi)的狀態(tài)，因?yàn)?Vue 已經(jīng)專門為此提供了平臺。

<template>
 <div> {{hello}}
 </div>
</template>
<script>
 export default {
  name: 'Test',
  data() {
   return {
    books: 0,
    hello: 'welcome to Vue JS'
   }
  },
beforeUpdate(){
 alert('beforeUpdate hook has been called');
},
updated(){
 alert('Updated hook has been called');
},
mounted(){
 this.$data.hello= 'lalalalallalalalalaalal';
 }
}
</script>

beforeDestroy()

調(diào)用此 Vue 生命周期鉤子的時(shí)機(jī)是在 Vue 實(shí)例被銷毀之前，實(shí)例和所有函數(shù)仍然完好無損并在此處工作。在這個(gè)階段你可以執(zhí)行資源管理、刪除變量和清理組件。

<script>
export default {
name: 'Test',
 data() {
    return {
      books: 0
    }
  },
  beforeDestroy() {
    this.books = null
    delete this.books
  }
}
</script>

destroyed()

這是 Vue 生命周期的最后階段，其中所有的子 Vue 實(shí)例都已被銷毀，事件監(jiān)聽器和所有指令之類的東西在此階段已被解除綁定。在對象上運(yùn)行 destroy 之后調(diào)用它。

<script>
export default {
  destroyed() {
    this.$destroy() 
    console.log(this)
  }
}
</script>

當(dāng)你運(yùn)行程序并查看控制臺時(shí)，將看不到任何內(nèi)容。

“vue的生命周期鉤子函數(shù)怎么應(yīng)用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！