建站
咨詢
售后
建站咨詢
新聞中心
注意
十多年的扎賚諾爾網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整扎賚諾爾建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“扎賚諾爾網(wǎng)站設(shè)計”,“扎賚諾爾網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。
所有的生命周期鉤子自動綁定 this 上下文到實例中，因此你可以訪問數(shù)據(jù)，對 property 和方法進(jìn)行運算。這意味著你不能使用箭頭函數(shù)來定義一個生命周期方法 (例如 created: () => this.fetchTodos()) 。這是因為箭頭函數(shù)綁定了父上下文，因此 this 與你期待的組件實例不同，this.fetchTodos 的行為未定義。
#beforeCreate
- 類型：
Function
- 詳細(xì)：
在實例初始化之后，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用。
- 參考：生命周期圖示
#created
- 類型：
Function
- 詳細(xì)：
在實例創(chuàng)建完成后被立即調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測 (data observer)，property 和方法的運算，watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el property 目前尚不可用。
- 參考：生命周期圖示
#beforeMount
- 類型：
Function
- 詳細(xì)：
在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。
該鉤子在服務(wù)器端渲染期間不被調(diào)用。
- 參考：生命周期圖示
#mounted
- 類型：
Function
- 詳細(xì)：
實例被掛載后調(diào)用，這時 Vue.createApp({}).mount() 被新創(chuàng)建的 vm.$el 替換了。如果根實例掛載到了一個文檔內(nèi)的元素上，當(dāng) mounted 被調(diào)用時 vm.$el 也在文檔內(nèi)。
注意 mounted 不會保證所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以在 mounted 內(nèi)部使用 vm。$nextTick：
mounted() {
this.$nextTick(function () {
// 僅在渲染整個視圖之后運行的代碼
})
}該鉤子在服務(wù)器端渲染期間不被調(diào)用。
- 參考：生命周期圖示
#beforeUpdate
- 類型：
Function
- 詳細(xì)：
數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動移除已添加的事件監(jiān)聽器。
該鉤子在服務(wù)器端渲染期間不被調(diào)用，因為只有初次渲染會在服務(wù)端進(jìn)行。
- 參考：生命周期圖示
#updated
- 類型：
Function
- 詳細(xì)：
由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁，在這之后會調(diào)用該鉤子。
當(dāng)這個鉤子被調(diào)用時，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)。如果要相應(yīng)狀態(tài)改變，通常最好使用計算屬性或偵聽器取而代之。
注意，updated 不會保證所有的子組件也都一起被重繪。如果你希望等到整個視圖都重繪完畢，可以在 updated 里使用 vm.$nextTick：
updated() {
this.$nextTick(function () {
// 僅在渲染整個視圖之后運行的代碼
})
}該鉤子在服務(wù)器端渲染期間不被調(diào)用。
- 參考：生命周期圖示
#activated
- 類型：
Function
- 詳細(xì)：
被 keep-alive 緩存的組件激活時調(diào)用。
該鉤子在服務(wù)器端渲染期間不被調(diào)用。
- 參考：
- 動態(tài)組件 - keep-alive
#deactivated
- 類型：
Function
- 詳細(xì)：
被 keep-alive 緩存的組件停用時調(diào)用。
該鉤子在服務(wù)器端渲染期間不被調(diào)用。
- 參考：
- 動態(tài)組件 - keep-alive
#beforeUnmount
- 類型：
Function
- 詳細(xì)：
在卸載組件實例之前調(diào)用。在這個階段，實例仍然是完全正常的。
該鉤子在服務(wù)器端渲染期間不被調(diào)用。
- 參考：生命周期圖示
#unmounted
- 類型：
Function
- 詳細(xì)：
卸載組件實例后調(diào)用。調(diào)用此鉤子時，組件實例的所有指令都被解除綁定，所有事件偵聽器都被移除，所有子組件實例被卸載。
該鉤子在服務(wù)器端渲染期間不被調(diào)用。
- 參考：生命周期圖示
#errorCaptured
- 類型：
(err: Error, instance: Component, info: string) => ?boolean
- 詳細(xì)：
當(dāng)捕獲一個來自子孫組件的錯誤時被調(diào)用。此鉤子會收到三個參數(shù)：錯誤對象、發(fā)生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯誤繼續(xù)向上傳播。
TIP
你可以在此鉤子中修改組件的狀態(tài)。因此在捕獲錯誤時，在模板或渲染函數(shù)中有一個條件判斷來繞過其它內(nèi)容就很重要；不然該組件可能會進(jìn)入一個無限的渲染循環(huán)。
錯誤傳播規(guī)則
- 默認(rèn)情況下，如果全局的
config.errorHandler被定義，所有的錯誤仍會發(fā)送它，因此這些錯誤仍然會向單一的分析服務(wù)的地方進(jìn)行匯報。 - 如果一個組件的繼承或父級從屬鏈路中存在多個
errorCaptured鉤子，則它們將會被相同的錯誤逐個喚起。 - 如果此
errorCaptured鉤子自身拋出了一個錯誤，則這個新錯誤和原本被捕獲的錯誤都會發(fā)送給全局的config.errorHandler。 - 一個
errorCaptured鉤子能夠返回false以阻止錯誤繼續(xù)向上傳播。本質(zhì)上是說“這個錯誤已經(jīng)被搞定了且應(yīng)該被忽略”。它會阻止其它任何會被這個錯誤喚起的errorCaptured鉤子和全局的config.errorHandler。
#renderTracked
- 類型：
(e: DebuggerEvent) => void
- 詳細(xì)：
跟蹤虛擬 DOM 重新渲染時調(diào)用。鉤子接收 debugger event 作為參數(shù)。此事件告訴你哪個操作跟蹤了組件以及該操作的目標(biāo)對象和鍵。
- 用法：
Cart({{ cart }})
const app = Vue.createApp({
data() {
return {
cart: 0
}
},
renderTracked({ key, target, type }) {
console.log({ key, target, type })
/* 當(dāng)組件第一次渲染時，這將被記錄下來:
{
key: "cart",
target: {
cart: 0
},
type: "get"
}
*/
},
methods: {
addToCart() {
this.cart += 1
}
}
})
app.mount('#app')#renderTriggered
- 類型：
(e: DebuggerEvent) => void
- 詳細(xì)：
當(dāng)虛擬 DOM 重新渲染為 triggered.Similarly 為renderTracked，接收 debugger event 作為參數(shù)。此事件告訴你是什么操作觸發(fā)了重新渲染，以及該操作的目標(biāo)對象和鍵。
- 用法：
Cart({{ cart }})
const app = Vue.createApp({
data() {
return {
cart: 0
}
},
renderTriggered({ key, target, type }) {
console.log({ key, target, type })
},
methods: {
addToCart() {
this.cart += 1
/* 這將導(dǎo)致renderTriggered調(diào)用
{
key: "cart",
target: {
cart: 1
},
type: "set"
}
*/
}
}
})
app.mount('#app')文章標(biāo)題：創(chuàng)新互聯(lián)VUE3教程：Vue3.0選項生命周期鉤子
URL地址：http://www.dlmjj.cn/article/dpoohdp.html
