vuemounted用法

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 中設定定時器或間隔器以定期執行任務。這對於更新組件狀態或觸發其他操作非常有用。

範例使用：

<code class="javascript">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);
}</code>

要注意的是，mounted 方法只會在元件首次插入真實 DOM 後被呼叫。如果元件被重新渲染或重新插入 DOM，則不會呼叫該方法。

以上是vuemounted用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！