vueでマウントされた使い方

Vue.js のマウントされたフックは、コンポーネントが初めて DOM に挿入された後に呼び出され、次の処理を実行します。1. AJAX リクエスト、2. サードパーティ ライブラリの初期化、4. イベント。サブスクリプション; 5. タイマー設定。具体的な例には、データの取得、イベント リスナーの設定、jQuery の初期化などが含まれます。 Vue での

mounted の使用法

mounted は、Vue.js ライフサイクルフックの重要なメソッドであり、コンポーネントが実際の DOM に初めて挿入された後に呼び出されます。このメソッドは、コンポーネントがマウントされた後に次のような追加の操作を実行するために使用されます:

1. AJAX リクエスト

マウントされた状態で AJAX リクエストを開始して、サーバーからデータを取得できます。これは、コンポーネントのロード時にデータを動的に入力する場合に便利です。

2. サードパーティライブラリを初期化する

マウントされたメソッドを使用して、jQuery や D3 などのサードパーティライブラリを初期化できます。これにより、コンポーネントがレンダリングされるまでこれらのライブラリが初期化されなくなります。

3. 要素の操作

イベントリスナーの設定や要素の寸法の取得など、マウントされた DOM 要素を直接操作できます。これを行うと、これらの操作はコンポーネントが初めてレンダリングされるときにのみ実行されるため、パフォーマンスが向上します。

4. イベントをサブスクライブする

Mount を使用して、他のコンポーネントまたは Vuex ストレージのイベントをサブスクライブできます。これにより、異なるコンポーネント間、またはコンポーネントとストレージ間の通信が可能になります。

5. タイマーとインターバル

タスクを定期的に実行するためにマウントされたタイマーまたはインターバルを設定できます。これは、コンポーネントの状態を更新したり、他のアクションをトリガーしたりする場合に役立ちます。

使用例:

<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>

マウントされたメソッドは、コンポーネントが初めて実際の DOM に挿入された後にのみ呼び出されることに注意してください。コンポーネントが再レンダリングまたは DOM に再挿入された場合、このメソッドは呼び出されません。

以上がvueでマウントされた使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。