[編集と要約] 知識ポイントの定着に役立つ 45 以上の Vue 面接の質問!

この記事では、基本的な知識を整理し、Vue の知識の蓄えを強化するために、Vue の面接の質問 (回答分析付き) をいくつか要約して共有します。収集する価値はありますので、ぜひ見てください。

1. Vue のライフ サイクルを簡単に説明します

アイデアへの回答:

• Vue ライフサイクルとは何ですか?

• Vue ライフサイクルの段階は何ですか?

• #Vue ライフサイクル プロセス?

• 実践と組み合わせる

• 拡張機能: Vue3Vue の変更 ライフサイクルの変更 [関連推奨事項: vuejs ビデオ チュートリアル、Web フロントエンド開発]

回答例:

• 人生 サイクルという言葉は分かりやすく、私たちの生活の中でよく目にしますが、例えば、人のライフサイクルというと、幼児期、児童期、青年期、青年期、壮年期を経ると言われます。 、そしてこの世での老後、いくつかの段階があります。 Vue のライフサイクルについても同様で、Vue の各コンポーネントは、作成から マウント、# までのプロセスを経ます。 ## を更新し、 を破棄します。これらのステージでは、Vue が ライフ サイクル フック という関数を実行して、作業を容易にします。特定の段階で独自のコードを追加します。

Vue のライフサイクルは、
• 8

  フェーズに分割できます: 作成前と後、マウント前と後 、更新前と後、破棄前と後、およびいくつかの特別な シーンの ライフ サイクル (keep-aliveアクティブ化されたとき,子孫コンポーネントのエラーをキャッチしたとき)。 Vue3 には、デバッグとサーバー側レンダリング用の 3 つの新しいシーンも追加されています。

これらの段階に対応するフック関数 API は次のとおりです。

• beforeCreate create beforeMount mounted beforeUpdate updated activated(キープアライブがアクティブ化されたときに呼び出される) deactivated(キープアライブが非アクティブ化されたときに呼び出される) beforeDestory destoryed errorCaptured (子孫コンポーネントのエラーをキャプチャするときに呼び出されます) 。 Vue3 の変更のほとんどは、接頭辞 on を付けるだけで済みます。たとえば、

  mounted は onMounted になります。ただし、beforeDestroy と destroyed は beforeUnmount と # に名前変更されました。 ##unMounted (これは、前の beforeMount および mounted に対応します。強迫性障害は大きな感謝の気持ちを表します?)

#beforeCreate

• コンポーネントの作成前に呼び出され、通常はプラグイン開発でいくつかの初期化タスクを実行するために使用されます。 # created コンポーネントの作成後に呼び出され、さまざまなデータにアクセスしたり、インターフェイス データを要求したりできます; mounted コンポーネントがマウントされるときに呼び出され、次のことができますアクセスデータ、dom 要素、サブコンポーネントなど; beforeUpdate 更新前に呼び出されます。view レイヤーはまだ更新されていません更新前のさまざまな状態を取得するために使用できます; updated 更新が完了すると呼び出されます。この時点で、ビュー レイヤは更新を完了しており、すべての状態はすでに日付; beforeUnmount インスタンスが破棄される前に呼び出されます。一部のタイマーまたはサブスクリプションをキャンセルするために使用できます; unMounted インスタンスの破棄時に呼び出されます、他のインスタンスとのリンクをクリーンアップし、すべての命令とイベント リスナーのバインドを解除できます。 Vue3: setup

  は
created
• ;

  の前に実行され、 beforeCreate はありません。そして が作成されました 。 #2. Vue で権限管理を行う方法

権限管理の一般的な要件は、ページの権限とボタンです。権限管理

具体的な実装は、フロントエンド実装とバックエンド実装の 2 つのソリューションに分かれています。 フロントエンド ソリューションは、すべてのルーティング情報をフロントエンド に設定し、ユーザーにルーティング ガードを介してログインすることを要求します。ユーザーがログインした後、ルーティング テーブル は、次の基準に基づいてフィルタリングされます。ロール に対して を実行し、次に ルート を動的に追加します。たとえば、asyncRoutes 配列を構成し、認証が必要なページでルートの meta## に roles を追加します。 # フィールドは、ユーザー ロールを取得した後、2 つの交差部分を取り、結果が空でなければ、アクセスできることを意味します。フィルタリング後、残りのルートはユーザーがアクセスできるページになります。最後に、router.addRoutes(accessRoutes) を通じてルートを動的に追加できます。

バックエンド ソリューションは、すべてのページ ルーティング情報をデータベース

に保存します。ユーザーがログインすると、アクセスできるすべてのルーティング情報がフロントエンド ベースのソリューションに返されます。ロール クエリに対して、フロントエンドは addRoute ルーティング情報を動的に追加します。 ボタン権限の制御は通常、

v-permission などのコマンド を実装し、ボタンに必要な役割を に渡します。コマンドの mounted フックの値 v-permission コマンドにより、現在のユーザー ロールとボタンに交差があるかどうかを判断できます。ある場合はボタンを維持し、そうでない場合はボタンを維持し、ボタンを削除します。

純粋なフロントエンド ソリューションの利点は、実装が

簡単であることと、ページを管理するための追加の権限が必要ないことですが、

メンテナンスが容易であることです。問題は比較的大きいです

、新しいページとロールの要件があり、フロントエンド コードの変更と 再パッケージ化とデプロイが必要です; サーバー ソリューションにはこの問題はありません専用のロールと権限の管理ページ、ページとボタンの権限情報の設定 アプリケーションはログインするたびに、データベースに対して最新のルーティング情報を取得します。

私自身の言葉:

権限管理は一般的にページ権限とボタン権限に分けられ、具体的な実装計画はフロントエンド実装とバックエンド実装に分けられます。フロントエンドの実装はフロントエンドにあります。動的ルーティング配列を維持し、ログイン後のユーザーのロールに基づいてアクセス許可でページをフィルタリングし、最後に動的ルーティングを router

から ## に追加します。 #addRoute; バックエンドの実装が異なります。重要なのは、これらのルートがバックエンドからフロントエンドに返され、その後フロントエンドによって動的に追加されるということです。 ボタンのアクセス許可は通常、v-permission を実装し、ユーザーがアクセス許可を持っているかどうかを判断してボタンを表示するかどうかを制御します。 純粋なフロントエンド ソリューションの利点は、実装が簡単であることですが、メンテナンスに大きな問題があります。新しいページとロールの要件がある場合は、コードを変更し、再パッケージ化してデプロイする必要があります。この問題は、サーバー側。 3. Vue での双方向バインディングの使用と原則

答えのアイデア:

双方向バインディングとは何ですか?

• 双方向バインディングの利点は何ですか?

• 双方向バインディングをどこで使用しますか?

• 双方向バインディングの使用方法、使用方法の詳細、Vue3 の変更点

• 原則実装の説明

• 回答:

Vue の双方向バインディングは、応答データをバインドできるディレクティブ v-model

です。ビュー、およびビュー内での変更によって値も変更される可能性があります。

• v-model

  は糖衣構文であり、その原理 (デフォルト) は、変数を # を通して
:value
• ##dom にぶら下げることです。

  を実行し、input イベントを通じて dom の変更を監視して変数の値を変更します。 v-model を使用する利点は利便性です。これにより、多くの面倒なイベント処理が軽減され、開発効率が向上します。 は通常、フォーム v-model で使用されますが、特定の値の入力および出力コントロールを表すカスタム コンポーネントでも使用できます。

• は、修飾子 (lazy/number/trim) を組み合わせることでさらに制限できますが、カスタム コンポーネントで使用する場合は多少異なります。 ## 属性と update:modelValue イベント; Vue3 では、

  v-model:foo
などのパラメーターの形式で複数の異なるバインディングを指定することもできます。子コンポーネントには
• foo

  のプロパティと update:foo のイベントが与えられます。 v-modelディレクティブとしての原則は、Vue コンパイラーがそれを value 属性バインディングと入力リスニング イベントに変換することです,上記のようにデフォルトです。実際、コンパイラは、

  checkbox
や
• radio

  などのさまざまなフォーム要素に応じてさまざまなイベントを割り当てます。 type input 変換されますchecked および change イベントに。 4. Vue コンポーネント間の通信はどのようなものですか?

  Vue コンポーネント間の通信には次のタイプがあります:

props

$emit、$on、$off、$once(最後の3 つ (Vue3 では非推奨になりました)

$children(Vue3 では非推奨になりました)、$parent

$attrs、$listeners(Vue3 では廃止)

ref

$root

##イベントバス (Vue3 で使用するのは簡単ではありません。自分でカプセル化する必要があります)

vuex、pinia

provide inject

上記のメソッドの長押し使用シナリオは、次のように分割できます。

• props /$emit/ $parent/ ref## を使用できます。 # 親コンポーネントと子コンポーネントの間 /$attrs

• $parent

  / $root を使用できます 兄弟コンポーネント間 / eventbus / vuex

レイヤー間およびコンポーネント間で使用可能

• #eventbus

  /

  vuex pinia / provide inject

5. どのような Vue パフォーマンス最適化方法を知っていますか?

ルーティング遅延読み込み:

App
• サイズを効果的に分割し、アクセスされたときのみ非同期で読み込みます

  const router = createRouter({
      routes: [
          { path : '/foo', component: () => import('./foo.vue)}
      ]
  })

## keep-alive

キャッシュ ページ: コンポーネント インスタンスの繰り返し作成を回避し、キャッシュされたコンポーネントのステータスを保存します。

• <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;keep-alive&gt; &lt;router-view v-if=&quot;$route.meta.keepAlive == true&quot;&gt;&lt;/router-view&gt; &lt;/keep-alive&gt; &lt;router-view v-if=&quot;$route.meta.keepAlive != true&quot;&gt;&lt;/router-view&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

Use

v-show

再利用
• DOM

  : コンポーネント ##v-for

  トラバーサルの繰り返し作成を回避し、
v-if# の同時使用を回避します。 ## (実際、これは Vue3 での書き方としては間違っています)

• v-once と

  v-memo
: 次のデータを使用します。変更されなくなりました
• v-once

  ; 条件に基づいて更新をスキップする場合は v-memo を使用してください 長いリストのパフォーマンスの最適化:ビッグ データの長いリストがある場合は、仮想スクロールを使用して、小さな領域のコンテンツのみをレンダリングできます。一部のオープン ソース ライブラリの破壊 (vue-virtual-scroller /

  vue-virtual-scroll-grid
)

• イベント: Vue がコンポーネントが破棄されると、そのすべての命令とイベント リスナーが自動的にバインド解除されますが、コンポーネント自体のイベントのみがバインドされます。

  #画像の遅延読み込み、カスタマイズされた
v-lazy
• 命令 (参照プロジェクト:

  vue-lazyload

  )

• ##サードパーティのプラグインはオンデマンドで導入されますelement-plus大きすぎることを避ける

サブコンポーネント分割戦略: より重い状態のコンポーネントが適しています分割用

• SSR
サーバー側レンダリングは、最初の画面のレンダリングが遅いという問題を解決します
• 6。更新後に Vuex 状態が失われるのはなぜですか?解決しますか?
  感想:

更新後に Vuex の状態が失われるのはなぜですか?

#解決策

• サードパーティ ライブラリと原則の議論

• 個人的な理解

• 回答:

• Vuex は状態をメモリに保存するだけなので、更新すると状態は失われます。あなたはそれを保存しなければなりません、立ち上がってください。

localStorage

を使用して

Vuex
• の状態を保存し、

  store

  を使用して値を # として取り出すことができます。 ##state
mutation
• が送信されると、

  の初期値が localStorage に格納されます。 vuex-persist や vuex-persistedstate などのプラグインを使用できます。プラグイン オプションを使用して、どれを永続化する必要があるかを制御できます。内部原則は、mutation の変更をサブスクライブすることで統合処理を実行することです。

• ここには 2 つの質問があります。1 つは、ユーザーが localStorage を手動で変更した場合はどうなるかということです。そうすると、私の Vuex のステータスも変わりませんでしたか?次に、localStorage API は文字列のみを保存できるため、

  JSON.stringify
を介してデータを文字列に変換することしかできません。また、保存するデータが
• である場合は、Map のデータを参照する必要があります。

  、Set、Function、JSON.stringify は変換後に変更されます {} と失われます。 最初の問題に対する私の解決策は、storage イベント<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>window.addEventListener(&quot;storage&quot;, function () { localStorage.clear(); window.location.href = &amp;#39;/login&amp;#39; console.error(&quot;不要修改localStorage的值~~~&quot;); });</pre><div class="contentsignin">ログイン後にコピー</div></div>をリッスンしてデータをクリアすることです。2 番目の問題に対する解決策はありません。の場合、参照タイプ Map と

  Set
を適用しないことのみを選択できます。

7. Vue3 は、defineProperty の代わりに Proxy を使用するのはなぜですか?

アイデア:

Attributeインターセプトのいくつかの方法

defineProperty の問題

プロキシの利点
その他の考慮事項
• 回答:

• JS
でプロパティをインターセプトするには 3 つの一般的な方法があります:

defineProperty

、getter/setter、および

Proxy

• Vue2 中使用 defineProperty 的原因是， 2013 年只能使用这种方式，由于该 API 存在一些局限性，比如对于数组的拦截有问题，为此 Vue 需要专门为数组响应式做一套实现。另外不能拦截那些新增、删除属性；最后 defineProperty 方案在初始化时需要深度递归遍历处理对象才能对它进行完全拦截，明显增加了初始化的时间。

• 以上两点在 Proxy 出现后迎刃而解，不仅可以对数组实现拦截，还能对 Map、Set 实现拦截；另外 Proxy 的拦截也是懒处理行为，如果用户没有访问嵌套对象，那么也不会实施拦截，这就让初始化的速度和内存占用改善了。

• Proxy 有兼容性问题，完全不支持IE

8. 怎么实现路由懒加载？

思路：

• 必要性

• 何时用

• 怎么用

• 使用细节

回答：

• 当打包构建时，Javascript 抱回变得非常大，影响页面加载。利用路由懒加载我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应最贱，这样更加高效，是一种优化手段。

• 一般来说，对于所有的路由都使用动态导入是个好主意

• 给 component 选项配置一个返回 Promise组件的函数就可以定义懒加载路由.例如：

{
  path: '/login',
  component: () => import('../views/login/Login.vue')
},

• 结合注释

{
  path: '/login',
  component: () => import(/* webpackChunkName: "login" */'../views/login/Login.vue')
},

vite中结合rollupOptions定义分块 5. 路由中不能使用异步组件

9. history模式 和 hash 模式有何区别？

• Vue-Router 有三个模式，其中 history 和 hash 更为常用。两者差别主要在显示形式和部署上，

• hash模式在地址栏现实的时候有一个 #，这种方式使用和部署都较简单；history模式url看起来更优雅没关，但是应用在部署时需要做特殊配置，web服务器需要做回退处理，否则会出现刷新页面404的问题。

• 在实现上 hash模式是监听hashchange事件触发路由跳转，history模式是监听popstate 事件触发路由跳转。

10. 说说 nextTick 的使用和原理？

• 在 Vue 中 nextTick 是等待下一次 DOM 更新刷新的工具方法。

• Vue 有一个异步更新策略，意思是如果数据变化，Vue 不会立刻更新 DOM，而是开启一个队列，把组件更新函数保存在队列中，在同一时间循环中发生的所有数据变更会异步的批量更新。这一策略导致我们对数据的修改不会立刻体现在 DOM 上，此时如果想要获取更新后的 DOM 状态，就需要使用 nextTicknextTick 接受一个函数，我们可以在这个函数内部访问最新的 DOM 状态 在开发时，有两个场景我们会用到 nextTick ：

  • created 中想要获取 DOM;
  • 响应式数据变化后获取 DOM 更新后的状态;

• nextTick 的原理：在 Vue 内部，nextTick 之所以能够让我们看到 DOM 更新后的结果，是因为我们传入的 callback 会被添加到队列刷新函数的后面，这样等队列内部的更新函数都执行完毕，所有 DOM 操作也就结束了，callback 自然能够获取最新的 DOM 值。

11. v-for 和 v-if 优先级

先回答答案：在 vue2 中， v-for 的优先级更高 但是在 vue3 中， v-if 的优先级更高

拓展：无论什么时候，我们都不应该把 v-for 和 v-if 放在一起， 怎么解决呢？一是可以定义一个计算属性，让 v-for 遍历计算属性。二是可以把 if 移到内部容器里（ul ol）或者把v-for移植外部容器(template)中

vue2 ドキュメントvue3 ドキュメント

12. Vuex ステータスの変化を監視するにはどうすればよいですか?

• watch

• store.subscribe()

watch メソッド、文字列の形式でリッスンできます $store.state.xx; subscribe メソッドのパラメータはコールバック関数であり、コールバック関数は mutation## を受け入れます# オブジェクトと state オブジェクトでは、mutation.type を通じてリスニング ターゲットを決定できます。 wtach メソッドはシンプルで使いやすいですが、subscribe は少し面倒です。通常、vuex プラグインで使用されます (vuex 永続化プラグインについて言及することもできます) vuex-persist, vuex-persistedstate)

13. Vuex の欠点は何だと思いますか?

#永続性はサポートされていないため、ページの更新状態が失われます

• #モジュールの使用は面倒です

• サポートされていません
ts
• (または非常に不親切)
  vue3 pinia の方が良い組み合わせです。

14. ref と reactive の類似点と相違点は何ですか?

どちらも応答性の高いオブジェクトを返すことができます (

ref
• )応答性のある

  Ref オブジェクトである場合、reactive は応答性のあるプロキシ オブジェクトを返します。

  #ref
は通常、単一値の応答を処理するために使用され、
• reactive

  はオブジェクト タイプのデータを処理するために使用されます。 ##ref には

  .value
を通じてアクセスする必要があります。これにより、ビュー内の
• ref

  と .value# が自動的に削除されます。 ## は必須ではありません。 ref はオブジェクトまたは配列を受け取ることができますが、引き続き reactive; reactive によって内部的に実装されます。オブジェクトは自動的に削除されます ref ; 展開演算子を使用して reactive によって返されたリアクティブ オブジェクトを展開すると、応答性が失われます。これは toRefs()# と組み合わせることができます## 値を Ref オブジェクトに変換します。後で展開します。 reactive は内部で Prxoy プロキシを使用してオブジェクトに対するさまざまな操作をインターセプトし、ref は内部で

  RefImpl
クラス、set
• get value/set value

  、値へのユーザー アクセスをインターセプトします。 16. Vue でコンポーネントを拡張するにはどうすればよいですか? #論理拡張: mixins

  、
extends

、

composition api:

• コンテンツの拡張: スロット

  ミックスイン 非常に柔軟ですが、矛盾があり、混乱を招きます。 extends

  はあまり一般的には使用されないオプションですが、
mixins
• との違いは、単一のオブジェクトのみを拡張でき、

  mixins

  よりも優先度が高いことです。

データとメソッドが混在しています

ソースを明確に特定できません 現在のコンポーネントの変数と名前の競合が発生する可能性があります 、合成 API 独立した応答モジュールを使用すると、独立したロジックを簡単に記述して応答データを提供できるため、コードの可読性と保守性が向上します。 拡張子: Vue.mixin (グローバル ミックスイン) Vue.extend (サブクラスを作成するためのクラス/コンポーネントの継承に似ています)

17 .vue -loader とは何ですか?

vue-loader は、単一ファイル コンポーネント (SFC) を処理するための Webpack ローダーです。

vue-loader

では、

.vue
• ファイルの形式でコードを記述し、そのコードを

  template script

style に分割できます。

• webpack パッケージ化すると、vue-loader## が loader の形式で呼び出されます。

• #vue-loader

  が実行されると、SFC 処理の言語ブロックごとに個別の loader チェーンが使用されます。そして最後に、これらの個々のブロックを最終コンポーネント モジュールに組み立てます

• 18. 子コンポーネントは親コンポーネント データを変更できますか

  直接変更することはできません。 コンポーネント開発には一方向のデータ フローの原則があり、親コンポーネントのデータを子コンポーネントで変更しないのが常識です。どうしても変更する必要がある場合親コンポーネントの

  を変更してください。

  19. 動的ルーティングを定義する方法と、渡された動的パラメーターを取得する方法は?

  これを実現するには、/users/:id などのパスで動的フィールドを使用できます。ここで、:id はパス パラメーターです。 this.$route.parmas を通じて取得でき、複数のパラメータを指定できます。$route オブジェクトは、query # などの他の有用な情報も公開します。 ## ハッシュ など

  20. Vue データの応答性についての理解を話す

  感想:
  • 応答性とは何ですか?

  • vue はなぜ応答性が必要なのでしょうか?

  • メリットは何ですか?

  • vue の応答性はどのように実装されていますか?また、その利点と欠点は何ですか?

  #vue3 の応答性の新しい変更点

  回答:
  データ応答性は、データの変更を検出して対応できるメカニズムです。
  • vue

    で解決すべき中心的な問題の 1 つは、データ層とビュー層を接続することです。ドライブはデータの変更を通じてビューを更新します。これを行うには、データが応答的に処理される必要があります。

  データ応答性と仮想
  • DOM

    および patch アルゴリズムにより、面倒な作業を必要とせず、データを操作してビジネスに気を配るだけで済みます。 DOM 操作により、開発効率が向上し、開発の困難さが軽減されます。

  • vue2

    データ応答性の実装の中核は、Object.defineProperty() メソッドを通じてデータをインターセプトすることです。 ## データ生成時に依存関係の収集を行う set データ生成時に更新通知を行う。このメカニズムはデータの応答性の問題を解決するのに非常に優れていますが、実際の使用には欠点もあります。たとえば、 初期化中の再帰的トラバーサルはパフォーマンスの低下を引き起こします; 新規または削除された属性を監視できません。 、vue では、オブジェクト配列属性やデータ構造を追加および削除するには、Vue.set/delete のような特定の API を使用する必要があります。 Ma と Set もサポートされていません。これらの問題を解決するために、

    Vue3
  はこれを部分的に書き直しました。
  • ES6

    の Proxy プロキシを使用してデータに応答するように実装されています。これには多くの利点があり、初期化パフォーマンスとメモリが大幅に向上し、特別な API は必要ありませんが、IE ブラウザはサポートされていません。

  21. テンプレートからレンダリングまでに行われる処理

  Asktemplate

  から

  renderこのプロセスは、実際には vue compiler の動作原理に関するものです。 アイデア:

  コンパイラの概念の紹介

  • コンパイラの必要性について説明します

  • コンパイラのワークフローの説明

  • ## 回答:

  # # Vue

  には、
  compiler
  • と呼ばれる独自のコンパイル モジュールがあります。その主な機能は、

    template を js 実行可能ファイル render にコンパイルすることです。 Function#このコンパイル プロセスが必要な理由は、大学でのビュー テンプレートの作成を容易にするためです。それに比べて、私たちは依然として直感的で効率的な HTML

    を使用してビューを作成することを好みます。手書きの
  render
  • 関数は非効率であるだけでなく、コンパイラによる最適化の機能も失います。

    Vue

    コンパイラは最初に
  template
  • (

    Parse ) を解析し、終了後に、抽象構文ツリー AST を作成し、AST に対して詳細な処理変換 (transform) を実行し、最終的に結果の AST を ## に生成します。 #js コード、つまり render function22. コンポーネントをキャッシュして更新する方法

  キャッシュ コンポーネントは keep-alive コンポーネントを使用でき、含めるコンポーネントと除外するコンポーネントを指定できます。

  • Vue3

    vue-router
  の使用法が大きく変わりました。以前は、
  • keep-alive

    に ## が含まれていました。 #router -view、現在 router-view には keep-alive が含まれていますキャッシュ後にデータを取得したい場合は、 actived フックまたは beforeRouteEnter

    (
  vue-router
  • のガード)

    キープアライブを使用できます は、内部で map

    を定義する一般的なコンポーネントで、作成されたコンポーネント インスタンスをキャッシュし、それが返すレンダリング関数が、埋め込まれた
  component# に対応する
  • vnode を内部で検索します。 ## コンポーネント。

    、変更されたコンポーネントがマップ内に存在する場合は、それを直接返します。 component の is 属性はリアクティブ データであるため、それが変更される限り、keep-alive の render 関数は再実行されました。 </li></ul><h2 id="strong-仮想-DOM-strong"><strong>23. 仮想 DOM</strong></h2><ul style="list-style-type: disc;"><li><p>仮想 <code>DOM とは何ですか? 仮想 DOM の本質は Javascript オブジェクトです。

  • 仮想 DOM を導入する理由（利点） これにより、操作数 DOM が効果的に削減され、クロスプラットフォーム実装が容易になります。

  • 仮想 DOM を生成するにはどうすればよいですか? compiler コンパイラは、template テンプレートをレンダリング関数にコンパイルします。このレンダリング関数は、mount マウント プロセス中に呼び出され、返されるオブジェクトは ## です#VirtualDOM。マウントが完了するとアップデート処理に入ります。一部の応答データが変更されると、コンポーネントが render になり、その時点で新しい 仮想 DOM が生成され、diff が実行されます。最後のレンダリング結果。ビューを効率的に更新するための操作、最小限の操作 dom。

  24. 非同期コンポーネントとは

  • 非同期コンポーネントはすぐにはロードされませんが、必要なときにロードされます。 . ロードされたコンポーネント。大規模なアプリケーションでは、コードを小さなチャンクに分割し、非同期コンポーネントを使用する必要があります。

  • ルーティングの切り替え時にコンポーネントを遅延ロードできるだけでなく、コンポーネント内で非同期コンポーネントを使用してコードをより細かく分割することもできます。

  • 非同期コンポーネントを使用する最も簡単な方法は、

    loader 関数を defineAsyncComponet に直接指定し、それを ES モジュールと組み合わせて動的にインポートすることです。関数import すぐに実装できます。 Vue3 非同期コンポーネントを Suspense コンポーネントと組み合わせて使用​​することもできます。

  • 非同期コンポーネントはルーティング遅延読み込みと混同されやすいですが、実際には同じものではありません。非同期コンポーネントを使用して遅延読み込みルートを定義することはできません。これは

    Vue フレームワークによって処理され、ルーティング コンポーネントの読み込みを処理するのは vue-router です。ただし、遅延ロードされたルーティング コンポーネントで非同期コンポーネントを使用することはできます。

  25. Vue の長いリストの最適化のアイデアについて話す

  大量のデータを避ける: ページングを使用してデータを取得できます
  大量のデータのレンダリングを避ける: vue-virtual-scroller などの仮想スクロール ソリューションは、ビューポート範囲内のデータのみをレンダリングします
  更新を避ける:
  • v-once を使用できます。
  更新の最適化: v-memo によるキャッシュ グループ番号、条件付き更新、使用率の向上、不要な更新の回避
  • #​​##オンデマンドでのデータのロード:
  lazy を使用できます。 reading
  • メソッド。ユーザーが必要なときにデータをロードします。
  26. computed & watch
  • computed

    は計算プロパティ watch## です。 # はリスナーです。

  computed
  • は通常、テンプレート内の複雑なロジックを処理するために使用され、

    watch は通常、応答性の高いオブジェクトの変更を監視するために使用されます。操作、

  watch
  • は非同期操作を実行できますが、

    computed は実行できません。

    計算プロパティは、
  set
  • と

    get の 2 つのオプションを持つオブジェクトを渡します。これらは、読み取りと書き込みの両方が可能な計算プロパティと呼ばれます。関数が渡される場合、デフォルトは get オプションです。watch はオブジェクトを渡し、deep、immediate、その他のオプションを設定できます

  vue3

  • watch にはいくつかの変更がありました。たとえば、ドット演算子以外の文字列式を検出できなくなり、reactivity API に新しい が追加されました。 watch と watchEffect は、watch オプションを完全に置き換えることができ、より強力です

  27。 SPAとSSRの間って何ですか？
  SPA
  • (シングル ページ アプリケーション) は、

    シングル ページ アプリケーションです。一般に、クライアントサイド レンダリング、または短縮して CSR とも呼ばれます。 SSR (サーバーサイドレンダー) は サーバーサイドレンダリング です。一般に Multiple Page Application (Multiple Page Application) とも呼ばれ、MPA と呼ばれます。

  SPA
  • は、初回のみ

    html ファイルをリクエストし、その後は JSON データのみがリクエストされます。これにより、ユーザー エクスペリエンスが向上し、トラフィックが節約され、サーバーへの負荷が軽減されます。ただし、最初の画面のロード時間が長くなり、SEO 不親切です。上記の欠点を解決するために、SSR ソリューションがあり、HTML コンテンツはサーバー上で一度生成されるため、最初の画面の読み込みが速く、検索エンジンも簡単にクロールできます。ページ情報。しかし同時に、SSR ソリューションにはパフォーマンスや開発の制限などの問題もあります。

    選択に関しては、最初の画面読み込みの最適化ニーズと SEO ニーズがある場合は、SSR を検討できます。

  • しかし、これが唯一の代替案ではありません。たとえば、頻繁に変更されない一部の静的 Web サイトの場合、SSR はリソースを無駄にします。プリレンダリング ソリューションを検討することもできます。さらに、
  nuxt.js/next.js
  • は SSG 静的 Web サイト生成ソリューションを提供しており、これも優れた静的 Web サイト ソリューションであり、いくつかの CI メソッドと組み合わせることで、優れた最適化効果を実現できます。

  28. diff 算法

  回答思路：

  • diff算法是干什么的？

  • 必要性

  • 何时执行

  • 具体执行方式

  • 拔高：说一下vue3中的优化

  回答：

  • Vue 中的 diff 算法称为 patching 算法，虚拟DOM要想转化为真实DOM就需要通过 patch 方法转换。

  • 最初 Vue1.x 视图中农每个依赖均有更新函数对应，可以做到精确更新，因此不需要 虚拟DOM 和 patching 算法支持，但是这样粒度过细导致 Vue1.x 无法承载较大应用；Vue2.x 中为了降低 Watcher 粒度，每个组件只有一个 Watcher 与之对应，此时就需要引入 patching 算法才能精确找到发生变化的地方并高效更新。

  • vue 中 diff 执行的时刻是组件内响应式数据变更触发实例执行其更新函数时，更新函数会再次执行 render函数 获得最新的 虚拟DOM ，然后执行 patch函数，对比新旧虚拟DOM，将其转化为对应的 DOM 操作。

  • patch 过程是一个递归过程，遵循深度优先、同层比较的策略；以 vue3 的patch 为例：

    • 首先判断两个节点是否为相同同类节点，不同则删除重新创建
    • 如果双方都是文本则更新文本内容
    • 如果双方都是元素节点则递归更新子元素，同时更新元素属性
    • 更新子节点时又分了几种情况：
      • 新的子节点是文本，老的子节点是数组则清空，并设置文本；
      • 新的子节点是文本，老的子节点是文本则直接更新文本；
      • 新的子节点是数组，老的子节点是文本则清空文本，并创建新子节点数组中的子元素；
      • 新的子节点是数组，老的子节点也是数组，那么比较两组子节点，更新细节blabla

  • vue3 中引入的更新策略：编译期优化 patchFlags、block等

  29. 如何从0到1架构一个Vue项目，说说有哪些步骤，插件，目录结构怎么组织

  • 从 0 创建项目我大致会做以下事情：项目构建、引入必要插件、代码规范、提交规范、常用库和组件

  • 目前vue3项目我会用vite或者create-vue创建项目

  • 接下来引入必要插件：vue-router、vuex/pinia、element-plus、antd-vue、axios等等

  • 其他常用的库有 像lodash、dayjs、nprogress等等..

  • 下面是代码规范: editorconfig、prettier、eslint

  • 最后是提交规范，可以使用husky、Commitizen

  • 目录结构我喜欢按照下面的结构来

  + |- /src
  +   |- /assets 存放资源
  +     |- /img   
  +     |- /css   
  +     |- /font   
  +     |- /data   
  +   |- base-ui  存放多个项目中都会用到的公共组件
  +   |- components 存放这个项目用到的公共组件
  +   |- hooks 存放自定义hook
  +   |- views 视图
  +   |- store 状态管理
  +   |- router 路由
  +   |- service 网络请求
  +   |- utils 工具
  +   |- global 全局注册、全局常量..

  30. 你如何实现一个Vue-Router

  一个 SPA 应用的路由需要解决的问题时页面跳转内容改变同时不刷新，同时路由还需要已插件形式存在，所以：

  • 首先我会定义一个 createRouter 函数，返回路由器实例，实例内部做几件事；

    • 保存用户传入的配置项
    • 监听 hash 或者 popstate 事件
    • 回调里根据 path 匹配对应路由

  • 将 router 定义成一个 Vue 插件，即实现 install 方法，内部做两件事：

    • 实现两个全局组件：router-link和 router-view，分别实现页面跳转和内容显示
    • 定义两个全局变量：$router 和 $route，组件内可以访问当前路由和路由器实例

  31. 什么情况需要使用Vuex模块？

  • 在项目规模变大的之后，单独一个store对象会过于庞大臃肿，此时通过模块方式可以拆分来便于维护

  • 可以按之前规则单独编写资规模代码，然后在主文件中通过 modules 选项组织起来：createStore({modules: {...}})

  • これを使用する場合、サブモジュールのステータスにアクセスするときに、登録されているモジュール名を追加する必要があることに注意してください。しかし同時に、getter、mutations、および actions はグローバル空間にあり、以前と同じ方法で使用できます。完全な分割を実現したい場合は、サブモジュールに namespace オプションを追加する必要がありますが、このとき、再度アクセスするときに名前空間プレフィックスを追加する必要があります。

  • モジュール メソッドはコードを分割できますが、欠点も明らかです。使いにくく、エラーが発生しやすく、型システムのサポートが非常に貧弱なので、役に立ちません。 。 pinia はこの分野で明らかに大幅に改善されており、切り替える時期が来ています。

  32. vue コンポーネントがルート ノードを 1 つしか持てない理由

  • vue2 中確かに、コンポーネントが持つことができるルートは 1 つだけですが、vue3 のコンポーネントはすでに複数のルート コンポーネントを持つことができます。

  • これが必要な理由は、vdom が単一ルート ツリー構造であり、patch メソッドがルート ノードから開始されるためです。 Traversal をトラバースする場合、ルート ノードが 1 つだけ必要になります。コンポーネントは vdom にも変換され、当然この要件を満たすはずです。

  • vue3 複数のルートノードを記述できるのは、抽象ノードである Fragment の概念が導入されているためです。コンポーネントに複数のルートがあることが判明した場合は、Fragment ノードを作成し、複数のルート ノードをその children として使用します。将来の pathch では、Fragment ノードであることが判明した場合、children を直接走査して作成または更新します。

  33. v-once の使用シナリオは何ですか?

  • v-once は vue の組み込み命令であり、その機能は指定されたコンポーネントまたは要素のみをレンダリングすることです1 回だけ実行して、今後はスキップして更新してください。

  • 最初のレンダリング後に変更する必要がなくなった要素やコンポーネントがある場合、この場合は v-once を使用するのが適切です。これらのデータが変更されると、vue もコード最適化手法である更新をスキップします。

  • 使用するコンポーネントまたは要素に v-once を追加するだけです。

  追加:

  • vue3.2 その後、 v-memo が追加され、このディレクティブは、条件付きでテンプレートをキャッシュし、その更新を制御できます。

  • v-once の原理: コンパイラは v-once があることを検出すると、最初の計算結果を次の場所に保存します。キャッシュ オブジェクト、コンポーネント。再度レンダリングするときは、再計算を避けるためにキャッシュから取得されます。

  34. ネストされたルーティングはどのようなシナリオで使用されますか?

  • 日々の開発では、アプリケーションの一部のインターフェイスは複数のレイヤーで構成されています。ネスト コンポーネントで構成されます。この場合、通常、url の各部分がネストされたコンポーネントに対応します。この関係を表現するために、vue-router でネストされたルーティングを使用できます。
  • この現象は、2 つのルートを切り替えるときに、共通のビュー コンテンツがあることを示しています。このとき、通常は親コンポーネントが抽出され、その中に view-router が配置され、論理的な入れ子に対応する物理的な入れ子が形成されます。ネストされたルートを定義するときは、children 属性を使用してネストされた関係を整理します。
  • 原則として、ネストの深さは router-view コンポーネント内で決定され、この深度は、対応するレンダリング コンポーネントを取得してレンダリングするために、一致したコンポーネント配列 matched のインデックスとして使用されます。

  説明できない場合は、例を挙げてください。ページを開発するときに、トップ ナビゲーション バーを表示し、ナビゲーション バーを通じて別のページにジャンプする必要があり、トップ ナビゲーション バーをすべてのページに表示する必要がある場合は、ネストされたルーティングを使用できます。例を示します。リストの詳細ページを表示する必要がある場合、多くの場合、ネストされたルーティング (detail/:id)

  35. Vuex ステータスの変化を監視するにはどうすればよいですか?

  • watch

  • store.subscribe()

  watch メソッド、文字列の形式でリッスンできます $store.state.xx; subscribe メソッドのパラメータはコールバック関数であり、コールバック関数は mutation## を受け入れます# オブジェクトと state オブジェクトでは、mutation.type を通じてリスニング ターゲットを決定できます。 wtach メソッドはよりシンプルで使いやすいですが、subscribe は少し面倒で、通常は

  36. Vue インスタンスのマウント プロセス中に何が起こりましたか?
  インスタンスをマウントするプロセスは app.mount() のプロセスで、全体として
  • Initialization

    と ## の 2 つのことを行います。 #確立更新機構

    初期化会議
  コンポーネントインスタンスの作成
  • ,

    コンポーネントステータスの初期化,各種レスポンシブデータの作成

  • 更新メカニズムの再開 このステップでは、コンポーネント更新関数がすぐに実行されます。これにより、初めてレンダリング関数が実行され、patch が実行されて vnode## が変換されます。 # 以前に取得したデータを dom; 同時に、内部の応答データとコンポーネントの更新関数の間に依存関係を作成し、将来データが変更されたときに対応する更新関数が実行されるようにします。

  37. キーの役割

  • キーの役割は主に次のようなものです。仮想 DOM を効率的に更新します。

  • key は、patch プロセス中に 2 つのノードが同じノードであるかどうかを判断するための vue の重要な条件です。 (もう 1 つは要素タイプです)、key が設定されていない場合、その値は unknown となり、vue は常にこれらが 2 つの同一のノードであると考える可能性があります。大量の dom 更新操作が必要となる更新操作を実行することは、明らかにお勧めできません。

  • key は実際の使用時に設定する必要があり、配列インデックスの使用はできる限り避けるべきです。これにより、隠れた バグが発生する可能性があります。 。

  #38. watch と watchEffect

  • ##watchEffect関数をすぐに実行し、受動的に依存関係を追跡します。 、渡される関数は収集されたデータ ソースに依存し、コールバック関数でもあります。watch は 1 つ以上の応答性の高いデータ ソースを検出し、データ ソースが変更されると ## The #immediate# を通じてコールバック関数を呼び出します。 ## オプションをすぐに実行するように設定することもできます。

  watchEffect
  • は特別な

    watch です。レスポンシブデータの前後の値を気にしない場合は、watchEffect を使用できます。他の場合には、watch を使用できます。

  39. 親子コンポーネントの作成とマウントのシーケンス

  親が作成されました -> 子が作成されました -> 子がマウントされました -> マウントされました親

  理由:

  Vue

  作成は再帰的なプロセスです。

  最初に親コンポーネント を作成します。 サブコンポーネントがある場合は、サブコンポーネント が作成されるので、作成します。最初に親コンポーネント、次に子コンポーネントがあります。子コンポーネントが最初に作成されると、Mounted フックがキューに追加され、## の後に実行されます。 #patch が完了しました。子コンポーネントの mounted# が表示されます。## フックは キュー に選択されているため、patch がこれらの実行を完了するまで待ちます。フック。 40. Vuex についての理解を話してください

  ##vuex は、vue アプリケーション用に特別に開発された状態管理パターン ライブラリです。

  複数のコンポーネントが状態を共有している場合、またはプロジェクト内のコンポーネントの管理が難しい場合は、グローバル シングルトン モードでグローバル状態を管理する vuex を使用できます。
  基本的なコア概念には、状態、突然変異、アクション、ゲッター、モジュールなどが含まれます。
  使用プロセスについての感想を教えてください。 ts はフレンドリーではなく、モジュールは使いにくいです。ページを更新するとデータも消えます。
  • ##41. 再帰コンポーネントとは何ですか?どのような使用シナリオがありますか?

  #コンポーネントがコンポーネント名を通じてそれ自体を参照する場合、これは再帰コンポーネントです。

  • Tree

    や

    Menu
  などのコンポーネント。そのノードには子ノードが含まれることが多く、子ノードの構造は親と同じであることがよくあります。ノードです。このようなコンポーネントのデータはツリー構造になっていることが多く、これは再帰コンポーネントを使用する一般的なシナリオです。

  • 42. カスタム命令を書いたことがありますか?

  カスタム命令の使用は
  定義、登録、使用に分かれます

  定義方法はオブジェクト形式と関数形式の 2 つがあります, 前者はコンポーネント定義に似ており、さまざまなライフサイクルがあります。後者は、mounted および

  updated

  • Registration の場合にのみ実行されます。 app.directive グローバル登録は、オプション

  • を使用してローカルに登録することもできます。使用する場合は、登録名の前に v- を追加するだけです。

  • v-copy

    コピーして貼り付け

  • v-lazy 画像の遅延読み込み

  • v-debounce アンチシェイク

  • ##v-permission ボタン許可

  • #v-longpress

    長押し

  • 43. Vue3 の新機能
    API レベル

  ##Composition API

  ##setup
  構文シュガー

  • テレポート
  テレポート

  • フラグメント
  複数のルート ノードを持つことができます

  • 放出

  • createRenderer
  カスタム レンダラー

  • SFC
  状態 -ドリブン
  • css

    変数 (<style> の v-bind)

  • #さらに、Vue3 には多くの 2 つのポイントと改善点もあります。 <ul> <li>高速化<ul> <li>仮想<code>DOM 書き換え

  • コンパイラの最適化: 静的ブースト、patchFlags、block 待機
  • プロキシに基づく応答性の高いシステム
小規模: ツリーシェイキングの最適化が向上
• メンテナンスが容易: TS モジュール式
拡張が容易になりました
• 独立したレスポンシブ モジュール
  • カスタム レンダラー

44. Vue3 の設計目標と最適化ポイント

最大の設計目標は、

Vue2 を置き換えることです。これを達成するために、Vue3 は次のような点で大幅な改善が加えられています。使いやすさ、フレームワークのパフォーマンス、スケーラビリティ、保守性、開発経験など。

• 使いやすさ: 主に

  API 簡略化された v-model v-model と sync 修飾子の組み合わせになります。同様に、関数 props には h(type,props,children) があり、プロパティ、特性、イベントなどの区別を考慮する必要はなく、フレームワークが判断します。これにより、使いやすさが向上します。

• 開発エクスペリエンスの観点:

  Teleport Fragment Suspense などの新しいコンポーネントにより、特定のシナリオ向けのコード作成が簡素化されます。 。 setup 構文シュガーにより、開発エクスペリエンスが大幅に向上しました。

#スケーラビリティの向上: 独立した
• reactivity

  モジュール、カスタム レンダリング API など。

保守性の点では、主に
• Composition API

  を使用することで、再利用性の高いビジネス ロジックを簡単に作成できます。 TS サポートも改善されました。

パフォーマンス: コンパイラーの最適化、
• Proxy

  に基づく応答性の高いシステム。

。 。 。

45. Vue3 のパフォーマンス向上はどのような点に反映されていますか?

コードの側面:
• Proxy

  に基づいて実装された新しいレスポンシブ API、初期化イベントとメモリ使用量が大幅に改善されました。 コンパイル: 静的プロモーション、動的なコンテンツのタグ付け、イベント キャッシュ、ブロックなど、より多くのコンパイル最適化処理が行われ、多数の差分プロセスを効果的にスキップできます

• ## パッケージ化:

  tree-shaking

  のサポートが強化され、サイズが小さくなり、読み込みが速くなります (
vue3 のすべての API は ES6 モジュール化を通じて導入されているため、これにより webpack またはパッケージ化ツールが可能になります)ロールアップなど、パッケージ化中に未使用の API を排除してバンドル サイズを最小限に抑える
• )

  46.

  $attrs
および

$listeners## ＃ それは何をするためのものか？

$attrs props で定義されていない属性を取得するには、

v-bind="$attrs"

を使用できます。属性 透過的な送信 $listeners はイベントの取得に使用されます。vue3 は削除され、attrs に統合され、使いやすくなりました。 47. コンポジション API とオプション API の違いは何ですか? Composition API は、

Reactivity API

、ライフフック、依存関係注入を含む一連の API であり、ユーザーは関数をインポートしてコンポーネントを作成できます。 Options API コンポーネント オプションのオブジェクト形式を宣言してコンポーネントを作成します。

Composition API はより簡潔で、ロジックの再利用がより効率的です。過去の mixins のさまざまな欠点を Options API (競合と混乱) で解決しました。さらに、

Composition API

はより自由であり、 がありません。オプション API このような固定された記述方法により、論理コードを混乱させることなく、より効果的にまとめて整理できます。最後に、Composition API はより優れた型推論を備えており、ts サポートに適しています。フレンドリーです。 48. Vue のベスト プラクティスについて知っていることコーディング スタイル:

使用するコンポーネントHTML 要素との競合を避けるために名前を付けるときは複数の単語のスタイルを使用してください

ピーク属性に名前を付けます。テンプレートまたは jsxx

• v- で肉串を使用します。キーを追加する必要があります。v-if''

• パフォーマンス:
ルーティング遅延読み込みと一緒に記述しないでください。アプリケーション サイズの削減

SSR

最初の画面読み込みイベントの削減
• v-once

  v-memo

• ロングリスト仮想スクロール技術オブジェクトが深くネストされたビッグデータに使用可能

  shallowRef
または
• shallowReactive

  オーバーヘッドを削減します

• 不必要なコンポーネントの抽象化を回避します

  49. 違いは何ですか突然変異と行動の間?

• mutation
は

state

action を変更するために使用され、

mutation

を送信するために使用され、action 非同期操作を含めることができます50. 0から vuex を実装する方法

Store## を実装するには# storage global Status

ステータスの変更に必要な API を提供するには:

commit({type, payload})
• ,

  dispatch(type, payload)

Store を実装するには、Store クラスを定義できます。コンストラクターはオプション options を受け入れ、プロパティ ## を設定します。 #state ステータスを外部に公開し、commit および dispatch 変更プロパティを提供します。ここでは、state を応答オブジェクトとして設定し、Store を Vue プラグイン (インストール メソッド) として定義する必要があります。

commit ユーザーの受信 mutations を取得して実行すると、ユーザーが提供したメソッドに従ってステータスを変更できます。 は似ていますが、dispatch は非同期結果を処理するためにユーザーに Promise を返す必要があります。 (学習ビデオ共有:

vuejs 入門チュートリアル

、基本プログラミング ビデオ )

以上が[編集と要約] 知識ポイントの定着に役立つ 45 以上の Vue 面接の質問!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。