生命周期階段與鉤子函數
創建階段
beforeCreate()：實例初始化之后，數據觀測和事件配置之前調用。此時無法訪問到data、methods等屬性。created()：實例創建完成后調用。完成了數據觀測，屬性和方法的運算，watch/event事件回調。但是尚未掛載到DOM。
掛載階段
beforeMount()：模板編譯完成，即將掛載到DOM前調用。此時頁面呈現的是未經Vue編譯的DOM結構。mounted()：組件掛載到DOM后調用。可以操作真實DOM。
更新階段
beforeUpdate()：數據更新時，虛擬DOM重新渲染前調用。可以在這里進行狀態記錄或取消更新。updated()：由于數據更改導致的虛擬DOM重新渲染和打補丁，在這之后會調用。此時可以對更新后的DOM進行操作。
銷毀階段
beforeDestroy()：實例銷毀之前調用。在這一步，實例仍然完全可用。通常用來清理定時器、解除綁定等。destroyed()：實例銷毀后調用。調用后，所有的事件監聽器和所有子實例都會被移除。
鉤子函數的應用場景
- 在
created中發送異步請求獲取數據。 - 在
mounted中操作DOM元素或者初始化第三方庫。 - 在
beforeUpdate中可以獲取當前的狀態并在必要時進行修改，但要小心避免造成無限循環更新。 - 在
beforeDestroy中釋放資源，比如清除定時器或者解綁事件監聽器。
Vue.nextTick
Vue.nextTick() 是一個非常重要的工具，用于在下次 DOM 更新循環結束之后執行回調函數。當你修改了數據，但需要在 DOM 實際更新后進行某些操作時，就需要使用 nextTick。
?典型使用場景示例：獲取更新后的 DOM 元素尺寸
假設你有一個按鈕，點擊后切換一個 div 的顯示狀態（v-show），并希望在 div 顯示出來后立即獲取它的高度。
?錯誤做法（不使用 nextTick）
<template><div><button @click="showDiv">顯示 div 并獲取高度</button><div v-show="isVisible" ref="myDiv" style="background: lightblue;">這是一個動態顯示的 div，內容可能很多...</div></div>
</template><script>
export default {data() {return {isVisible: false}},methods: {showDiv() {this.isVisible = true; // 數據更新，觸發 DOM 更新// ? 錯誤：此時 DOM 還沒有更新！const divHeight = this.$refs.myDiv.offsetHeight;console.log('高度:', divHeight); // 可能輸出 0 或舊值}}
}
</script>在這個例子中，this.isVisible = true 觸發了 DOM 更新，但 Vue 的更新是異步批量處理的。當你立即訪問 this.$refs.myDiv.offsetHeight 時，DOM 還沒有完成渲染，因此你可能獲取不到正確的高度。
?正確做法（使用 nextTick）
<template><div><button @click="showDiv">顯示 div 并獲取高度</button><div v-show="isVisible" ref="myDiv" style="background: lightblue;">這是一個動態顯示的 div，內容可能很多...</div></div>
</template><script>
export default {data() {return {isVisible: false}},methods: {showDiv() {this.isVisible = true; // 數據更新// ? 正確：在 DOM 更新完成后執行this.$nextTick(() => {const divHeight = this.$refs.myDiv.offsetHeight;console.log('真實高度:', divHeight); // 輸出正確的高度// 你可以在這里進行基于 DOM 尺寸的后續操作});}}
}
</script>?為什么需要?nextTick？
- Vue 在檢測到數據變化后，不會立即更新 DOM，而是開啟一個隊列，異步地批量更新。
- 這樣可以避免在同一個事件循環中多次狀態變更導致的重復渲染，提高性能。
nextTick?回調會在 Vue 刷新 DOM 后執行，確保你能訪問到最新的 DOM 狀態。
)
