この記事では、VUE の重要な点と難しい点をまとめ、コードを詳しく共有します。興味のある友人は参照してください。
1. コンポーネントの 3 つのマウント方法
自動マウント
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})3. レンダリングの場合: h =>
render:h=>h(App) は ES6 のアロー関数の記述メソッドであり、render:function(h){return h(App);} と同等です。
1 this は、this をラップする関数の外側のオブジェクトを指します。 2.h は、vue エコシステムの一般的な管理である creatElement のエイリアスです 3.template:'// 可以实现延迟按需挂载
<p id="app"> {{name}} </p>
<button onclick="test()">挂载</button>
<script>
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 がトリガーされるタイミングを推定できます。
上記は、皆さんのためにまとめたものであり、将来的に皆さんのお役に立つことを願っています。 関連記事:
単体テストとE2EテストにAngular CLIを使用する方法 BuildとServeにAngular CLIを使用する方法の詳細な説明Angular CLIを使用してルートを生成する方法以上がVUE の主要な問題の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
