1.ルーティングの3つのモード？
● ハッシュ: ルーティングに URL ハッシュ値を使用します。HTML5 History API をサポートしないブラウザを含むすべてのブラウザをサポートします;
● history : HTML5 History API とサーバー構成に依存します。詳細については、HTML5 履歴モードを確認できます;
● 抽象 : Node.js サーバーサイドなど、すべての JavaScript ランタイム環境をサポートします。ブラウザー API が見つからない場合、ルーターは自動的にこのモードに強制されます。
2.ビューガード
グローバル ガードbeforeEach
(to,from, next): グローバル フロント ガード、
ルートに入る前グローバル
ルートに入った後、フックを設定しますルーティング コンポーネントのガード
beforeRouteEnter(): ルートに入る前
beforeRouteUpdate(): ルートが同じコンポーネントを再利用するとき
beforeRouteLeave(): 現在のルートを離れるとき排他的なルーティング フック:
beforeEnter(to,from,next);ナビゲーション ガードのコールバック パラメータ
to: ターゲット ルーティング オブジェクト;
from: 出発しようとしているルーティング オブジェクト;
next: he は最も重要なパラメータで、ビーズの糸に相当し、ビーズを 1 つずつストリングします。次の点に注意してください。
1. 次のパラメータを持つフックが含まれている限り、next() を呼び出して次のフックの実行を続行する必要があります。そうしないと、ルーティング ジャンプが停止します。
2. 現在のナビゲーションを中断する場合は、next(false) を呼び出します。ブラウザの URL が変更された場合 (おそらくユーザーまたはブラウザの [戻る] ボタンによって手動で)、URL アドレスは from ルートに対応するアドレスにリセットされます。(主にログイン認証に失敗した場合の対処に使用)
3. もちろん、next はこのように使用できます。 next('/') または next({ path: '/' }): 別のアドレスにジャンプします。これは、現在のナビゲーションが中断され、新しいナビゲーションが実行されることを意味します。渡すことができるパラメーターは、router.push のオプションと一致しています。
4. beforeRouteEnter フックの next((vm)=>{}) で受け取ったコールバック関数パラメータは、現在のコンポーネントのインスタンス vm です. このコールバック関数は、ライフサイクルがマウントされた後に呼び出されます, つまり、すべてのナビゲーションです.ガードとライフサイクル 関数が最後に実行するフック。
5.next(error): (v2.4.0+) next に渡されたパラメータが Error インスタンスの場合、ナビゲーションは終了し、エラーは router.onError() によって登録されたコールバックに渡されます。クリックしてルートを切り替える場合:
beforeRouterLeave-->beforeEach-->beforeEnter-->beforeRouteEnter-->beforeResolve-->afterEach-->beforeCreate-->created-->beforeMount-->mounted-->beforeRouteEnter の次のコールバック
3. v-if と v-show の違い
v-if true 条件付きレンダリング 初期レンダリングで条件が false の場合、何もしない - 条件が最初に true になるまで、条件付きブロックはレンダリングを開始しません。要約 1 つの false が false、
最初に true、次に true
v-show ははるかに単純です。初期条件が CSS の「display」プロパティに基づいて単純に切り替えられても、要素は常にレンダリングされます。
v-if は、実行時に条件をほとんど変更せず、頻繁な切り替え条件を必要としないシナリオに適しています。 v-show は、非常に頻繁な切り替え条件を必要とするシナリオに適しています。
4.計算と時計の違い
計算済み: 他の属性値に依存する計算済み属性であり、計算済みの値がキャッシュされます. 依存する属性の値が変更された場合にのみ、次に計算済みの値が取得されたときに計算済みの値が再計算されます. ; (ショッピング カートの追加などのデータ計算について 加算、減算、および減算)
watch: 監視対象のデータが変更されるたびに、コールバックが実行されるデータの監視コールバックに似た、より「監視」関数です。後続の操作のために実行されます; (監視データ データ)
5. Vue コンポーネントのライフサイクル
ライフサイクルとは？
Vue インスタンスには完全なライフサイクル、つまり、作成の最初から、データの初期化、テンプレートのコンパイル、Dom のマウント -> レンダリング、更新 -> レンダリング、アンロードなどの一連のプロセスがあります。 Vueのライフサイクル。
人の人生の一例
コンポーネント インスタンスが作成されると、コンポーネントのプロパティが有効になる前に、
作成された
コンポーネント インスタンスが完全に作成され、プロパティもバインドされますが、実際の dom はまだ生成されておらず、$el はまだ使用できません。マウント開始前に呼び出される: 関連する render 関数マウントされた、新しく作成された vm.$el に置き換えられ、インスタンスがマウントされた後にフックが呼び出されます。コンポーネントが破棄された後に呼び出されます。Vue 独自のキャッシュ コンポーネント keep-alive の排他的な
アクティブ化されたコンポーネントは、アクティブ化されたときに呼び出され、
コンポーネントが破棄されたときに非アクティブ化されたコンポーネントが呼び出されます
6. Vue コンポーネント通信 (6 つの一般的な方法)
(1) props / $emit は親子コンポーネント通信に適しています
(2) ref と $parent / $children は親子コンポーネント通信に適しています
(3) eventBus イベント バス ($emit / $on)
eventBus イベント バスは親子コンポーネント、非親子コンポーネントなどに適しています。
(4) $attrs/$listeners 間の通信は世代間コンポーネント通信に適しています
(5) provide / inject は世代間コンポーネント通信に適しています
(6) vuex
依存性注入(provide / inject)
このメソッドは vue の依存性注入です. このメソッドは親コンポーネントと子コンポーネント間の通信に使用されます. もちろん、ここでいう父子は実父子ではなく、祖父母や孫でもありますが、層が深い場合はこの方法で値を渡すことができます。レイヤーごとにデータを渡す必要はありません。
Provide と inject は、vue によって提供される 2 つのフックであり、データとメソッドと同じレベルにあります。そして提供の書き方はデータと同じです。
provide フックは、データまたはメソッドを送信するために使用されます。
The inject hook is used to receive data or methods.
先祖コンポーネントはプロバイダーを通じて変数を提供し、その後、子孫コンポーネントの inject を通じて変数を注入します。provide/inject API は、主にクロスレベル コンポーネント間の通信問題を解決しますが、その使用シナリオは主に、サブコンポーネントが上位コンポーネントの状態を取得し、アクティブ プロビジョンと依存性注入の関係がクロスレベル コンポーネント間で確立されることです。レベルのコンポーネント。
7.vuex
Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。すべての Vuex アプリケーションの中心はストアです。「ストア」は基本的に、アプリケーションの状態 ( state ) のほとんどを保持するコンテナーです。
(1) Vuex の状態ストレージはレスポンシブです。Vue コンポーネントがストアから状態を読み取るときに、ストア内の状態が変化すると、それに応じて対応するコンポーネントが効率的に更新されます。
(2) ストアの状態を変更する唯一の方法は、ミューテーションを明示的にコミットすることです。これにより、すべての状態変化を簡単に追跡できます● 状態: デフォルトの初期状態を設定できるアプリケーション状態のデータ構造を定義します。
● ゲッター: コンポーネントがストアからデータを取得できるようにします. mapGetters ヘルパー関数は、ストア内のゲッターをローカルの計算されたプロパティにマップするだけです.
● ミューテーション: ストア内の状態を変更する唯一の方法であり、同期関数である必要があります。
● アクション: 状態を直接変更する代わりにミューテーションを送信するために使用され、任意の非同期操作を含めることができます。
● モジュール: 1 つのストアを複数のストアに分割し、同時に 1 つの状態ツリーに格納できます。
8. コンポーネント内のデータが関数である理由は何ですか?
コンポーネントは再利用のために使われるため、js 内のオブジェクトは参照関係であるため、データがオブジェクトの形式である場合、データの範囲が分離されず、複数のサブコンポーネントがある場合、外部要因の影響を受けます。が関数である場合、各インスタンスは返されたオブジェクトの独自のコピーを持つことができ、コンポーネント インスタンス間のデータ属性値は互いに影響しません
9. v-if と v-for を一緒に使用できないのはなぜですか?
v-if が v-for と一緒に使用される場合、v-for は v-if よりも優先度が高くなります。これは、v-if が各 v-for ループで繰り返し実行されることを意味するため、v-for は推奨されません- for を同時に使用すると、計算されたプロパティでリストをトラバースできます
10.vue コマンド
11. MVC と MVVM
MVC: m: モデル データ モデル レイヤー v: ビュー ビュー レイヤー c: コントローラー コントローラー
MVVM: m: モデル データ モデル レイヤー v: ビュー ビュー レイヤー vm: ViewModelVue は、mvc から派生した mvvm モードを使用します。
MVVM は、mvc からのタイミングの悪いフィードバックの問題を解決するために、view と viewmodel の間の直接的な関係を特に密接にします。
m: data() と同等
v: <template></template> と同等
12. Vue 親から子へのライフサイクルの実行順序
質問1: 親コンポーネントで渡す props 属性は、作成されたライフサイクルで ajax リクエストによって返されるデータの一部ですが、このオブジェクトは、子コンポーネントの最初の 4 つのライフサイクルでは取得できませんか?
⭐理由: 親コンポーネントの作成された関数内でメソッドが呼び出され、そのメソッドがインターフェースを要求しますが、この要求は非同期操作であり、このとき非同期操作はメッセージ キューに置かれ、待機します。親子ライフサイクル関数は後で一連の同期タスクの実行が完了すると、非同期タスク、つまりメッセージキューを読み取ってコールバック関数を実行するタスクが実行されます (この時点で、 JS のシングルスレッド特性)。このとき、インターフェースはデータを返し、親コンポーネントの変数はデータを取得できますが、子コンポーネントで作成およびマウントされたライフサイクルフックは一度しか実行されず、すでに実行されているため、子コンポーネントの最初の 4 つのライフ サイクル 親コンポーネントの呼び出しインターフェイスによってもたらされたデータを取得することはできません。
⭐質問2: 子コンポーネントはrefを追加し、親コンポーネントは$refsを使用し、親コンポーネントの作成した関数内で子コンポーネントを操作できませんか?
⭐理由: $refs はコンポーネントがレンダリングされた後にのみ満たされ、応答しないため、親コンポーネントは、サブコンポーネントのマウントされたライフサイクル関数の後、つまりサブコンポーネントの dom 要素が直接レンダリングされた後にのみ $refs を渡すことができます。子要素の操作 上記のシーケンスから、親コンポーネントの作成された関数で $refs を介して子コンポーネントを操作できないことがわかります。
13. Vue の双方向バインディング データの原理について話す
Vue2.0: Vue は、主にパブリッシャー/サブスクライバー モードと組み合わせたデータ ハイジャックを使用し、Object.defineProperty() を介して各プロパティのセッターとゲッターをハイジャックし、データが変更されたときにサブスクライバーにメッセージをパブリッシュすることにより、双方向のデータ バインディングを実装します。コールバックの監視
vue3.0: プロキシ経由
Proxy と比較した Object.defineProperty の長所と短所は何ですか?
Object.defineProperty はオブジェクトのプロパティのみをハイジャックできますが、Proxy はダイレクト プロキシ オブジェクトです。
Object.defineProperty はプロパティをハイジャックすることしかできないため、オブジェクトの各プロパティを走査する必要があります. プロパティ値もオブジェクトである場合は、深い走査が必要です. また、プロキシはトラバーサル操作なしでオブジェクトを直接プロキシします
14. $route と $router の違い
1. route はルーティング情報オブジェクトで、主に現在のパス、パラメーター、クエリ オブジェクトなど、ルーティングの基本情報が含まれています。(name、meta、path、hash、query、params、fullPath、matched、redirectedFrom を含む)
2. $router は VueRouter のインスタンスであり、いくつかのルーティング ジャンプ メソッド、フック関数などが含まれています。
v-if と v-for の併用を避けるべき15 の理由
v-if は v-for より優先度が高い
16. vueでの作成とマウントの違い
1. 作成された段階では、インスタンスは初期化されていますが、el にマウントされていないため、対応するノードを取得できませんが、この時点で data のデータと vue のメソッドを取得できます。
2. マウント段階では、vue のテンプレートが $el に正常にマウントされています. この時点で、完全なページがブラウザーに表示されるため、この段階でノードを呼び出すことができます。
17. ビューソケット
1. デフォルト
<!-- サブコンポーネント hello -->
<template>
<view>
<solt></solt>
</view>
</template>
<!-- 父の集合体 -->
<hello>
<view>111</view>
</hello>2.名前付きスロット
<!-- サブコンポーネント hello -->
<template>
<view>
<solt>I am the default content</solt>
</view>
</template>
<!-- 親コンポーネント-->
<hello>
<view>デフォルトのコンテンツを置き換えることができます</view>
</hello>3. スコープスロット
一番分かりにくいのはスコープスロットです。ドキュメンテーションを読んだ友人はまだ少しめまいがするかもしれません. これはおそらく、スコープ スロット内で、親コンポーネントが子コンポーネントのデータを取得できることを意味します. サブコンポーネントは nickName などの属性をスロット タグにバインドでき、親コンポーネントはスロット スコープによってバインドされたオブジェクトを介して nickName の値を取得できます。// サブコンポーネント
<slot :nickName="'Tusi'"></slot>// 父の組件
<template>
<section>
<slot-child>
<template slot-scope="scope">
<div>{ {scope.nickName}}</div>
</template>
</slot-child>
< /セクション>
</テンプレート>
18. ミックスインの使用 (混合)
1. とは
Mixin は、Vue コンポーネントで再利用可能な機能を配布する非常に柔軟な方法を提供します。mixin オブジェクトには、任意のコンポーネント オプションを含めることができます。コンポーネントが mixin を使用する場合、mixin のすべてのオプションがコンポーネント自体のオプションに「混合」されます。
2.機能
主な機能は継承とカプセル化です。これにより、コードの量を削減し、いくつかの共通コードを抽出することで再利用性を向上させることができます。
3.使用する
// minix.js
export default { data () { return { name: 'minix', minixName: 'minixObj', flag: false } }, mounted() { console.log('minixMounted'); メソッド : { speak() { console.log('this is minix'); }, getData() { return '100'; } } } // todo.vue import myMinix from './minix'; エクスポート デフォルト { データ () { リターン {
name: 'todo',
lists: [1, 2, 3, 4]
}
},
mounted() { console.log('todoMounted'); }, minixs: [myMinix], // todo.vue で minix を宣言します混合 メソッド: { speak () { console.log('this is todo'); }, submit() { console.log('submit'); }, } } //========= = // 最終結果//========== export default { data () { return { name: 'todo', // 共通データ、最後に独自のデータを保持
lists: [1, 2, 3, 4], // 固有のものを保持
minixName: 'minixObj', // todo に含まれていない場合は追加されます
flag: false // todo に含まれていない場合は追加されます
}
},
Mounted() { // フック関数では、todo.vue のフック関数にマージされ、minix のコードが最初に来て、それ自体が後に来ます console.log('minixMounted'); console.log( ' todoMounted'); }, methods: { // 同時に、いくつかのメソッドは配列としてカプセル化され、最初に minix で実行され、次に todo 独自のものを実行 speak () { [ function() { console.log('this is minix'); }, function() { console.log('これはtodo');
}
].forEach(item => { item(); }) }, // 固有のものを保持し、 submit() { console.log('submit'); }, // 持っていないメソッドが追加されます getData() { return '100'; } } }