この記事では、基本的な知識を整理し、Vue の知識の蓄えを強化するために、Vue の面接の質問 (回答分析付き) をいくつか要約して共有します。収集する価値はありますので、ぜひ見てください。
![[編集と要約] 知識ポイントの定着に役立つ 45 以上の Vue 面接の質問!](https://img.php.cn/upload/article/000/000/024/63b41959a5fed714.jpg)
アイデアへの回答:
Vue ライフサイクルとは何ですか?
Vue ライフサイクルの段階は何ですか?
#Vue ライフサイクル プロセス?
実践と組み合わせる
拡張機能: Vue3Vue の変更 ライフサイクルの変更 [関連推奨事項: vuejs ビデオ チュートリアル、Web フロントエンド開発]
回答例:
人生 サイクルという言葉は分かりやすく、私たちの生活の中でよく目にしますが、例えば、人のライフサイクルというと、幼児期、児童期、青年期、青年期、壮年期を経ると言われます。 、そしてこの世での老後、いくつかの段階があります。
Vue のライフサイクルについても同様で、Vue の各コンポーネントは、作成から マウント、# までのプロセスを経ます。 ## を更新し、 を破棄します。これらのステージでは、Vue が ライフ サイクル フック という関数を実行して、作業を容易にします。特定の段階で独自のコードを追加します。
フェーズに分割できます: 作成前と後、マウント前と後 、更新前と後、破棄前と後、およびいくつかの特別な シーンの ライフ サイクル (keep-aliveアクティブ化されたとき,子孫コンポーネントのエラーをキャッチしたとき)。 Vue3 には、デバッグとサーバー側レンダリング用の 3 つの新しいシーンも追加されています。
beforeCreate create beforeMount mounted beforeUpdate updated activated(キープアライブがアクティブ化されたときに呼び出される) deactivated(キープアライブが非アクティブ化されたときに呼び出される) beforeDestory destoryed errorCaptured (子孫コンポーネントのエラーをキャプチャするときに呼び出されます) 。 Vue3 の変更のほとんどは、接頭辞 on を付けるだけで済みます。たとえば、
mounted は onMounted になります。ただし、beforeDestroy と destroyed は beforeUnmount と # に名前変更されました。 ##unMounted (これは、前の beforeMount および mounted に対応します。強迫性障害は大きな感謝の気持ちを表します?)
コンポーネントの作成前に呼び出され、通常はプラグイン開発でいくつかの初期化タスクを実行するために使用されます。 # created コンポーネントの作成後に呼び出され、さまざまなデータにアクセスしたり、インターフェイス データを要求したりできます; mounted コンポーネントがマウントされるときに呼び出され、次のことができますアクセスデータ、dom 要素、サブコンポーネントなど; beforeUpdate 更新前に呼び出されます。view レイヤーはまだ更新されていません更新前のさまざまな状態を取得するために使用できます; updated 更新が完了すると呼び出されます。この時点で、ビュー レイヤは更新を完了しており、すべての状態はすでに日付; beforeUnmount インスタンスが破棄される前に呼び出されます。一部のタイマーまたはサブスクリプションをキャンセルするために使用できます; unMounted インスタンスの破棄時に呼び出されます、他のインスタンスとのリンクをクリーンアップし、すべての命令とイベント リスナーのバインドを解除できます。 Vue3: setup
の前に実行され、 beforeCreate はありません。そして が作成されました 。 #2. Vue で権限管理を行う方法
具体的な実装は、フロントエンド実装とバックエンド実装の 2 つのソリューションに分かれています。
フロントエンド ソリューションは、すべてのルーティング情報をフロントエンド に設定し、ユーザーにルーティング ガードを介してログインすることを要求します。ユーザーがログインした後、ルーティング テーブル は、次の基準に基づいてフィルタリングされます。ロール に対して を実行し、次に ルート を動的に追加します。たとえば、asyncRoutes 配列を構成し、認証が必要なページでルートの meta## に roles を追加します。 # フィールドは、ユーザー ロールを取得した後、2 つの交差部分を取り、結果が空でなければ、アクセスできることを意味します。フィルタリング後、残りのルートはユーザーがアクセスできるページになります。最後に、router.addRoutes(accessRoutes) を通じてルートを動的に追加できます。
に保存します。ユーザーがログインすると、アクセスできるすべてのルーティング情報がフロントエンド ベースのソリューションに返されます。ロール クエリに対して、フロントエンドは addRoute ルーティング情報を動的に追加します。 ボタン権限の制御は通常、
v-permission などのコマンド を実装し、ボタンに必要な役割を に渡します。コマンドの mounted フックの値 v-permission コマンドにより、現在のユーザー ロールとボタンに交差があるかどうかを判断できます。ある場合はボタンを維持し、そうでない場合はボタンを維持し、ボタンを削除します。
、新しいページとロールの要件があり、フロントエンド コードの変更と 再パッケージ化とデプロイが必要です; サーバー ソリューションにはこの問題はありません専用のロールと権限の管理ページ、ページとボタンの権限情報の設定 アプリケーションはログインするたびに、データベースに対して最新のルーティング情報を取得します。
私自身の言葉: から ## に追加します。 #addRoute; バックエンドの実装が異なります。重要なのは、これらのルートがバックエンドからフロントエンドに返され、その後フロントエンドによって動的に追加されるということです。
ボタンのアクセス許可は通常、v-permission を実装し、ユーザーがアクセス許可を持っているかどうかを判断してボタンを表示するかどうかを制御します。
純粋なフロントエンド ソリューションの利点は、実装が簡単であることですが、メンテナンスに大きな問題があります。新しいページとロールの要件がある場合は、コードを変更し、再パッケージ化してデプロイする必要があります。この問題は、サーバー側。 3. Vue での双方向バインディングの使用と原則
双方向バインディングとは何ですか?
回答:
Vue の双方向バインディングは、応答データをバインドできるディレクティブ v-model
です。ビュー、およびビュー内での変更によって値も変更される可能性があります。v-model
を実行し、input イベントを通じて dom の変更を監視して変数の値を変更します。 v-model を使用する利点は利便性です。これにより、多くの面倒なイベント処理が軽減され、開発効率が向上します。 は通常、フォーム v-model で使用されますが、特定の値の入力および出力コントロールを表すカスタム コンポーネントでも使用できます。
は、修飾子 (lazy/number/trim) を組み合わせることでさらに制限できますが、カスタム コンポーネントで使用する場合は多少異なります。 ## 属性と update:modelValue イベント; Vue3 では、
のプロパティと update:foo のイベントが与えられます。 v-modelディレクティブとしての原則は、Vue コンパイラーがそれを value 属性バインディングと入力リスニング イベントに変換することです,上記のようにデフォルトです。実際、コンパイラは、
などのさまざまなフォーム要素に応じてさまざまなイベントを割り当てます。 type input 変換されますchecked および change イベントに。 4. Vue コンポーネント間の通信はどのようなものですか?
##イベントバス vuex provide inject 上記のメソッドの長押し使用シナリオは、次のように分割できます。 props / #eventbus vuex pinia$emit、$on、$off、$once(最後の3 つ (Vue3 では非推奨になりました)$children(Vue3 では非推奨になりました)、$parent$attrs、$listeners(Vue3 では廃止)ref$root (Vue3 で使用するのは簡単ではありません。自分でカプセル化する必要があります) 、pinia
/$emit/ $parent/ ref## を使用できます。 # 親コンポーネントと子コンポーネントの間 /$attrs$root を使用できます 兄弟コンポーネント間 / eventbus / vuex / provide injectルーティング遅延読み込み:
App
const router = createRouter({
routes: [
{ path : '/foo', component: () => import('./foo.vue)}
]
})ログイン後にコピー
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><keep-alive>
<router-view v-if="$route.meta.keepAlive == true"></router-view>
</keep-alive>
<router-view v-if="$route.meta.keepAlive != true"></router-view></pre><div class="contentsignin">ログイン後にコピー</div></div>
: コンポーネント ##v-for
v-once と
; 条件に基づいて更新をスキップする場合は v-memo を使用してください 長いリストのパフォーマンスの最適化:ビッグ データの長いリストがある場合は、仮想スクロールを使用して、小さな領域のコンテンツのみをレンダリングできます。一部のオープン ソース ライブラリの破壊 (vue-virtual-scroller /
イベント: Vue がコンポーネントが破棄されると、そのすべての命令とイベント リスナーが自動的にバインド解除されますが、コンポーネント自体のイベントのみがバインドされます。
vue-lazyload
)##サードパーティのプラグインはオンデマンドで導入されますelement-plus大きすぎることを避ける
#解決策
回答:
localStorage
を使用してstore
を使用して値を # として取り出すことができます。 ##state の初期値が localStorage に格納されます。 vuex-persist や vuex-persistedstate などのプラグインを使用できます。プラグイン オプションを使用して、どれを永続化する必要があるかを制御できます。内部原則は、mutation の変更をサブスクライブすることで統合処理を実行することです。
ここには 2 つの質問があります。1 つは、ユーザーが localStorage を手動で変更した場合はどうなるかということです。そうすると、私の Vuex のステータスも変わりませんでしたか?次に、localStorage API は文字列のみを保存できるため、
、Set、Function、JSON.stringify は変換後に変更されます {} と失われます。 最初の問題に対する私の解決策は、storage イベント<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">window.addEventListener("storage", function () {
localStorage.clear();
window.location.href = &#39;/login&#39;
console.error("不要修改localStorage的值~~~");
});</pre><div class="contentsignin">ログイン後にコピー</div></div>をリッスンしてデータをクリアすることです。2 番目の問題に対する解決策はありません。の場合、参照タイプ Map と
7. Vue3 は、defineProperty の代わりに Proxy を使用するのはなぜですか?
アイデア:
defineProperty の問題
、getter/setter、および
ProxyVue2 中使用 defineProperty 的原因是， 2013 年只能使用这种方式，由于该 API 存在一些局限性，比如对于数组的拦截有问题，为此 Vue 需要专门为数组响应式做一套实现。另外不能拦截那些新增、删除属性；最后 defineProperty 方案在初始化时需要深度递归遍历处理对象才能对它进行完全拦截，明显增加了初始化的时间。
以上两点在 Proxy 出现后迎刃而解，不仅可以对数组实现拦截，还能对 Map、Set 实现拦截；另外 Proxy 的拦截也是懒处理行为，如果用户没有访问嵌套对象，那么也不会实施拦截，这就让初始化的速度和内存占用改善了。
Proxy 有兼容性问题，完全不支持IE
思路：
必要性
何时用
怎么用
使用细节
回答：
当打包构建时，Javascript 抱回变得非常大，影响页面加载。利用路由懒加载我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应最贱，这样更加高效，是一种优化手段。
一般来说，对于所有的路由都使用动态导入是个好主意
给 component 选项配置一个返回 Promise组件的函数就可以定义懒加载路由.例如：
{
path: '/login',
component: () => import('../views/login/Login.vue')
},结合注释
{
path: '/login',
component: () => import(/* webpackChunkName: "login" */'../views/login/Login.vue')
},vite中结合rollupOptions定义分块 5. 路由中不能使用异步组件
Vue-Router 有三个模式，其中 history 和 hash 更为常用。两者差别主要在显示形式和部署上，
hash模式在地址栏现实的时候有一个 #，这种方式使用和部署都较简单；history模式url看起来更优雅没关，但是应用在部署时需要做特殊配置，web服务器需要做回退处理，否则会出现刷新页面404的问题。
在实现上 hash模式是监听hashchange事件触发路由跳转，history模式是监听popstate 事件触发路由跳转。
在 Vue 中 nextTick 是等待下一次 DOM 更新刷新的工具方法。
Vue 有一个异步更新策略，意思是如果数据变化，Vue 不会立刻更新 DOM，而是开启一个队列，把组件更新函数保存在队列中，在同一时间循环中发生的所有数据变更会异步的批量更新。这一策略导致我们对数据的修改不会立刻体现在 DOM 上，此时如果想要获取更新后的 DOM 状态，就需要使用 nextTicknextTick 接受一个函数，我们可以在这个函数内部访问最新的 DOM 状态
在开发时，有两个场景我们会用到 nextTick ：
created 中想要获取 DOM;DOM 更新后的状态;nextTick 的原理：在 Vue 内部，nextTick 之所以能够让我们看到 DOM 更新后的结果，是因为我们传入的 callback 会被添加到队列刷新函数的后面，这样等队列内部的更新函数都执行完毕，所有 DOM 操作也就结束了，callback 自然能够获取最新的 DOM 值。
先回答答案：在 vue2 中， v-for 的优先级更高
但是在 vue3 中， v-if 的优先级更高
拓展：无论什么时候，我们都不应该把 v-for 和 v-if 放在一起，
怎么解决呢？一是可以定义一个计算属性，让 v-for 遍历计算属性。二是可以把 if 移到内部容器里（ul ol）或者把v-for移植外部容器(template)中
watch メソッド、文字列の形式でリッスンできます $store.state.xx; subscribe メソッドのパラメータはコールバック関数であり、コールバック関数は mutation## を受け入れます# オブジェクトと state オブジェクトでは、mutation.type を通じてリスニング ターゲットを決定できます。
wtach メソッドはシンプルで使いやすいですが、subscribe は少し面倒です。通常、vuex プラグインで使用されます (vuex 永続化プラグインについて言及することもできます) vuex-persist, vuex-persistedstate)
14. ref と reactive の類似点と相違点は何ですか?
Ref オブジェクトである場合、reactive は応答性のあるプロキシ オブジェクトを返します。
はオブジェクト タイプのデータを処理するために使用されます。 ##ref には
と .value# が自動的に削除されます。 ## は必須ではありません。 ref はオブジェクトまたは配列を受け取ることができますが、引き続き reactive; reactive によって内部的に実装されます。オブジェクトは自動的に削除されます ref ; 展開演算子を使用して reactive によって返されたリアクティブ オブジェクトを展開すると、応答性が失われます。これは toRefs()# と組み合わせることができます## 値を Ref オブジェクトに変換します。後で展開します。 reactive は内部で Prxoy プロキシを使用してオブジェクトに対するさまざまな操作をインターセプトし、ref は内部で
、値へのユーザー アクセスをインターセプトします。 16. Vue でコンポーネントを拡張するにはどうすればよいですか? #論理拡張: mixins
ミックスイン 非常に柔軟ですが、矛盾があり、混乱を招きます。 extends
mixins
よりも優先度が高いことです。ソースを明確に特定できません 現在のコンポーネントの変数と名前の競合が発生する可能性があります 、合成 API
独立した応答モジュールを使用すると、独立したロジックを簡単に記述して応答データを提供できるため、コードの可読性と保守性が向上します。 拡張子: Vue.mixin (グローバル ミックスイン) Vue.extend (サブクラスを作成するためのクラス/コンポーネントの継承に似ています)
17 .vue -loader とは何ですか?
vue-loader は、単一ファイル コンポーネント (SFC) を処理するための Webpack ローダーです。
template script
webpack パッケージ化すると、vue-loader## が loader の形式で呼び出されます。
が実行されると、SFC 処理の言語ブロックごとに個別の loader チェーンが使用されます。そして最後に、これらの個々のブロックを最終コンポーネント モジュールに組み立てます
直接変更することはできません。 コンポーネント開発には一方向のデータ フローの原則があり、親コンポーネントのデータを子コンポーネントで変更しないのが常識です。どうしても変更する必要がある場合親コンポーネントの
これを実現するには、/users/:id などのパスで動的フィールドを使用できます。ここで、:id はパス パラメーターです。
this.$route.parmas を通じて取得でき、複数のパラメータを指定できます。$route オブジェクトは、query # などの他の有用な情報も公開します。 ## ハッシュ など
で解決すべき中心的な問題の 1 つは、データ層とビュー層を接続することです。ドライブはデータの変更を通じてビューを更新します。これを行うには、データが応答的に処理される必要があります。
および patch アルゴリズムにより、面倒な作業を必要とせず、データを操作してビジネスに気を配るだけで済みます。 DOM 操作により、開発効率が向上し、開発の困難さが軽減されます。
データ応答性の実装の中核は、Object.defineProperty() メソッドを通じてデータをインターセプトすることです。 ## データ生成時に依存関係の収集を行う set データ生成時に更新通知を行う。このメカニズムはデータの応答性の問題を解決するのに非常に優れていますが、実際の使用には欠点もあります。たとえば、 初期化中の再帰的トラバーサルはパフォーマンスの低下を引き起こします; 新規または削除された属性を監視できません。 、vue では、オブジェクト配列属性やデータ構造を追加および削除するには、Vue.set/delete のような特定の API を使用する必要があります。 Ma と Set もサポートされていません。これらの問題を解決するために、
の Proxy プロキシを使用してデータに応答するように実装されています。これには多くの利点があり、初期化パフォーマンスとメモリが大幅に向上し、特別な API は必要ありませんが、IE ブラウザはサポートされていません。
renderこのプロセスは、実際には vue compiler の動作原理に関するものです。 アイデア:
コンパイラの概念の紹介
# # Vue
には、template を js 実行可能ファイル render にコンパイルすることです。 Function#このコンパイル プロセスが必要な理由は、大学でのビュー テンプレートの作成を容易にするためです。それに比べて、私たちは依然として直感的で効率的な HTML
Vue
Parse ) を解析し、終了後に、抽象構文ツリー AST を作成し、AST に対して詳細な処理変換 (transform) を実行し、最終的に結果の AST を ## に生成します。 #js コード、つまり render function22. コンポーネントをキャッシュして更新する方法
Vue3
に ## が含まれていました。 #router -view、現在 router-view には keep-alive が含まれていますキャッシュ後にデータを取得したい場合は、 actived フックまたは beforeRouteEnter
キープアライブを使用できます は、内部で map
、変更されたコンポーネントがマップ内に存在する場合は、それを直接返します。 component の is 属性はリアクティブ データであるため、それが変更される限り、keep-alive の render 関数は再実行されました。 </li></ul><h2><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。
loader 関数を defineAsyncComponet に直接指定し、それを ES モジュールと組み合わせて動的にインポートすることです。関数import すぐに実装できます。 Vue3 非同期コンポーネントを Suspense コンポーネントと組み合わせて使用することもできます。
Vue フレームワークによって処理され、ルーティング コンポーネントの読み込みを処理するのは vue-router です。ただし、遅延ロードされたルーティング コンポーネントで非同期コンポーネントを使用することはできます。
を使用できます。 は計算プロパティ watch## です。 # はリスナーです。
watch は通常、応答性の高いオブジェクトの変更を監視するために使用されます。操作、
computed は実行できません。
get の 2 つのオプションを持つオブジェクトを渡します。これらは、読み取りと書き込みの両方が可能な計算プロパティと呼ばれます。関数が渡される場合、デフォルトは get オプションです。watch はオブジェクトを渡し、deep、immediate、その他のオプションを設定できます
watch にはいくつかの変更がありました。たとえば、ドット演算子以外の文字列式を検出できなくなり、reactivity API に新しい が追加されました。 watch と watchEffect は、watch オプションを完全に置き換えることができ、より強力です
シングル ページ アプリケーションです。一般に、クライアントサイド レンダリング、または短縮して CSR とも呼ばれます。 SSR (サーバーサイドレンダー) は サーバーサイドレンダリング です。一般に Multiple Page Application (Multiple Page Application) とも呼ばれ、MPA と呼ばれます。
html ファイルをリクエストし、その後は JSON データのみがリクエストされます。これにより、ユーザー エクスペリエンスが向上し、トラフィックが節約され、サーバーへの負荷が軽減されます。ただし、最初の画面のロード時間が長くなり、SEO 不親切です。上記の欠点を解決するために、SSR ソリューションがあり、HTML コンテンツはサーバー上で一度生成されるため、最初の画面の読み込みが速く、検索エンジンも簡単にクロールできます。ページ情報。しかし同時に、SSR ソリューションにはパフォーマンスや開発の制限などの問題もあります。
回答思路：
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 为例：
vue3 中引入的更新策略：编译期优化 patchFlags、block等
从 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 全局注册、全局常量..
一个 SPA 应用的路由需要解决的问题时页面跳转内容改变同时不刷新，同时路由还需要已插件形式存在，所以：
首先我会定义一个 createRouter 函数，返回路由器实例，实例内部做几件事；
hash 或者 popstate 事件path 匹配对应路由将 router 定义成一个 Vue 插件，即实现 install 方法，内部做两件事：
router-link和 router-view，分别实现页面跳转和内容显示$router 和 $route，组件内可以访问当前路由和路由器实例在项目规模变大的之后，单独一个store对象会过于庞大臃肿，此时通过模块方式可以拆分来便于维护
可以按之前规则单独编写资规模代码，然后在主文件中通过 modules 选项组织起来：createStore({modules: {...}})
これを使用する場合、サブモジュールのステータスにアクセスするときに、登録されているモジュール名を追加する必要があることに注意してください。しかし同時に、getter、mutations、および actions はグローバル空間にあり、以前と同じ方法で使用できます。完全な分割を実現したい場合は、サブモジュールに namespace オプションを追加する必要がありますが、このとき、再度アクセスするときに名前空間プレフィックスを追加する必要があります。
モジュール メソッドはコードを分割できますが、欠点も明らかです。使いにくく、エラーが発生しやすく、型システムのサポートが非常に貧弱なので、役に立ちません。 。 pinia はこの分野で明らかに大幅に改善されており、切り替える時期が来ています。
vue2 中確かに、コンポーネントが持つことができるルートは 1 つだけですが、vue3 のコンポーネントはすでに複数のルート コンポーネントを持つことができます。
これが必要な理由は、vdom が単一ルート ツリー構造であり、patch メソッドがルート ノードから開始されるためです。 Traversal をトラバースする場合、ルート ノードが 1 つだけ必要になります。コンポーネントは vdom にも変換され、当然この要件を満たすはずです。
vue3 複数のルートノードを記述できるのは、抽象ノードである Fragment の概念が導入されているためです。コンポーネントに複数のルートがあることが判明した場合は、Fragment ノードを作成し、複数のルート ノードをその children として使用します。将来の pathch では、Fragment ノードであることが判明した場合、children を直接走査して作成または更新します。
v-once は vue の組み込み命令であり、その機能は指定されたコンポーネントまたは要素のみをレンダリングすることです1 回だけ実行して、今後はスキップして更新してください。
最初のレンダリング後に変更する必要がなくなった要素やコンポーネントがある場合、この場合は v-once を使用するのが適切です。これらのデータが変更されると、vue もコード最適化手法である更新をスキップします。
使用するコンポーネントまたは要素に v-once を追加するだけです。
追加:
vue3.2 その後、 v-memo が追加され、このディレクティブは、条件付きでテンプレートをキャッシュし、その更新を制御できます。
v-once の原理: コンパイラは v-once があることを検出すると、最初の計算結果を次の場所に保存します。キャッシュ オブジェクト、コンポーネント。再度レンダリングするときは、再計算を避けるためにキャッシュから取得されます。
url の各部分がネストされたコンポーネントに対応します。この関係を表現するために、vue-router でネストされたルーティングを使用できます。 view-router が配置され、論理的な入れ子に対応する物理的な入れ子が形成されます。ネストされたルートを定義するときは、children 属性を使用してネストされた関係を整理します。router-view コンポーネント内で決定され、この深度は、対応するレンダリング コンポーネントを取得してレンダリングするために、一致したコンポーネント配列 matched のインデックスとして使用されます。 説明できない場合は、例を挙げてください。ページを開発するときに、トップ ナビゲーション バーを表示し、ナビゲーション バーを通じて別のページにジャンプする必要があり、トップ ナビゲーション バーをすべてのページに表示する必要がある場合は、ネストされたルーティングを使用できます。例を示します。リストの詳細ページを表示する必要がある場合、多くの場合、ネストされたルーティング (detail/:id)
watch メソッド、文字列の形式でリッスンできます $store.state.xx; subscribe メソッドのパラメータはコールバック関数であり、コールバック関数は mutation## を受け入れます# オブジェクトと state オブジェクトでは、mutation.type を通じてリスニング ターゲットを決定できます。
wtach メソッドはよりシンプルで使いやすいですが、subscribe は少し面倒で、通常は
と ## の 2 つのことを行います。 #確立更新機構
初期化会議コンポーネントステータスの初期化,各種レスポンシブデータの作成
更新メカニズムの再開 このステップでは、コンポーネント更新関数がすぐに実行されます。これにより、初めてレンダリング関数が実行され、patch が実行されて vnode## が変換されます。 # 以前に取得したデータを dom; 同時に、内部の応答データとコンポーネントの更新関数の間に依存関係を作成し、将来データが変更されたときに対応する更新関数が実行されるようにします。
キーの役割は主に次のようなものです。仮想 DOM を効率的に更新します。
key は、patch プロセス中に 2 つのノードが同じノードであるかどうかを判断するための vue の重要な条件です。 (もう 1 つは要素タイプです)、key が設定されていない場合、その値は unknown となり、vue は常にこれらが 2 つの同一のノードであると考える可能性があります。大量の dom 更新操作が必要となる更新操作を実行することは、明らかにお勧めできません。
key は実際の使用時に設定する必要があり、配列インデックスの使用はできる限り避けるべきです。これにより、隠れた バグが発生する可能性があります。 。
##watchEffect関数をすぐに実行し、受動的に依存関係を追跡します。 、渡される関数は収集されたデータ ソースに依存し、コールバック関数でもあります。watch は 1 つ以上の応答性の高いデータ ソースを検出し、データ ソースが変更されると ## The #immediate# を通じてコールバック関数を呼び出します。 ## オプションをすぐに実行するように設定することもできます。
watch です。レスポンシブデータの前後の値を気にしない場合は、watchEffect を使用できます。他の場合には、watch を使用できます。
Vue
作成は再帰的なプロセスです。最初に親コンポーネント を作成します。 サブコンポーネントがある場合は、サブコンポーネント が作成されるので、作成します。最初に親コンポーネント、次に子コンポーネントがあります。子コンポーネントが最初に作成されると、Mounted フックがキューに追加され、## の後に実行されます。 #patch が完了しました。子コンポーネントの mounted# が表示されます。## フックは キュー に選択されているため、patch がこれらの実行を完了するまで待ちます。フック。 40. Vuex についての理解を話してください
や
Menu42. カスタム命令を書いたことがありますか?
定義方法はオブジェクト形式と関数形式の 2 つがあります, 前者はコンポーネント定義に似ており、さまざまなライフサイクルがあります。後者は、mounted および
updatedRegistration の場合にのみ実行されます。 app.directive グローバル登録は、オプション
を使用してローカルに登録することもできます。使用する場合は、登録名の前に v- を追加するだけです。
コピーして貼り付け
v-lazy 画像の遅延読み込み
v-debounce アンチシェイク
##v-permission ボタン許可
長押し
##setup
変数 (<style> の v-bind)
#さらに、Vue3 には多くの 2 つのポイントと改善点もあります。 <ul>
<li>高速化<ul>
<li>仮想<code>DOM 書き換え
patchFlags、block 待機Vue2 を置き換えることです。これを達成するために、Vue3 は次のような点で大幅な改善が加えられています。使いやすさ、フレームワークのパフォーマンス、スケーラビリティ、保守性、開発経験など。
API 簡略化された v-model v-model と sync 修飾子の組み合わせになります。同様に、関数 props には h(type,props,children) があり、プロパティ、特性、イベントなどの区別を考慮する必要はなく、フレームワークが判断します。これにより、使いやすさが向上します。
Teleport Fragment Suspense などの新しいコンポーネントにより、特定のシナリオ向けのコード作成が簡素化されます。 。 setup 構文シュガーにより、開発エクスペリエンスが大幅に向上しました。
モジュール、カスタム レンダリング API など。
を使用することで、再利用性の高いビジネス ロジックを簡単に作成できます。 TS サポートも改善されました。
に基づく応答性の高いシステム。
に基づいて実装された新しいレスポンシブ API、初期化イベントとメモリ使用量が大幅に改善されました。 コンパイル: 静的プロモーション、動的なコンテンツのタグ付け、イベント キャッシュ、ブロックなど、より多くのコンパイル最適化処理が行われ、多数の差分プロセスを効果的にスキップできます
tree-shaking
のサポートが強化され、サイズが小さくなり、読み込みが速くなります (46.
props で定義されていない属性を取得するには、 を使用できます。属性 透過的な送信 $listeners はイベントの取得に使用されます。vue3 は削除され、attrs に統合され、使いやすくなりました。 47. コンポジション API とオプション API の違いは何ですか? Composition API は、
Composition API はより簡潔で、ロジックの再利用がより効率的です。過去の mixins のさまざまな欠点を Options API (競合と混乱) で解決しました。さらに、
はより自由であり、 がありません。オプション API このような固定された記述方法により、論理コードを混乱させることなく、より効果的にまとめて整理できます。最後に、Composition API はより優れた型推論を備えており、ts サポートに適しています。フレンドリーです。 48. Vue のベスト プラクティスについて知っていることコーディング スタイル:
ピーク属性に名前を付けます。テンプレートまたは jsxx
v- で肉串を使用します。キーを追加する必要があります。v-if''
SSR
v-memo
ロングリスト仮想スクロール技術オブジェクトが深くネストされたビッグデータに使用可能
オーバーヘッドを削減します
不必要なコンポーネントの抽象化を回避します
を送信するために使用され、action 非同期操作を含めることができます50. 0から vuex を実装する方法
dispatch(type, payload)
Store を実装するには、Store クラスを定義できます。コンストラクターはオプション options を受け入れ、プロパティ ## を設定します。 #state ステータスを外部に公開し、commit および dispatch 変更プロパティを提供します。ここでは、state を応答オブジェクトとして設定し、Store を Vue プラグイン (インストール メソッド) として定義する必要があります。
commit ユーザーの受信 mutations を取得して実行すると、ユーザーが提供したメソッドに従ってステータスを変更できます。 は似ていますが、dispatch は非同期結果を処理するためにユーザーに Promise を返す必要があります。 (学習ビデオ共有:
以上が[編集と要約] 知識ポイントの定着に役立つ 45 以上の Vue 面接の質問!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
