記事ディレクトリ

この記事は常に更新されます。コメント欄に追加してください。

この記事は常に更新されます。コメント欄に追加してください。

1.MVVMとは何ですか?

M - モデルデータ: アプリケーションのビジネスロジックに関連するデータのカプセル化キャリアです。
V - ビュービュー: インターフェイスの表示とレンダリングに焦点を当てます。
VM - ViewModel ビューデータ: ビューとビューの接着剤です。モデル、ビューとモデル間の対話とコラボレーション
Vue の双方向データバインディングは、パブリッシュ/サブスクライブモードと組み合わせたデータハイジャックを通じて実現されます。つまり、データとビューの同期、データの変更、ビューの変更、ビューの変更、変更;
コア: VUE 双方向データバインディングについて、そのコアは Object.defineProperty() メソッド、get set メソッドです。
MVVM の最も象徴的な機能はデータバインディングであり、その中心となるアイデアは、宣言的なデータバインディングによってビューレイヤーを他のレイヤーから分離することです。ビュー層を完全に分離するという概念により、Web フロントエンドのテストケースの作成も容易になります。
MVVM の最も重要な機能の 1 つはデータの双方向バインディングですが、React は一方向のデータフロー、状態駆動型のビューであり、純粋な VM の意味はなく、属性と状態のみを使用してマッピングします。ビュー, 明らかに MVVM ではありません. Top More は MVVM の V レイヤーです. Vue の場合技術的に言えば、Vue.js は主に MVVM パターンの ViewModel レイヤーに焦点を当てています. 双方向のデータバインディングを通じてビューとモデルを接続します。 MVVM に似ていますが、MVVM に完全に準拠しているわけではありません。実現、MVVM からいくつかのアイデアを借用しただけです。
ビューとモデルは、MVVM のフレームワークの下では直接通信できません。これらは ViewModel を通じて通信します。ViewModel は通常、オブザーバーを実装します。データが変更されると、ViewModel はデータの変更を監視し、対応するビューに自動更新を通知します。ユーザーがビューを操作すると、ViewModel も監視できます。ビューの変更に対して、データに変更を通知することで、実際にデータの双方向バインディングが実現されます。MVVM の View と ViewModel は相互に通信できます

2.MVCとは何ですか?

• M - モデルデータ: データエンティティ。ページに表示されるデータを保存するために使用されます。たとえば、ajaxで取得したデータです。
• V - ビュービュー。データ (通常は HTML) を表示するページ。
• C - コントローラーコントローラー: ビジネスロジック全体を制御し、データの取得やデータのフィルター処理などのデータの処理を担当します。これは、ビュー上のデータの表示に影響します。
MVC は最も広く使用されているソフトウェアアーキテクチャの 1 つであり、一般的に MVC は Model (モデル)、View (ビュー)、Controller (コントローラー) に分けられます。これは主に階層化の目的に基づいており、相互の役割が分離されており、View は通常、Controller を使用して Model と通信します。Controller は Model と View の調整役であり、View と Model は直接接続されていません。基本的には一方向の接続です。M と V は、MVVM の M と V と同じ意味を指します。C は、コントローラーがページのビジネスロジックを参照することを意味します。MVCは一方向の通信です。つまり、ビューとモデルはコントローラーを介して接続される必要があります。

3. MVVM と MVC の違いについて話す

「MVVM と MVC の違いは次のとおりです。1. mvvm の各部分間の通信は双方向ですが、mvc の各部分間の通信は一方向です。2. mvvm は実際にページとデータロジックを js に分離します。 MVC では、ビューを
変更せずにビューがユーザー入力に応答する方法を変更できます。ビューに対するユーザーの操作は処理のためにコントローラーに渡され、コントローラーはそのイベントに応答します。モデルのインターフェイスを呼び出してデータを操作して表示します。モデルが変更されると、関連するビューが更新するように通知されます。
具体的な進化プロセス: 従来の MVC ——> MVP ——> MVVM

4. vue3 と vue2 の違い

1. 応答性の高いシステムのリファクタリング。プロキシを使用して Object.defineProperty 属性を置き換えます。利点:

- Proxy可直接监听 对象`添加/删除`属性;

- Proxy直接监听 数组的变化

- Proxy监听的目标是对象本身，不需要像Object.defineProperty那样遍历每个属性，有一定的性能提升

2. 新しい`组合式API`(Composition API)、より優れたロジックの再利用とコード構成:

- setup配置

- ref与reactive

- watch与watchEffect

- provide与inject

3. 仮想 DOM の再構築、diff アルゴリズム

4. ライフサイクルの名前変更

Vue3.0 ではライフサイクルフックが Comboposition API の形式で提供されており、Vue2.x のフックとの対応関係は次のとおりです。

beforeCreate ===> setup()

作成されました ===> setup()

beforeMount ===> onBeforeMount

マウント ===> onMounted

beforeUpdate ===> onBeforeUpdate

更新済み ===> 更新済み

beforeUnmount===> onBeforeUnmount

アンマウント ===> onアンマウント

5. 新しい組み込みコンポーネント: フラグメント、テレポート、サスペンス

6. 以下を削除します。

- 移除v-on.keyCode修饰符，同时也不再支持config.keyCodes

- 移除v-on.native修饰符,

- 移除过滤器（filter）

- `不`再建议使用mixins, 组合式函数本身就是更好的mixin代替品

5. vue2.x の応答原理

オブジェクトタイプ: Object.defineProperty() によるプロパティの読み取りと変更をインターセプトします (データハイジャック)
配列タイプ: インターセプトは、配列を更新するための一連のメソッドをオーバーライドすることによって実現されます。(配列の変更メソッドはラップされています)。
問題があります:

1. 属性を追加または削除しても、インターフェースは更新されません。

2. 添字を使用して配列を直接変更すると、インターフェイスは自動的に更新されません。

補足：vue2の$setでこれらの問題は解決できます。

6. vue3.0の応答原理

プロキシ経由 (プロキシ): 属性値の読み取り、書き込み、追加、削除などを含む、オブジェクト内の属性の変更をインターセプトします。
Through Reflect (反射): ソースオブジェクトのプロパティを操作します。


new Proxy(data, {
    
    

    // 拦截读取属性值

    get (target, prop) {
    
    

        return Reflect.get(target, prop)

    },

    // 拦截设置属性值或添加新属性

    set (target, prop, value) {
    
    

        return Reflect.set(target, prop, value)

    },

    // 拦截删除属性

    deleteProperty (target, prop) {
    
    

        return Reflect.deleteProperty(target, prop)

    }

})

proxy.name = 'tom'

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

a.defineProperty API の最大の制限は、シングルトンプロパティのみを監視できることです。

Vue2.x の応答性の高い実装は、defineProperty の記述子に基づいており、データ内の属性をトラバース + 再帰し、各属性のゲッターとセッターを設定します。
これが、Vue がデータ内の事前定義された属性にのみ応答できる理由です。Vue で添字を使用して属性の値を直接変更したり、既存のオブジェクト属性を追加したりすることは、セッターでは監視できません。これは、defineProperty の制限です。
b. プロキシ API の監視はオブジェクトを対象としているため、このオブジェクトに対するすべての操作が監視操作に入り、すべての属性を完全にプロキシできるため、パフォーマンスが大幅に向上し、コードが改善されます。

プロキシは、ターゲットオブジェクトの前に「インターセプト」層を設定するものとして理解できます。オブジェクトへの外部アクセスは、まずこのインターセプト層を通過する必要があります。そのため、外部アクセスをフィルタリングして書き換えるメカニズムが提供されます。
c. リアクティブは怠惰です

Vue.js 2.x では、深いプロパティのネストを持つオブジェクトの場合、その内部の深い変更をハイジャックしたい場合は、オブジェクトを再帰的に走査し、 Object.defineProperty を実行して、オブジェクトデータの各レイヤーを応答性にする必要があります。これにより、間違いなく多くのパフォーマンスを消費します。
Vue.js 3.0 では、Proxy API を使用するとオブジェクト内部の深いレベルのプロパティの変更を監視できないため、getter で再帰的に応答する処理方法となり、実際にアクセスされる内部プロパティが Responsive になるという利点があります。、単にオンデマンドに応答し、パフォーマンスの消費を削減すると言えます。

8. Vue3.0 はどのような最適化をコンパイルしましたか?

ブロックツリーの生成

Vue.js 2.x データの更新と再レンダリングのトリガーの粒度はコンポーネントレベルであり、単一のコンポーネントはコンポーネントの vnode ツリー全体を走査する必要があります。
2.0 では、レンダリング効率の速度はコンポーネントのサイズと正の相関関係があります。コンポーネントが大きくなるほど、レンダリング効率は遅くなります。さらに、データ更新のない一部の静的ノードの場合、これらの走査はパフォーマンスの無駄になります。
Vue.js 3.0 では、コンパイルフェーズを通じて静的テンプレートの分析が実現されており、コンパイルによってブロックツリーが生成されます。
ブロックツリーは、動的ノード命令に基づいてテンプレートを分割するネストされたブロックです。各ブロック内のノード構造は固定されており、各ブロックはそれに含まれる動的ノードを追跡するだけで済みます。
したがって、3.0 では、レンダリング効率はテンプレートのサイズとは正の相関関係がなくなりましたが、テンプレート内の動的ノードの数とは正の相関関係になりました。

スロットコンパイルの最適化

Vue.js 2.x では、コンポーネントがスロットに渡されると、親コンポーネントが更新されるたびに子コンポーネントも強制的に更新され、パフォーマンスが無駄になります。
Vue.js 3.0 はスロットの生成を最適化するため、非動的スロットの属性の更新はサブコンポーネントの更新のみをトリガーします。
動的スロットとは、スロットでの v-if、v-for、動的スロット名などの使用を指します。これにより、スロットは実行時に動的に変更されますが、サブコンポーネントによって追跡することはできません。

差分アルゴリズムの最適化

9. VUE2 が初めてページをロードするときにどのフック関数がトリガーされますか?

ページが初めてロードされると、フック
関数beforeCreate、created、beforeMount、mount がトリガーされます。

10. Vue3の利点

よりよい性能

小さいサイズ

より良いTSサポート

より良いコード構成

より優れたロジック抽出

さらなる新機能

11. Vue3 の新機能は何ですか?

1. パフォーマンスの向上

元の Object.defineProperty から ES6 ベースのプロキシへの応答パフォーマンスの向上により、速度が向上し、警告がなくなりました。

Vdom は、Vdom のパフォーマンスのボトルネックを突破するために書き直されました。

テンプレートのコンパイルの最適化を実行します。

より効率的なコンポーネントの初期化。

2. typeScript のサポートの向上

より優れた型推論により、Vue3 は typeScript を非常に適切にサポートします。

3. 構成 API を追加する

Comboposition API は vue3 の新機能であり、mixin よりも強力です。各機能モジュールを分離し、コードロジックの再利用性を向上させ、コードをより圧縮しやすくします。

4. 新しいコンポーネント

フラグメントは、テンプレートを 1 つのルートポイントのみに制限しなくなりました。

Teleport Portal を使用すると、コントロールのコンテンツを任意の DOM に転送できます。

Supense は、アプリに優れたユーザーエクスペリエンスを提供するために、非同期コンポーネントを待機している間に追加のコンテンツをレンダリングします。

5. ツリーシェイキング: ツリーシェイキングの最適化をサポート

ツリーシェイキング最適化後、不要なモジュールが削除され、本当に必要なモジュールがパッケージに詰め込まれます。最適化されたプロジェクトは、元のプロジェクトの半分のサイズになり、読み込みが速くなります。

6. カスタムレンダラー API: カスタムレンダラー

DOM を実装する方法で WebGL プログラミングを実行します。

12. vue3 結合 API ライフサイクルフック機能に変更はありますか?

setup は beforeCreate および created ライフサイクルフックを中心に動作するため、それらを明示的に定義する必要はありません。他のフックもセットアップにプログラムできます。

結合された API のフック関数は、ライフサイクルフックの前に「on」を追加してコンポーネントのライフサイクルフックにアクセスするために登録する必要があり、セットアップ中にのみ同期的に使用できることに注意してください。内部のグローバル状態に依存して、現在のコンポーネントインスタンスを見つけます。

13. オプション API とは何ですか?

vue2では、vueファイル内にdata、method、props、mounted、computedなどの属性やメソッドを定義し、ページロジックを連携して処理します（オプションAPIと呼ばれます）。

この方法で開発された複雑なコンポーネントの場合、同じ関数が異なる vue 構成項目でプロパティとメソッドを定義する必要があることが多く、コードは比較的分散しています。機能が複雑になると、コードを保守する際に各メソッドに対応する機能を区別することが困難になることが多く、コード保守のコストが増加します。そのため、vue3 はオプション API を放棄し、コンポジション API に置き換えました。

14. コンポジションAPIとは何ですか?

コンポジション API は vue3 の新しい機能であるため、vue2 にはありません。合成 API では、コードの論理機能に応じて整理されており、関数で定義されたすべての API がまとめられるため、関数が複雑でコード量が増えても、特定のコードのすべてがまとめられます。関数を一度に見つけることができ、コードのメンテナンスが便利です。その最大の特徴は、高凝集性、低結合性です。

15. コンポジション API とオプション API の違いは何ですか?

Vue3 は引き続きオプション API をサポートしていますが、Composition API の使用をお勧めします。メリットとデメリットの比較:

より優れたプログラマビリティ。

コード構成の改善。

論理的な抽象化能力が向上します。

ツリーシェイキングに適しており、コードの圧縮が容易です。

いや、これは

16. watch と watchEffect の違いは何ですか?

watch と watchEffect は両方ともリスナーであり、watchEffect は副作用関数です。それらの違いは次のとおりです。

watch はモニタリングのデータソースを渡す必要があり、watchEffect はモバイルデータソースを依存関係として自動的に使用できます。

watch は変更前後の値にアクセスできますが、watchEffect は変更後の値のみを取得できます。

ウォッチの実行中はすぐには実行されず、値が変更された後に実行されますが、watchEffect は実行後すぐに実行できます。これは、時計の直接の構成項目を通じて変更できます。

17. Vue2 では双方向データバインディングはどのように実装されますか?

回答: vue の双方向データバインディングは、パブリッシュおよびサブスクライブモードと組み合わせたデータハイジャックによって実現されます。つまり、データとビューが同期され、データが変更され、ビューが変更され、ビューが変更され、データも変更されます。コア: VUE の 2 方向
についてデータバインディングの中心となるのは、Object.defineProperty() メソッド、get set メソッドです。
簡単に言えば、このメソッドは値を定義するために使用されます。呼び出すときは get メソッドを使用し、このプロパティに値を割り当てるときは set メソッドを使用します。

18. vue2のライフサイクル

Vue インスタンスには完全なライフサイクルがあります。つまり、作成の開始、データの初期化、テンプレートのコンパイル、Dom のマウント→レンダリング、更新→レンダリング、アンロードなどの一連のプロセスです。これをライフサイクルと呼びます。ビューの。平たく言えば、Vue インスタンスの作成から破棄までのプロセス、つまりライフサイクルです。
beforeCreate: マウント要素 el と vue 要素のデータはどちらも未定義でまだ初期化されていません;
created: vue インスタンスのデータオブジェクトデータは利用可能ですが、el はまだありません;
beforeMount: vue インスタンスの $el とデータ初期化されていますが、まだ保留中です前の仮想 dom ノードにロードされ、data.message は置き換えられていません;
マウントされています: vue インスタンスはマウントされており、data.message は正常にレンダリングされます。
更新前と後: データが変更されると beforeUpdate メソッドと updated メソッドがトリガーされます。
破棄の前後: beforeDestory と破棄されました。破棄されたメソッドの実行後、データへの変更は定期関数をトリガーせず、vue インスタンスが解放されたことを示します。イベント監視と dom バインディングですが、dom 構造はまだ存在します。

19. vue2 ライフサイクルの役割:

彼のライフサイクルには複数のイベントフックがあり、これにより、vue インスタンス全体のプロセスを制御するときに適切なロジックを形成することが容易になります。
ライフサイクルフックのいくつかの使用方法:
beforeCreate: インスタンスのロード時にトリガーされるロードイベント。
作成: 初期化完了イベント、非同期リクエスト。
マウント: 要素をマウントし、DOM ノードを取得します
。更新: データを均一に処理します
。前に Destory: イベントが停止することを確認します。
nextTick: データ更新後すぐにdomを動作させます。

20. vue2 を vue3 にアップグレードするにはどうすればよいですか?

以前の vue2 プロジェクトを vue3 にアップグレードする場合は、まず古いバージョンの vue-cli をアンインストールし、最新バージョンをインストールします。インストールが完了したらvueのバージョンを確認してください。次に、プロジェクト内の変更が必要な vue3 の変更または廃止された機能に注意を払う必要があります。好き：

$children は vue3 によって削除され、$ref は $children に置き換える必要があります。

フィルターは削除され、計算済みに変更されました。

$destory は削除されたため、削除する必要があります。

スロットへの新たな変更。

Vuexの使用法が変更されました。

vue-router の使用方法の変更など。

21.v-if と v-for ではどちらの優先順位が高くなりますか?

vue2 では v-for の優先順位が高かったですが、vue3 では優先順位が変更されました。v-if の方が優先されます。

vue2 では v-for と v-if が同時に出現する場合はタグの中に入れることができますが、
vue3 でこのように書くと v-if の優先度が高いためエラーが発生します。レンダリングのためにタグに書き込まれます

22. スクリプトのセットアップとは何ですか?

scrtpt セットアップは vue3 の文法糖衣であり、結合された API の記述を簡素化し、実行パフォーマンスを向上させます。スクリプト設定を使用した糖衣構文の機能:

プロパティとメソッドは返す必要がなく、直接使用できます。

コンポーネントが導入されると、コンポーネントを介して手動で登録することなく、自動的に登録されます。

親コンポーネントによって渡された値を受け取るには、defineProps を使用します。

useAttrs を使用して属性を取得し、useSlots を使用してスロットを取得し、defineEmits を使用してカスタムイベントを取得します。

デフォルトでは、属性は外部に公開されず、必要に応じてdefineExposeを使用できます。

23. vue3の共通APIとは何ですか

Vue3 は webpack5 のツリーシェイクをサポートしているため、使用前にすべての API をインポートする必要があります。

参考：

一般的に使用される: ref()、isRef()、unRef()、toRef()、toRefs()、shallowRef()

注: toRef()、toRefs() は、分解時にデータの応答性が必要な場合に使用されます。

リアクティブ：

一般的に使用される: reactive()、isReactive()、shallowReactive()、isProxy()、toRaw()
readonly:
読み取り専用、変更できません。

//写法1：接受一个getter函数，并根据getter的返回值返回一个不可变的响应式ref对象
const a = computed(()=>{})
//写法2：接受一个具有get、set函数的对象，用来创建可写的ref对象
const b = computed({
 get: () =>{},
 set: (newValue) => {},
})

時計：

const obj = reactive( {a:{b:1}} )
const e = ref('e')
const f = ref('f')
watch( obj, (newValue,oldValue) => {})
watch( ()=>obj.a.b, (newValue,oldValue) => {}) //监听对象里的某个属性，必须用getter返回，即必须写成()=>obj.a.b的形式（直接写成obj.a.b会报错）
watch( ()=>_.cloneDeep(obj), (newValue,oldValue) => {}) //深拷贝过后,监听的newValue,oldValue才会是前后值不一样,否则newValue,oldValue打印值一样
watch( [e,f], (newValue,oldValue) => {})//vue3新增的写法，可同时监听多个ref数据，写成数组形式
const stop = watch(obj,()=>{}) 
stop()  //停止监听

watchEffect: 依存関係を応答的に追跡しながら、渡された関数をすぐに実行し、依存関係が変更されたときに関数を再実行します (watchEffect に書き込まれたデータはその依存関係として収集され、watchEffect はこれらの依存関係が変更された場合にのみトリガーされます)。

const stop = watchEffect(() =>{},{flush:'post'})   //对写在回调函数里的所有数据监听
stop()  //停止监听

24. Vue3 のテレポートとは何ですか? それは何をするためのものか？

Vue3 の Teleport は、レンダリングする場所を制御するための新しいディレクティブです。これは、コンポーネントの親を変更せずに、DOM 内でコンポーネントのコンテンツを移動します。

25. Vue3 のサスペンスとは何ですか? それは何をするためのものか？

Vue3 の Suspense は Vue3 の新しいコンポーネントであり、遅延読み込みとエラー処理の実装に使用されます。コンポーネントに Suspense を追加すると、非同期コンポーネントは読み込み状態をレンダリングできるようになり、非同期コンポーネントの読み込み時にエラーが発生した場合は、これらのエラーを処理することもできます。

26. レスポンシブシステムとは何ですか? Vue3 のリアクティブシステムの新機能は何ですか?

リアクティブシステムでは、状態が変化したときにビューを更新できます。Vue3 のレスポンシブシステムアップデートには、Proxy、Reflect、WeakMap などが含まれます。

27. Vue3 コンポジション API とは何ですか? それは何をするためのものか？

Vue3 構成 API は Vue3 の新機能であり、その機能はコンポーネント内のロジックを再利用可能な構成可能な関数に分解することです。Comboposition API を使用すると、コードをより適切に整理し、状態を管理できます。

28.3. Vue3 ライフサイクル

オプション API ライフサイクル
構成 API のライフサイクル

29. コンポジションAPIとオプションAPIの見方

構成 API コード構成の改善、ロジックの再利用の改善、型プッシュの改善
小規模プロジェクト、シンプルなビジネスロジック、オプション API を使用
複雑なビジネスロジックを含む中規模および大規模プロジェクトの場合は、Composition API を使用します。
構成 API は、複雑なビジネスロジックを解決するように設計されています
反応フックに似ている

30. ref toRef と toRefs について説明しますか?

参照
1. 値型のリアクティブデータの生成
2. テンプレートとリアクティブに使用可能
3. 値を .value で変更します
toRef
1. リアクティブオブジェクト (リアクティブラッパー) のプロップ
2. レスポンシブで参照を作成する
3. 両方とも参照関係を維持します
toRefs、テンプレート内のすべての状態のエクスポートを回避します。
1. 応答性の高いオブジェクト (リアクティブなカプセル化) を通常のオブジェクトに変換する
2. オブジェクトの各 prop は対応する ref です
3. 両方とも参照関係を維持します
最適な使用方法
1. オブジェクトに応答するには reactive を使用し、値の型に応答するには ref を使用します。
2. セットアップで toRefs(state) または toRef(state, 'prop') を返す
3. ref の変数には xxxRef という名前が付けられます。
4. 複合関数が応答オブジェクトを返す場合は、toRefs を使用します。

31. なぜ参照する必要があるのですか

1. 初衷：不丢失响应式的情况下，把对象数据进行分解和扩散
2. 前提：针对的事响应式对象，不是普通对象
3. 注意：不创造响应式，而是延续响应式

32. セットアップでコンポーネントインスタンスを取得するにはどうすればよいですか?

セットアップおよび他の構成 API にはこれはありません
これは引き続きオプション API で使用できます
Comboposition API では、getCurrentInstance メソッドを使用して取得できます。

33.Composition APIとReact Hooksの比較

前者のセットアップ (ライフサイクル作成) は 1 回だけ呼び出されますが、後者の関数は複数回呼び出されます。
前者では、setup は 1 回だけ呼び出されるため、useMemo、useCallback は必要ありません。
前者は呼び出し順序を考慮する必要がありませんが、後者はフックの順序が一貫していることを確認する必要があります。

34. Vue3 のイベント修飾子は何ですか?

Vue3 のイベント修飾子は、stop、Prevent、capture、self など、基本的に Vue2 と同じです。

35. Vue3 で動的コンポーネントを実装するにはどうすればよいですか?

Vue3 は要素と v-bind:is 属性を使用して動的コンポーネントを実装します。例えば、。

36. Object.definePropertyとProxyの違い

Object.defineProperty と Proxy の違いは次のとおりです。

1. プロキシはプロパティではなくオブジェクトを直接監視できます;
2. プロキシは配列の変更を直接監視できます;
3. プロキシには、apply、ownKeys、deleteProperty、has などに限定されない、最大 13 個のインターセプトメソッドがあります。Object.defineProperty にはありません。
4. プロキシは新しいオブジェクトを返します。目的を達成するために新しいオブジェクトを操作することしかできません。また、Object.defineProperty はオブジェクトのプロパティを走査して直接変更することしかできません。

37. Vue3 の命令は何ですか?

Vue3 の命令には、v-if、v-for、v-bind、v-on、v-html、v-model、v-show、v-slot、v-text などが含まれます。

38. なぜ vue3 はインポートされたコンポーネントに markRaw を使用する必要があるのですか?

vue2ではコンポーネント名で切り替え、vue3ではコンポーネントインスタンスでセットアップを切り替えます。コンポーネントインスタンスをリアクティブエージェントに直接配置すると、Vue が警告を発行します。ShallowRef または markRaw によってプロキシ proxy をスキップできることを通知します。コンポーネントインスタンスのリアクティブプロキシは無意味であり、パフォーマンスの無駄です

markRaw: オブジェクトを応答オブジェクトにできないようにマークします。
toRaw: レスポンシブオブジェクト (reactive で定義されたレスポンシブ) を通常のオブジェクトに変換します。
shallowRef: オブジェクトの応答ではなく、基本的なデータ型の応答のみを処理します。
ShallowReactive: オブジェクトの最も外側のプロパティの応答 (浅い応答) のみを処理します。

<template>
	<component :is="currentComponent"></component>
</template>

<script setup>
import A from '../components/A.vue'
import B from '../components/B.vue'
let tabList = reactive([
	{name:'组件A',com:markRaw(A)},
	{name:'组件B',com:markRaw(B)},
]);

39. Vue3 は状態管理をどのように実行しますか?

Vuex は Vue3 の状態管理に使用されます。Vuex を最初にインストールする必要があり、Vuex はルート Vue インスタンスの app.use() メソッドに登録する必要があります。次に、コンポーネントのストアオプションを使用して、Vuex の状態を作成し、アクセスします。

40. VUE3 はなぜ複合 API を使用するのですか?

vue2 には制限があるため、次のようになります。

コンポーネントを論理的に拡張すると、コンポーネントの可読性が低下します。

コンポーネント間でコードを再利用できない。

vue2 は TS のサポートが制限されています

41. コンポジション API の利点は何ですか?

合成 API は論理的な依存関係に基づいてコードを編成し、可読性と保守性を向上させます。

コードが減り、ロジックコードの再利用が改善される

新しい構文は導入されておらず、単純な関数だけが導入されています

非常に柔軟な

ツールの構文プロンプトはフレンドリーで、シンプルな機能であるため、構文プロンプトと自動補正を実現するのが簡単です

Typescript サポートの向上

複雑な機能コンポーネントでは、特性に応じてコードを整理でき、コードの凝集性が高い

コンポーネント間でコードを再利用する

42. Vue 3 のセットアップについて説明する

setup 関数は、props と context という 2 つのパラメーターを受け取ります。

1. props: 値は、コンポーネントの外部から渡されるものを含むオブジェクトです。受け取ったプロパティはコンポーネント内で宣言されます。Vue3 の props は読み取り専用であることに注意してください。つまり、setup 関数で props の値を変更することはできません。渡されたデータを変更する必要がある場合は、リアクティブオブジェクトまたは参照を使用できます。

2. context: コンテキストオブジェクト。

attrs: 値は、コンポーネントの外部から渡されるが、props 構成で宣言されていない属性を含むオブジェクトです。これと同等.$attrs

スロット: 受信したスロットの内容、this.$slots と同等

Emit: カスタムイベントを配布する関数。this.$emit に相当します。

43. 提供と注入

1. Provide と inject は、親コンポーネントにデータを提供してから子コンポーネントにデータを注入するための新しい API のペアです。

2. Provide: はオブジェクト、またはオブジェクトを返す関数です。そこには、後世に残すべきもの、すなわち属性や属性値が含まれています。

3. inject: 文字列の配列またはオブジェクト。属性値は、from およびデフォルトのデフォルト値を含むオブジェクトにすることができます。

//在父组件中，使用provide提供数据：
//name：定义提供 property的 name。
//value ：property的值。
 setup(){
    provide('info',"值")
  }

//在子组件中，使用inject注入数据
//name：接收 provide提供的属性名。
//default：设置默认值，可以不写，是可选参数。
setup(){
    const info = inject("info")
    inject('info',"设置默认值")
    return {
        info
    }
  }

//需要注意的是，provide和inject只能在setup函数中使用，而且provide提供的数据只能在其子组件中使用。如果要在兄弟组件中共享数据，可以使用一个共享的对象或者使用Vuex等状态管理库。

44.shallowReactiveとshallowRef

1.shallowRef: 基本的なデータ型のみを扱うレスポンシブ型

2.shallowReactive: オブジェクトの最も外側のプロパティのみを扱うレスポンシブ (浅いレスポンシブ)

3. 浅い関数による応答性の高いデータ処理: 第 1 レベルのオブジェクトのデータのみが処理され、それより下にネストされたデータは処理されず、操作データは無効になります。

4.shallowReativeとshallowRefは、いくつかの特別なアプリケーションシナリオでパフォーマンスを向上させることができます.前者はオブジェクトを対象とし、浅い応答データ処理に使用されますが、後者は基本的なデータ型の応答のみを処理し、オブジェクト処理を実行しません。

45.readonlyとshallowReadonly

readonly とshallowReadonly は両方とも、応答性の高いデータに読み取り機能のみを許可します。後者は浅い読み取り専用、つまりデータオブジェクトの最初の層でのみ機能し、shallowReadonl() で処理する場合は深い入れ子になります。データサポートが変更されました

1. readonly: 応答データを読み取り専用 (ディープ読み取り専用) にし、応答データを読み取り専用にし、応答データを受信し、読み取り専用で処理すると、新しく割り当てられたデータは変更できなくなります。

2. オブジェクト (応答性または通常) または参照を受け入れ、元の値の読み取り専用プロキシを返します。

3. ShallowReadonly: レスポンシブデータを読み取り専用 (浅い読み取り専用) にし、レスポンシブデータを受信し、shallowreadonly 処理後、読み取り専用になり、オブジェクトの最初のレイヤーデータのみを考慮し、変更できませんが、ネストの最初のレベルの深いデータは変更をサポートします

4. 応答データを読み取り専用 (浅い読み取り専用) にします。

46. vue3で父から息子へ、息子から父へ

1. 父から息子へ:

1. 親コンポーネントのサブコンポーネントタグを渡します: サブコンポーネントに渡すデータ名 = '渡すデータ'

2. サブコンポーネントの props を通じて受信し、テンプレートで使用します

2、子传父：

1. サブコンポーネントは、セットアップ関数 context.emit の 2 番目のパラメータを通じてイベントをトリガーし、子から親への送信を実現します。

47. refとreactiveの違いは何ですか?

簡単に言うと、ref は通常基本类型データの定義に使用され、reactive は对象（或者数组）型データの定義に使用されます。

注: ref は、オブジェクト (または配列) タイプのデータを定義するために使用することもできます。このデータは、内部でリアクティブを通じてプロキシオブジェクトに自動的に変換されます。

使用に関して: ref はデータ需要.value値を操作しますが、これはテンプレートテンプレートでは必要ありません。

reactive は不需要.value値
3 をとります。データ転送に関しては次のようになります。

代入を分割すると、reactive の応答性が失われますが、{ref(1), ref(2)} の応答性は失われません。

主角:

ref は、Object.defineProperty() の get および set を通じて応答性 (データハイジャック) を実装します。

reactive は、Proxy を使用して応答性 (データハイジャック) を実装し、Reflect を通じてソースオブジェクト内のデータを操作します。

48. vue3のレスポンシブデータの判定は？

isRef: 値が ref オブジェクトかどうかを確認します。

isReactive: オブジェクトが reactive によって作成されたリアクティブプロキシであるかどうかを確認します。

isReadonly: オブジェクトが readonly によって作成された読み取り専用プロキシであるかどうかを確認します

isProxy: オブジェクトがリアクティブメソッドまたは読み取り専用メソッドによって作成されたプロキシであるかどうかを確認します。

49. toRefを理解する方法

機能: 値が別のオブジェクトの属性を指す ref オブジェクトを作成します。

構文: const name = toRef(person,'name')

用途: 外部使用のみを目的としてレスポンシブオブジェクトにプロパティを提供したい場合。

拡張子: toRefs は toRef と同じ機能を持ちますが、複数の ref オブジェクトをバッチで作成できます。構文: toRefs(person)

50. vue3 にはどのような新しいコンポーネントがありますか?

1.
Vue2 のフラグメント: コンポーネントにはルートタグが必要です

Vue3 では: コンポーネントはルートタグを持つことができず、複数のタグが内部的にフラグメント仮想要素に含まれます。

利点: ラベルレベルの削減、メモリ使用量の削減

2. テレポート
テレポートとは何ですか? —— テレポートは、コンポーネントの HTML 構造を指定された場所に移動できるテクノロジーです。

<teleport to="移动位置">
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3>我是一个弹窗</h3>
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

3. サスペンスは、
アプリケーションのユーザーエクスペリエンスを向上させるために、非同期コンポーネントを待機するときに追加のコンテンツをレンダリングします。

使用手順:

コンポーネントを非同期的にインポートする

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

Suspense を使用してコンポーネントをラップし、デフォルトとフォールバックを構成する

<template>
    <div class="app">
        <h3>我是App组件</h3>
        <Suspense>
            <template v-slot:default>
                <Child/>
            </template>
            <template v-slot:fallback>
                <h3>加载中.....</h3>
            </template>
        </Suspense>
    </div>
</template>

51. 補足

今日はここに書きます〜
友達、(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝまた明日~~
みんなも毎日幸せになろうね

記事の修正が必要な箇所はどなたでもご指摘ください~
学習には終わりがなく、協力は双方に利益をもたらします

ここに画像の説明を挿入

2023 年の vue2+vue3 面接の最新の 50 の Vue フルセットの質問と回答の概要