Vue における onmounted の役割

onMounted は、Vue のコンポーネント マウント ライフサイクル フックです。その機能は、コンポーネントが DOM にマウントされた後に、DOM 要素への参照の取得、データの設定、HTTP リクエストの送信、イベント リスナーの登録などの初期化操作を実行することです。コンポーネントが更新された後、またはコンポーネントが破棄される前に操作を実行する必要がある場合は、他のライフサイクル フックを使用できます。

Vue における onMounted の役割

onMounted は、Vue ライフサイクル フックの 1 つであり、コンポーネントが DOM にマウントされた後に呼び出されることを意味します。その主な機能は次のとおりです:

コンポーネントのマウントに関連する操作を実行します

コンポーネントが DOM にマウントされた後、次のような初期化操作を実行できます:

• DOM 要素の参照を取得する
• データを設定するまたは属性
• HTTPリクエストを送信
• イベントリスナーを登録

データリクエストまたは非同期操作を完了

コンポーネントのマウント後にデータを取得したり、時間のかかる操作を実行する必要がある場合は、onMountedで実行できます。針。これにより、データまたは操作が完了したときに、コンポーネントがそれに応じて応答することが保証されます。

例:

<script>
import { onMounted } from 'vue'

export default {
  onMounted() {
    // 获取 DOM 元素的引用
    const el = this.$refs.myElement

    // 设置数据
    this.data = 'Hello world!'

    // 发送 HTTP 请求
    fetch('https://example.com/api/data').then((response) => {
      this.data = response.data
    })

    // 注册事件监听器
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    onResize() {
      // 窗口大小改变时响应
    }
  }
}
</script>

注:

• onMounted フックは、コンポーネントがマウントされるときに 1 回だけ呼び出されます。
• コンポーネントが更新された後に操作を実行する必要がある場合は、onUpdated フックを使用できます。
• コンポーネントが破棄される前にクリーンアップ操作を実行する必要がある場合は、onBeforeUnmount フックを使用できます。

以上がVue における onmounted の役割の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。