VUEコンポーネントの実装方法を詳しく解説-jsチュートリアル-php.cn

今回は、VUE コンポーネントのマウント方法について詳しく説明します。VUE コンポーネントをマウントする際の注意点は次のとおりです。

1. コンポーネントの 3 つのマウント方法

自動マウント

var app3 = new Vue({ el: '#app-3', data: { seen: true } }) ログイン後にコピー rree

2. ルーティング経由でパラメーターを渡す方法 3. レンダリングの場合: h =>

render:h=>h(App) は ES6 のアロー関数の記述メソッドであり、render:function(h){return h(App);} と同等です。

1 this は、this をラップする関数の外側のオブジェクトを指します。

2.h は、vue エコシステムの一般的な管理である creatElement のエイリアスです

3.template:' '、コンポーネント:{App} は一緒にまたは単独で使用されます render:h=>h( App ) は同じ効果を実現します

前者は タグを識別し、後者はアプリの p としてテンプレートの下の ID を直接解析します // 可以实现延迟按需挂载 {{name}}

挂载 var obj= {name: '张三'} var vm = new Vue({ data: obj }) function test() { vm.$mount("#app"); } 4. Vue.nextTick() の

DOM がレンダリングされたことを確認するために、DOM 関連の操作がこの関数のコールバックに書き込まれます。 nextTick の起源:

VUE のデータ駆動型ビューの更新により、は非同期です。つまり、データが変更されてもビューはすぐには更新されませんが、ビューを均一に更新する前に、同じイベント ループ内のすべてのデータ変更が完了するまで待機します。

nextTick トリガーのタイミング:

同じイベント ループ内でデータが変更された後、DOM は更新を完了し、nextTick(callback) のコールバックがすぐに実行されます。

アプリケーションシナリオ:

ビューが更新された後、新しいビューに基づいて操作する必要があります。

Vue ライフサイクルの created() フック関数で実行される DOM 操作は、Vue.nextTick() のコールバック関数に配置する必要があります。理由は何でしょうか? 理由は、create() フック関数の実行時に実際には DOM がまったくレンダリングされず、このときの DOM 操作が無駄になるため、DOM 操作用の JS コードを Vue に入れる必要があるためです。 nextTick() のコールバック関数内。これに対応するのが実装されたフック関数です。このフック関数が実行される時点ですべての DOM のマウントとレンダリングが完了しているため、このフック関数内で DOM 操作を実行しても問題はありません。 データ変更後に操作を実行する必要があり、この操作でデータの変更に応じて変更される DOM 構造を使用する必要がある場合、この操作を Vue.nextTick() のコールバック関数に含める必要があります。

イベント ループの簡単な概要:

同期コードの実行 -> 非同期キューを見つけて、実行スタックにプッシュし、callback1 を実行します [イベント ループ 1] ->実行スタック、実行コールバック 2 [イベント ループ] 2]...つまり、各非同期コールバックは最終的に独自の独立したイベント ループを形成します。 nextTick の起源と組み合わせると、各イベント ループで nextTick がトリガーされるタイミングを推測できます:

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 php中国語のウェブサイトです！ 推奨読書:

preload() 関数と画像アップロードの使用法

vue-cli 初期化 Webpack テンプレートのエラー報告