首頁> web前端> Vue.js> 主體

vuemounted用法

下次还敢
發布: 2024-05-08 17:09:18
原創
1032 人瀏覽過

Vue.js 的mounted 鉤子在元件首次插入DOM 後被調用,用於執行:1. AJAX 請求;2. 初始化第三方函式庫;3. 元素操作;4. 事件訂閱;5. 定時器設定。具體範例包括取得資料、設定事件監聽器、初始化 jQuery 等。

vuemounted用法

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章