Vue ドキュメントでマウントされたライフサイクル関数の使用-Vue.js-php.cn

Vue ドキュメントでマウントされたライフサイクル関数の使用

王林

リリース： 2023-06-20 10:42:06

オリジナル

4938 人が閲覧しました

Vue は、シングルページアプリケーションや動的な Web ページの構築に広く使用されている人気のある JavaScript フレームワークです。 Vue フレームワークは多くのライフサイクル関数を提供しますが、その中の非常に重要な関数の 1 つがマウントされた関数です。この記事では、Vue ドキュメントでマウントされたライフサイクル関数の使用方法について説明します。

マウントされたライフサイクル関数は、マウント完了後の Vue インスタンスの実行関数です。マウントされた状態では、レンダリングされた DOM 要素にアクセスでき、それらに対して必要な操作を実行できます。具体的には、マウントされたライフサイクル関数は、Vue インスタンスが初期化された直後に呼び出されます。これは、インスタンスの準備ができている、つまり DOM 要素がレンダリングされたことを意味します。この関数は 1 回だけ呼び出されます。

マウントされたライフサイクル関数は通常、次のシナリオで使用されます:

In マウントされた関数では、要素オブジェクトまたはノードオブジェクトを取得し、それに対して必要な操作を実行できます。たとえば、querySelector メソッドを通じて特定の要素への参照を取得し、ajax を通じて非同期にデータを要求します。

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  mounted(){
    const app = document.querySelector("#app");  // 获取带有id="app"的DOM元素
    console.log(app);  
  }
}
</script>

ログイン後にコピー

マウントされたサードパーティのライブラリやプラグインを初期化することもできます。たとえば、ライフサイクル機能でプラグイン Vue-Router、Vue-i18n などを初期化します。

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter); // VueRouter插件初始化

new Vue({
  router: new VueRouter({ .... }),
  ...
  mounted(){ /* 插件初始化 */ } 
})

ログイン後にコピー

マウントされたライフサイクル関数では、Ajax リクエストを次の場所に送信できます。 Vue のインスタンスを使用してサーバーに Ajax リクエストを送信し、データ属性を更新します。

import axios from 'axios';

export default {
    data(){
        return{
            posts: []
        }
    },
    mounted(){
        axios.get('https://jsonplaceholder.typicode.com/todos').then(response => {
            this.posts = response.data;  // 获取远程JSON数据并更新组件的Data
        });    
    }
}

ログイン後にコピー

上の例では、リモートサーバーに todo リストデータをリクエストし、Vue のデータオブジェクトを更新します。このようにして、コンポーネント内のデータ関連のコンテンツがスムーズに表示されます。

マウントされたライフサイクル関数を使用して、ページがロードされた後に DOM に対して必要な操作を実行することもできます。たとえば、ページが読み込まれた後、要素の特定の位置までスクロールし、ボタンをクリックした後、特定のテキストボックスにフォーカスします。

export default {
    mounted(){
        const targetDiv = document.getElementById('scroll-to-this-div');
        window.scrollTo(0, targetDiv.offsetTop);  // 点击'滚动到此'按键后，将窗口滚动到'div'元素的顶部
    }
}

ログイン後にコピー

実装されたライフサイクル機能により、開発者は、Vue のライフサイクル制御下でユーザーに表示された DOM に必要な変更や操作を行うことができるため、ユーザーエクスペリエンスとインターフェイスの対話性が効果的に強化されます。

結論

この記事では主に、Vue ドキュメントに実装されたライフサイクル関数の使用方法を紹介します。まるで大海原を見つけたかのように、開発者は実装された関数内の DOM を自由に操作、変更できます。もちろん、Vue フレームワークの哲学を忘れてはなりません。Vue ドキュメントの問題をできるだけ少ないコストで解決し、ライフサイクルやその他のフック関数の使用を制限することが重要です。 Vue の他のライフサイクル関数はマウント後に実行されませんが、開発者は Time-Machine を制御するのと同じように、ページ全体のライフサイクルを完全に制御できます。

以上がVue ドキュメントでマウントされたライフサイクル関数の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。