Vue.js 的mounted 鉤子在元件首次插入DOM 後被調用,用於執行:1. AJAX 請求;2. 初始化第三方函式庫;3. 元素操作;4. 事件訂閱;5. 定時器設定。具體範例包括取得資料、設定事件監聽器、初始化 jQuery 等。
Vue 中mounted 用法
mounted 是Vue.js 生命週期鉤子中的一個重要方法,它會在元件首次插入真實DOM 後被呼叫。這個方法用於在元件掛載後執行一些額外的操作,例如:
1. AJAX 請求
可以在mounted 中發起AJAX 請求以從伺服器取得數據。這對於在元件載入時動態填充資料非常有用。
2. 初始化第三方函式庫
可以使用 mounted 方法來初始化第三方函式庫,如 jQuery 或 D3 等。它確保這些庫在元件渲染後才被初始化。
3. 元素操作
可以在 mounted 中直接操作 DOM 元素,例如設定事件監聽器或取得元素尺寸。這樣做可以提高效能,因為這些操作僅在元件第一次渲染時執行。
4. 訂閱事件
可以使用 mounted 訂閱其他元件或 Vuex 儲存中的事件。這可以實現不同元件之間或元件和儲存之間的通訊。
5. 定時器和間隔器
可以在 mounted 中設定定時器或間隔器以定期執行任務。這對於更新組件狀態或觸發其他操作非常有用。
範例使用:
mounted() { // 发起 AJAX 请求 this.$http.get('/api/data').then(response => { this.data = response.data; }); // 初始化 jQuery $(this.$refs.container).draggable(); // 订阅事件 this.$on('update-data', () => { this.$http.get('/api/data').then(response => { this.data = response.data; }); }); // 设置定时器 setTimeout(() => { this.message = '欢迎使用 Vue.js!'; }, 1000); }
要注意的是,mounted 方法只會在元件首次插入真實 DOM 後被呼叫。如果元件被重新渲染或重新插入 DOM,則不會呼叫該方法。
以上是vuemounted用法的詳細內容。更多資訊請關注PHP中文網其他相關文章!