2020先端知識点まとめ(五)-vue

1、vueのコンポーネント通信?

親伝子用props

親用子用ref

子調親用$emit

無関係用Bus

2、vuex?

コンポーネント通信ライブラリは、サブコンポーネントがpropsを変更できない弊害などのmutations同期動作を回避することができ、状態を変更するために非同期action

を公式に推奨しない.

は複数のmutaionsを実行し、非同期操作mapState、mapGetters、mapActions使用例

を公式に推奨する.
3、vueの双方向バインド?

原理:Objectを利用した.defineProperty()この方法は,オブジェクトが属性値(get)を取得し,属性値(set)を設定する操作を再定義して実現する.

の欠点:双方向データストリームは自動管理状態であるが、実際のアプリケーションでは状態変化を手動で処理しなければならない論理が多く、プログラムの複雑さが上昇し、デバッグが困難である.

4、computed watch methods?

の前の両者は自動的にデータを追跡し、関連関数を実行し、最後の手動呼び出しを行う.

computedは計算属性であり、dataと一致する

watch像イベントの傍受、オブジェクトが変化すると、関連操作

が実行される.

methodsはjsで実行する方法と似ている

computedは通常get属性

のみ

データの変化と同時に非同期動作を行うか、または比較的大きなオーバーヘッドである場合、watchは

が最適選択である.

watchのオブジェクトは、

を事前に宣言する必要があります.
5、v-showとv-if指令の共通点と相違点?

v-show命令は、要素のdisplayのCSS属性を変更することによって

を表示または非表示にする.

v-if命令は、DOMを直接破棄して再構築し、要素を表示および非表示にする効果

を達成する.
6、ネストされたルートはどのように定義しますか?

ネストルーティングはスライドのコンポーネント、router/indexである.js,my,childrenを追加し,多くのサブルーティングを定義し,サブルーティングはネストルーティングを継続することもできる.

定義方法:詳細、children、pathはスラッシュを使わず、to:/my/login 7、vue-routerにアクセスするナビゲーションフック

グローバルフック関数:グローバルルーティングオブジェクトに定義された

あるルーティング固有のフックは、ルーティング構成上beforeEnterフック関数

を直接定義することができる.

コンポーネント内のフック関数:コンポーネントのrouteオプションで

を定義します.
8、vuexとは何ですか.どのように使いますか.どの機能シーンで使用しますか?

vueフレームワークでのステータス管理.

はmainです.jsはstoreを導入し,注入した.ディレクトリstore,......exportを新規作成します.

シーンには、単一ページアプリケーションでコンポーネント間の状態があります.音楽再生、登録状態、カート

への加入
9、axiosとは何ですか.どのように使いますか.ログイン機能を実装するプロセスについて説明しますか?

バックグラウンドリソースを要求するモジュール.

npm install axios-Sをインストールし、ドメイン間で送信するには、プロファイル内のconfig/indexが必要です.jsで設定します.

バックグラウンドがTp 5の場合、リソースルーティングが定義される.jsでimportを使用して入って、それから.getまたは.post.に戻ります.then関数で成功すると、失敗は.catch関数における

10、カスタムコマンド(v-check、v-focus)の方法はどれらがありますか?どのフック関数がありますか?どのフック関数パラメータがありますか?

グローバル定義命令:vueオブジェクトのdirectiveメソッドには、命令名と関数の2つのパラメータがあります.

コンポーネント内定義命令:directives

フック関数:bind(バインドイベントトリガ)、inserted(ノード挿入時トリガ)、update(コンポーネント内関連更新)

フック関数パラメータ:el、binding

11、vueの双方向バインドは何を通じて各属性をハイジャックしますか?

vueはObjectを通過する.defineProperty()は、データハイジャックを実現します.

Object.defineProperty()オブジェクトのプロパティの読み取りと書き込み、

を列挙できるかどうかなど、特定の操作を制御できます.
12、vue-loaderとは何ですか.使用する用途は何ですか?

解析vueファイルのローダです.

用途:jsはes 6、styleスタイルはscssまたはless、templateはjadeなど

を加えることができます.
13、なぜvueはv-ifとv-forを避けるのですか.

一般的に私たちは2つの一般的な状況でこのようにする傾向があります:

は、リスト内のアイテム(v-for=「user in users」v-if=「user.isActive」)をフィルタするために使用されます.この場合、usersをactiveUsersなどの計算プロパティに置き換え、フィルタされたリストを返します.

は、v-for="user in users"v-if="shouldShowUsers")など、本来非表示にすべきリストをレンダリングしないようにします.この場合、v-ifをコンテナ要素(ul,olなど)に移動します.

14、vueの仮想dom?

仮想DOMの核心思想は、複雑なドキュメントDOM構造に対して、便利なツールを提供し、DOM操作を最小限に抑えることである.

15、vueライフサイクルは全部でいくつの段階がありますか?

beforeCreate(作成前)、

created(作成後)、

beforeMount(ロード前)、

mounted(ロード後)、

beforeUpdate(更新前)、

updated(更新後)、

beforeDestroy(破棄前)、

destroyed(破棄後)

16、vue slotは何をしていますか.

はコンポーネントの拡張であり、slotスロットを介してコンポーネント内部の指定された位置にコンテンツを伝達し、slotを介して親子で

を伝達することができる.
17、少なくとも4種類のvueの中の命令とその役割を話しますか?

v-if

を隠すか否かを判断する.

v-show制御の非表示が現れ、css属性をdisplay:noneまたはblockに設定するだけである.

v-if値がtrueの場合はdivが表示され、falseの場合は改変要素が消失し、コードも消失し、コードを

削除することに相当する.

v-forリストとテーブルのレンダリング

v-bindバインドプロパティ:sync,onceの3つの修飾子の代わりに使用:camelバインドプロパティの名前をアルパカ法則に変換して

と命名

v-model双方向データバインド

v-html html htmlタグv-textを取得してラベルを解釈せず、v-html解釈タグ

19、vueルーティングフック関数は使ったことがありますか?

router.beforeEach((to, from, next) => {})

to:(Routeルーティングオブジェクト)アクセスするターゲットルーティングオブジェクト

from:(Routeルーティングオブジェクト)現在のナビゲーションが離れるルーティング

next:(Function関数)このメソッドをresolveというフックに呼び出す必要があります.呼び出し方法:next(パラメータまたは空)***は

を呼び出す必要があります.
20、あなたがよく使うvue周辺のファミリーバケツ?

vue-routerルーティング

vuex状態管理

vue-resource/vue-axios要求データ

vue-cli足場ツールは、配置されたテンプレートで迅速にプロジェクトプロジェクトプロジェクト

を構築します.
21、router.addRoutesは使ったことがありますか?

router.addroutesは、動的ルーティング

を実現することができる.
22、nexttick使用シーン?

要件:vueを使用してztreeをカプセル化する.ztreeはDOMノードidとデータを決定した後、初期化方法を実行してztreeのツリー表示を完了する必要があるため、vueが導入したコンポーネントツリーが互いに影響を受けないように(互いに独立したオブジェクトである)、ztreeidはタイムスタンプ+乱数で生成される.

問題:変数であるためajaxリクエストデータを送信して戻ってきた後もdomツリーがレンダリング完了していない(動的に生成されたIDがない)ことが判明し、ツリーが生成されていない.

解決策:treeIdの値を変更し、$nextTick関数を使用してdomツリーが変化したことを確認してajaxリクエストを送信すると、初期化方法を実行する際にデータが対応していないIDノードがあるという気まずい現象は発生しません.

23、Vueフレームの中で、ナビゲーションフックはどれらがありますか?どのようなパラメータがありますか?

には2種類のフックがあり、前置守備、後置フック

がある.

パラメータ:

to:Routeは、アクセスするターゲットを表し、ルーティングオブジェクト

である.

from:Routeは、現在離れようとしているルーティングを表し、同じくルーティングオブジェクト

である.

next:Function,これは呼び出しが必要なメソッドであるが,具体的な実行効果はnextメソッド呼び出しのパラメータ

に依存する.

next():パイプに入る次のフックで、すべてのフックが実行済みであれば、ナビゲーションの状態はconfirmed(確認)

である.

next(false):これは現在のナビゲーションを中断することを意味し、すなわちtoが表すルーティングオブジェクトは入らず、中断され、このときテーブルURLアドレスはfromルーティング対応

にリセットされる.

24、vueにおけるkey値の役割?

はkeyを使用して各ノードに一意のkeyを識別する役割を果たし、主に仮想DOMを効率的に更新するためである.また、vueでは、同じラベル名要素を使用する遷移切り替えにもkey属性が使用されます.これは、vueがそれらを区別できるようにするためです.そうしないと、vueは内部属性を置き換え、遷移効果をトリガーしません.

25、vueの双方向バインドの原理は何ですか?

vue.jsはデータハイジャックとパブリッシャー-サブスクライバモードを組み合わせた方式を採用し、Object.defineProperty()は、各属性のsetter,getterをハイジャックし、データが変動したときに購読者にメッセージを発行し、対応するリスニングコールバックをトリガーします.