【已解決】 Vue實例中生命周期created和mounted的區別詳解
最佳答案 2025-01-04 00:00
在Vue.js中，生命周期鉤子函數是用于在Vue實例的不同階段執行代碼的函數。created和mounted是兩個常用的生命周期鉤子，它們之間有一些顯著的區別。
created?鉤子
- 時機:?created鉤子在實例被創建之后立即調用。在這個階段，Vue實例已經完成了數據觀測（data observation），也就是說，數據已經可以被訪問和修改。
- 特點:
- 在created階段，模板還沒有被編譯，DOM還沒有被掛載（即還沒有生成對應的DOM元素）。
- 適合進行數據初始化、獲取數據、設置數據屬性等操作。
- 不能進行與DOM相關的操作，因為DOM還沒有被渲染。
- 可以訪問實例的data、computed、methods等屬性。
mounted?鉤子
- 時機:?mounted鉤子在模板被編譯并掛載到DOM上之后調用。在這個階段，Vue實例已經將模板渲染成了真實的DOM節點。
- 特點:
- 在mounted階段，DOM已經被渲染完成，可以進行與DOM相關的操作。
- 適合進行DOM操作、訪問DOM元素、初始化與DOM相關的第三方庫等。
- 通常用于需要在DOM加載完成后執行的任務。
使用場景對比
created:
- 適合初始化數據，例如從服務器獲取初始數據。
- 設置定時器或初始化一些不依賴DOM的插件。
mounted:
- 適合操作DOM元素，例如獲取元素的尺寸、綁定事件監聽器。
- 初始化依賴于DOM的插件或庫。
示例代碼
new Vue({ data() { return { message: 'Hello, Vue!' }; }, created() { console.log('Created: ', this.message); // 可以訪問數據屬性 // 不能進行DOM操作 }, mounted() { console.log('Mounted: ', this.$el); // 可以訪問DOM元素 // 可以進行DOM操作 } });
總結
- 在created鉤子中，實例已經創建，可以訪問和修改數據，但不能進行DOM操作。
- 在mounted鉤子中，DOM已經準備就緒，可以進行各種DOM操作。
感謝您的支持，請隨意打賞。您的贊賞將鼓勵我繼續創作！
Excel搬運工
- Excel大神
掃碼關注微信公眾號
