あなたの Vue の習熟度をテストするために、面接で必ず聞かれる 3 つの質問をチェックしてください。

この記事では、Vue の習熟度をテストし、正しく答えられるかどうかを確認するために、Vue で必ず聞かれる面接の質問 3 つを紹介します。

質問 1: v-show と v-if の違いは何ですか?

この質問は、インタビュアーの Vue の基本を調べるためのものです。一般に、Vue を使用したことがある人は必ず v-show と v-if を使用します。 (学習ビデオ共有: vue ビデオ チュートリアル)

v-if 命令はコンテンツの一部を条件付きでレンダリングするために使用され、v-show 条件付き表示要素にも使用されます。

v-show を使用する要素はレンダリングされて DOM に保持され、CSS 表示を使用して要素の表示と非表示を制御します。 v-show は <template></template> 要素をサポートしておらず、v-else もサポートしていません。

v-if の使用は「真」の条件付きレンダリングであり、要素のイベント リスナーとサブコンポーネントは破棄されて再構築されます。 v-if も lazy です。初期条件が false の場合、レンダリングされず、true になるまで最初のレンダリングはトリガーされません。そして v-show は条件に関係なくレンダリングを行い、display 属性に応じて表示・非表示を制御します。

一般的に、v-if は切り替えオーバーヘッドが大きく、v-show は初期レンダリング オーバーヘッドのみです。要素を頻繁に切り替える必要がある場合は v-show を使用し、条件がほとんど変わらない場合は v-の方が良いです。

質問 2: v モデルの原理は何ですか?

v-model コマンドは、主に <input>、<select></select>、# で使用されます。 # #<code>データの双方向バインディングを実現するためのフォーム要素またはコンポーネント。これはそれほど魔法のようなものではなく、ユーザーの入力イベントをリッスンしてデータを更新するだけです。 </code>

v-model は、さまざまな要素に基づいてさまざまなイベントをトリガーします:

text 要素と textarea 要素は
• input イベントを使用します;
checkbox / radio
• change イベントを使用するを選択します;

入力フォームを例として取り上げます:

<input>

<!-- 等价于 -->

<input>

カスタム コンポーネント内の場合:

<!-- 父组件： -->
<modelchild></modelchild>

<!-- 子组件： -->
<template>
  <div>{{value}}</div>
</template>

<script>
  export default {
    props:{
      value: String
    },
    methods: {
      test1(){
         this.$emit(&#39;input&#39;, &#39;小红&#39;)
      },
    },
  }
</script>

親コンポーネントでメッセージの値が変更されると、子コンポーネントの props の値フィールドが自動的に変更されます。子コンポーネントで入力イベントがトリガーされると、親コンポーネントのメッセージ値も変更されます。変えられる。

質問 3: Vue コンポーネント間の通信方法は何ですか?

この質問は、面接でも非常によくある質問です。答えられる方法が多ければ多いほど、Vue の習熟度が高まります。一般に、コンポーネント間の通信は、親子コンポーネント通信、祖父孫コンポーネント通信、兄弟コンポーネント通信の 3 種類に大別できます。

#props / $emit

親コンポーネントと子コンポーネント間の通信に適しています

• これは Vue の最も基本的なデータ通信方法でもあります。 、後でそれについて話すことはできなくなります。

  • #ref
  と
  $parent / $children
• は、親コンポーネントと子コンポーネント間の通信に適しています

  refコンポーネントで使用すると、コンポーネントのインスタンス オブジェクトを取得し、データを操作できます

  $parent
  /
  • $children: データ操作のために親/子インスタンス オブジェクトにアクセスすることもできます
  • EventBus ($emit/$on)
  父と息子、祖父と孫、兄弟コンポーネント間の適切な通信

• このメソッドは、シーン内の空の Vue インスタンスをイベント センターとして使用し、それを使用してイベントをトリガーします。イベントをリッスンすることで、コンポーネント間の通信を実現します。 UsingEventBusこのメソッドには多くの欠点があります。プロジェクトですべての人に使用することはお勧めできません。この実装アイデアだけは知っておいてください。

  • $attrs/
  $listeners
祖父と孫のコンポーネント通信に適しています

• $attrs: コンポーネントのプロパティやカスタム イベントではない親スコープ内の属性バインディングとイベントが含まれており、v-bind="$attrs" 経由で渡すことができます。内部コンポーネント。

  $listeners
  • : 親スコープに v-on イベント リスナー (.native デコレータなし) が含まれます。 v-on="$listeners" を介して内部コンポーネントに渡すことができます。 注: Vue 3 では削除されました。イベント リスナーは $attrs
  • の一部になりました。 provide / inject
  おじいちゃんと孫のコンポーネント通信に適しています
• おじいちゃんコンポーネントに変数を提供し、その変数を孫コンポーネントに挿入します。
  Vuex は、父と息子、祖父と孫、兄弟のコンポーネント通信に適しています
  • • Vuex は、Vue アプリケーションの状態管理の問題を解決するために特別に設計されています。

  (学習ビデオ共有: Web フロントエンド開発、基本プログラミング ビデオ)

以上があなたの Vue の習熟度をテストするために、面接で必ず聞かれる 3 つの質問をチェックしてください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。