Vue の面接でよくある質問の概要 (回答分析付き)

この記事では、Vue の面接での質問をいくつか紹介します (回答分析付き)。一定の参考値があるので、困っている友達が参考になれば幸いです。

記事に含まれる情報はインターネットおよび個人的な概要から得たものであり、個人的な学習と経験を要約することを目的としています。権利侵害がある場合は、ご連絡ください。削除させていただきます。ありがとうございます。

1. MVVM について理解する

MVVM は、Model-View-ViewModel の略称です。

Model はデータモデルを表し、データの変更や操作のためのビジネスロジックもモデル内に定義できます。

View は、データ モデルを表示用の UI に変換する役割を担う UI コンポーネントを表します。

ViewModel モデル データの変更を監視し、ビューの動作を制御し、ユーザー操作を処理します。簡単に理解すると、ビューとモデルを同期し、モデルとビューを接続するオブジェクトです。

MVVM アーキテクチャでは、ビューとモデルの間に直接の接続はありません。代わりに、ビューモデルを通じて対話します。モデルとビューモデル間の対話は双方向であるため、ビュー データの変更はモデルに同期されます。 . 、モデル データの変更はすぐにビューに反映されます。

ViewModel ビュー レイヤーとモデル レイヤーは双方向のデータ バインディングを通じて接続されており、ビューとモデル間の同期は人間の介入なしで完全に自動的に行われるため、開発者は料金を支払うだけで済みます。ビジネスロジックを意識せず、手動でDOMを操作する必要がなく、データ状態の同期を意識する必要がなく、複雑なデータ状態の維持はMVVMによって完全に管理されます。

2. Vue は双方向データ バインディングを実装します

Vue は主に次の方法で双方向データ バインディングを実装します: データ ハイジャックをパブリッシャー/サブスクライバー モデルと組み合わせて使用​​します。 メソッドを使用して、Object.defineProperty() を通じて各プロパティのセッターとゲッターをハイジャックし、データが変更されたときにサブスクライバーにメッセージをパブリッシュし、対応するリスニング コールバックをトリガーします。プレーンな Javascript オブジェクトをデータ オプションとして Vue インスタンスに渡すと、Vue はそのプロパティを反復処理し、Object.defineProperty を使用してプロパティをゲッター/セッターに変換します。ゲッター/セッターはユーザーには表示されませんが、内部的には Vue が依存関係を追跡し、プロパティがアクセスされ変更されたときに変更を通知することができます。 (学習ビデオ共有: vue ビデオ チュートリアル)

Vue の双方向データ バインディングは、MVVM をデータ バインディングの入り口として使用し、Observer、Compile、Watcher を統合し、Observer For model を通じて自身を監視します。データ変更、コンパイル テンプレート命令の解析にコンパイルが使用され (vue では、{{}} の解析に使用されます)、最後にウォッチャーを使用してオブザーバーとコンパイル間の通信ブリッジを構築し、データ変更を実現します。 -> 更新の表示、対話型変更 (入力) の表示 -> データ モデル変更の双方向バインディング効果。

3. Vue コンポーネント間のパラメータ転送

1. 親コンポーネントと子コンポーネント間の値の転送

親からの転送コンポーネント 子コンポーネントへ: 子コンポーネントは props メソッドを通じてデータを受け取り、子コンポーネントは親コンポーネントに渡します: $emit メソッドはパラメータを渡します

2. 親以外のコンポーネントと子コンポーネントの間のデータ転送、兄弟コンポーネントは値を渡します

eventBus は、乗換駅に相当するイベント センターを作成し、イベントの配信や受信に使用できます。プロジェクトが比較的小さい場合は、これがより適切です。

4. v-show と v-if の違い

• v-show と v-if の違い:

  v-show は CSS スイッチ、v-if は完全な破壊と再作成です。

• 使用

  頻繁に切り替える場合は v-show を使用し、実行時の変更がほとんどない場合は v-if を使用します

• v -if='false' v-if は条件付きレンダリングです。false の場合はレンダリングされません

5、Vue ライフ サイクル

beforeCreate (作成前) データ観察および初期化イベントが開始される前

created (作成後) データ観察、プロパティとメソッドの操作、初期化イベント、$ の完了el 属性はまだ表示されていません。 マウントが開始される前に

beforeMount (ロード前) が呼び出され、関連するレンダー関数が初めて呼び出されます。インスタンスは次の構成を完了しました: テンプレートをコンパイルし、データとテンプレート内のデータから HTML を生成します。現時点では HTML がページにマウントされていないことに注意してください。

mounted (ロード後) el が新しく作成された vm.$el に置き換えられ、インスタンスにマウントされた後に呼び出されます。インスタンスは次の構成を完了しました。el 属性によって指定された DOM オブジェクトを、上記のコンパイルされた HTML コンテンツに置き換えます。テンプレート内の HTML の HTML ページへのレンダリングを完了します。このプロセス中に Ajax 対話が実行されます。

beforeUpdate (更新前) データが更新される前、つまり仮想 DOM が再レンダリングされ、パッチが適用される前に呼び出されます。追加の再レンダリング プロセスをトリガーせずに、このフックで状態をさらに変更できます。

updated(更新) データ変更による仮想 DOM の再レンダリングとパッチ適用後に呼び出されます。呼び出されるとコンポーネント DOM が更新されているため、DOM に依存した操作を実行できます。ただし、ほとんどの場合、更新の無限ループが発生する可能性があるため、この期間中に状態を変更することは避けるべきです。このフックは、サーバー側のレンダリング中には呼び出されません。

beforeDestroy (破棄前) インスタンスが破棄される前に呼び出されます。インスタンスは引き続き完全に利用可能です。

destroyed (破棄後) インスタンスが破棄された後に呼び出されます。呼び出し後、すべてのイベント リスナーが削除され、すべての子インスタンスが破棄されます。このフックは、サーバー側のレンダリング中には呼び出されません。

1. vue のライフサイクルとは何ですか?

回答: Vue インスタンスの作成から破棄までのプロセスがライフサイクルです。作成開始からデータの初期化、テンプレートのコンパイル、Domのマウント→レンダリング、更新→レンダリング、破棄までの一連の処理をVueのライフサイクルと呼びます。

2.vue ライフサイクルの役割は何ですか?

回答: ライフサイクルには複数のイベント フックがあるため、Vue インスタンス全体のプロセスを制御するときに適切なロジックを簡単に作成できます。

3. vue のライフサイクルには何段階ありますか?

回答: 作成前/後、ロード前/後、更新前/後、破棄前/後、合計 8 つの段階に分けることができます。

4. ページが初めて読み込まれるときにどのフックがトリガーされますか?

回答: 次の beforeCreate、created、beforeMount、mount がトリガーされます。

5. DOM レンダリングはどのサイクルで完了しますか?

回答: DOM レンダリングはマウントされた状態で完了します。

5. バインドされたクラスの配列の使用法

• オブジェクト メソッドv-bind:class="{'orange': isRipe, 'green ' : isNotRipe}"
• 配列メソッドv-bind:class="[クラス1, クラス2]"
• Inlinev-bind:style = "{color: color, fontSize: fontSize 'px' }"

6. 計算属性 computed と監視ウォッチ

Computed の違いプロパティは、依存する値の変化を自動的に監視し、コンテンツを動的に返します。監視はプロセスです。監視対象の値が変化すると、コールバックがトリガーされ、何かが実行されます。したがって、違いは使用法にあります。動的な値が必要なだけの場合は、計算されたプロパティを使用します。値の変化を知り、ビジネス ロジックを実行する必要がある場合は、監視を使用します。逆のメソッドや混合メソッドを使用することもできますが、は間違った使い方です。

1. 計算対象がオブジェクトである場合、どのようなオプションがありますか?

get と set

2 の 2 つのオプションがあります。computed とメソッドの違いは何ですか?

methods はメソッドであり、パラメータを受け入れることができますが、computed は受け入れられません。computed はキャッシュできますが、メソッドはキャッシュできません。

3. computed は他のコンポーネントからのデータに依存できますか?

computed は、他の computed、さらには他のコンポーネントのデータにも依存する可能性があります。

4. watch がオブジェクトの場合、どのようなオプションがありますか?

handler deep ディープにするかどうか imeditate すぐに実行するかどうか

概要

一部のデータを他のデータに合わせて変更する必要がある場合は、次のことをお勧めします。計算されたものを使用します。データ変更に対する一般的な応答がある場合、ビジネス ロジックや非同期操作を実行するときにウォッチャーを使用することをお勧めします

#7. Vue のルーティング実装: ハッシュ モードとヒストリー モード

#ハッシュ モード:

ブラウザでは、記号「#」、# および # 以降の文字をハッシュと呼び、window.location.hash; で読み取られます。 URL, ただし、HTTP リクエストには含まれていません。ブラウザのアクションをガイドするために使用され、サーバー側のセキュリティには役に立ちません。ハッシュはページをリロードしません。ハッシュ モードでは、http://www.xxx.com など、ハッシュ記号の前のコンテンツのみがリクエストに含まれるため、バックエンドでは、ルートの完全なカバレッジが達成されない場合でも、404 は含まれません。返品されるのは間違いです。

history モード:

history は HTML5 の新機能を採用し、ブラウザ履歴スタックを変更するための PushState()、replaceState()、およびステータスを監視するための PopState イベントという 2 つの新しいメソッドを提供します。変化します。履歴モードでは、フロントエンドの URL は、バックエンドへのリクエストを実際に開始する URL (http://www.xxx.com/items/id など) と一致している必要があります。バックエンドに /items/id のルーティング処理がない場合、404 エラーが返されます。

8.Vue、Angular、React の違いは何ですか?

(バージョンは常に更新されているため、次の違いはあまり正確ではない可能性があります。私は仕事で vue のみを使用しており、angular や React についてはあまり詳しくありません)

1. AngularJS との違い

同じ点

:

両方のサポート命令: 組み込み命令とカスタム命令、両方のサポート フィルター: 組み込みフィルターとカスタム フィルター、両方とも双方向データ バインディングをサポート、ローエンド ブラウザーはサポートしません。

相違点:

AngularJSは依存性注入機能の追加など学習コストが高いのに対し、Vue.js自体が提供するAPIは比較的シンプルで、直感的; パフォーマンスの点で、AngularJS はデータのダーティ チェックに依存しているため、ウォッチャーが増えるほど遅くなります; Vue.js は依存関係の追跡に基づいた監視を使用し、非同期のキュー更新を使用し、すべてのデータが独立してトリガーされます。

2. React との違い

同じ点:

React は特別な JSX 文法を使用します。 Vue.js では、コンポーネント開発で .vue 特殊ファイル形式を記述することも推奨しています。ファイルの内容にはいくつかの規則があります。両方をコンパイルして使用する必要があります。中心的な考え方は同じです。すべてがコンポーネントであり、コンポーネント インスタンスはネストできます。 ; どちらも、開発者がニーズをカスタマイズできる合理的なフック関数を提供します。どちらも AJAX、Route、その他の関数がコア パッケージに組み込まれていませんが、プラグインとしてロードされます。どちらもコンポーネント開発におけるミックスインの機能をサポートします。

相違点:

Reactで使用される仮想DOMは、レンダリングされた結果に対してダーティチェックを実行しますが、Vue.jsはテンプレートで指示やフィルターなどを提供します。 Virtual DOM を非常に便利かつ迅速に操作できます。

9. イベント修飾子

• ネイティブ クリック イベントをバインド: ネイティブ、

• Other を追加します。イベント修飾子: stopPrevent self

• #キーの組み合わせ: click.ctrl.exact は Ctrl キーが押された場合にのみトリガーされます

10。コンポーネント内のデータが関数であるのはなぜですか?

新しい Vue インスタンスではデータを直接オブジェクトにできるのに対し、コンポーネント内のデータは関数でなければならないのはなぜですか?

コンポーネントは再利用のために使用されるため、JS 内のオブジェクトは参照関係であるため、スコープは分離されず、新しい Vue のインスタンスは再利用されないため、オブジェクトの参照は問題ありません

Vue がプログレッシブ フレームワークであることを理解する

11. プログレッシブの意味は、「最小限の主張」です。

Vue は、いくつかの点で React や Angular ほど優れていないかもしれませんが、進歩的であり、強い主張はありません。元の大規模システムの上に 1 つまたは 2 つのコンポーネントを実装するために使用できます。 jQuery で使用します。ファミリー バケット全体を開発して Angular として使用することもできます。そのビューを使用して、独自のデザインの下層全体と一致させることもできます。基礎となるデータ ロジックで OO とデザイン パターンの概念を使用することも、関数メソッドを使用することもできます。これは単なる軽量ビューです。実行すべきことのみを実行し、実行すべきでないことは実行しません。、何も実行しません。もっと。プログレッシブの意味についての私の理解は、「必要以上のことをしない」ということです。

12. vue.js の 2 つのコアとは何ですか?

データ駆動型およびコンポーネント化

13. vue における key 値の役割

キーを使用して、各ノードの一意の識別子

key を作成する目的は、主に仮想 DOM を効率的に更新することです。さらに、Vue で同じタグ名を持つ要素のトランジション切り替えを使用する場合、key 属性も使用されます。これは、Vue がそれらを区別できるようにすることも目的です。それ以外の場合、Vue は内部属性を置き換えるだけで、トランジションをトリガーしません。効果。

#14. v-for と v-if の優先順位

v-for の優先順位は v-if

## よりも高くなります# 15. コンポーネント

1. サブコンポーネントによって vue の親コンポーネントを呼び出す方法

最初の方法は、this.$parent を直接渡すことです。サブコンポーネント .event を使用して親コンポーネントのメソッドを呼び出します。

2 番目の方法は、子コンポーネントで

$emit

を使用して親コンポーネントへのイベントをトリガーすることで、親コンポーネントはこのイベントをリッスンできます。

3 番目の方法は、親コンポーネントがメソッドを子コンポーネントに渡し、子コンポーネント内でこのメソッドを直接呼び出す方法です。

2. vue の親コンポーネントは子コンポーネントのメソッドを呼び出します

親コンポーネントは ref 属性を使用して子コンポーネントのメソッドを操作します。

父：
<child ref="childMethod"></child>
子：
method: {
  test() {
     alert(1)
  }
}
在父组件里调用test即 this.$refs.childMethod.test()

3. vue コンポーネント間での値の受け渡し

(1) 親コンポーネントが子コンポーネントに値を渡します:

# 親コンポーネントが子コンポーネントを呼び出すときにプロパティを動的にバインドします

• #

  <parent :dataList=&#39;dataList&#39;></parent>

  
  

子コンポーネントは、動的にバインドされたプロパティ props を受け取るための props を定義します: ['dataList' ]

• サブコンポーネントの使用状況データ

• 
  (2) サブコンポーネントは、親と子の間でプロパティとメソッドをアクティブに取得します。

子コンポーネントで this.$parent.property/this.$parent.method を使用します。

(3) 子コンポーネントは親コンポーネントに値を渡します:

1. ref 属性を使用します

1. 親コンポーネントが呼び出したときに ref 属性をバインドします。子コンポーネント

< ;parent :ref='parent'>

2.親コンポーネントでthis.$refs.parent.property/this.$refs.parent.methodを使用します

2. $emit メソッドを使用します
1. 子コンポーネントは this.$emit('メソッド名', 値を渡します) を呼び出します
2. 親コンポーネントは、子コンポーネント。


(4) vue ページレベルのコンポーネント間の値の転送

vue-router を使用して、ジャンプ リンクを介してパラメータ付きのパラメータを渡します。

使用本地缓存localStorge。

使用vuex数据管理传值。

（5）说说vue的动态组件。

多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件。

（6）keep-alive内置组件的作用

可以让当前组件或者路由不经历创建和销毁，而是进行缓存，凡是被keep-alive组件包裹的组件，除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当

(7)递归组件的用法

组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染。

16、怎么定义vue-router的动态路由？怎么获取传过来的值？

动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：

{
 path: '/details/:id'
 name: 'Details'
 components: Details
}

访问details目录下的所有文件，如果details/a，details/b等，都会映射到Details组件上。

当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数

this.$route.params.id

17、vue-router有哪几种路由守卫?

全局守卫：beforeEach
后置守卫：afterEach
全局解析守卫：beforeResolve
路由独享守卫：beforeEnter

18、$route和 $router的区别是什么？

• $router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。

• $route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

19、vue-router响应路由参数的变化

• (1)用watch 检测

• (2)组件内导航钩子函数

20、 vue-router 传参

(1)使用Params:

• 只能使用name，不能使用path

• 参数不会显示在路径上

• 浏览器强制刷新参数会被清空

（2）使用Query：

• 参数会显示在路径上，刷新不会被清空

• name 可以使用path路径

21、不用Vuex会带来什么问题？

1、可维护性会下降，你要想修改数据，你得维护三个地方

2、可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的

3、增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

22、vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module。

23、、vuex的State特性是？

1、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data
2、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
3、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

24、vuex的Getter特性是？

1、getters 可以对State进行计算操作，它就是Store的计算属性
2、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
3、 如果一个状态只在一个组件内使用，是可以不用getters

25、vuex的Mutation特性是？

1、Action 类似于 mutation，不同在于：
2、Action 提交的是 mutation，而不是直接变更状态。
3、Action 可以包含任意异步操作

26. Vue.js の ajax リクエスト コードは、コンポーネントのメソッドに記述する必要がありますか、それとも vuex のアクションに記述する必要がありますか?

1. 要求されたデータが他のコンポーネントによって共有され、要求されたコンポーネント内でのみ使用される場合、それを vuex の状態にする必要はありません。

2. 他の場所で再利用される場合、これが必要になる可能性が高くなります。必要に応じて、再利用を容易にするためにリクエストをアクションに組み込み、返すプロミスにパッケージ化して、呼び出しサイトで async を使用してください。 . await は返されたデータを処理します。このリクエストを再利用したくない場合は、vue ファイルに直接記述すると非常に便利です。

27、vue の双方向データ バインディングの原則、vue2 と vue3 の原則の違い

vue2.0 オブジェクトのため。 defineProperty オブジェクトの属性をハイジャックすることしかできず、配列添字の変更を監視できないため、データ添字によって追加された要素がリアルタイムで応答できないという欠点が生じます。この問題を解決するには、Vue の内部処理の後、push()、pop()、shift()、unshift()、splice()、sort()、reverse() を使用してハック処理を行うことができます。いいえ、一定の制限があります。

object.defineProperty はオブジェクト プロパティのみをハイジャックできるため、各オブジェクトの各プロパティを走査する必要があります。 vue2.0ではデータオブジェクトを再帰的に走査することでデータ監視を実現していますが、属性値がオブジェクトの場合には深い走査も必要になります。

Vue3.0 のプロキシは、オブジェクトをプロキシするだけでなく、配列もプロキシし、動的に追加された属性もプロキシすることができます。ハイジャック操作は 13 種類あります: get は、特定のキー値を取得します (2 つのパラメーター、ターゲット値を受け取ります) set キー値 (ターゲット値、ターゲット キー値、変更する値、変更前の元の値) を設定します apply in 演算子を使用してキーが存在するかどうかを判断します deleteProperty プロパティを削除します defineProperty 定義 新しいプロパティ

ありがとうございます

#プログラミング関連の知識については、

プログラミング ビデオをご覧ください。 ！

以上がVue の面接でよくある質問の概要 (回答分析付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。