VUE3 の面接でよくある質問

Piniaのデータをリセットする方法

Pinia は Vue 状態管理ライブラリです。そのデータをリセットしたい場合は、次の方法を試すことができます。

1. ピニアのreset方法を使用する

ストアでresetこのメソッドを呼び出すと、ストア内のすべての状態がデフォルト値にリセットされます。次に例を示します。

import { defineStore } from 'pinia'

export const useMyStore = defineStore('myStore', {
  state: () => ({
    counter: 0,
    isAuthenticated: false,
  }),
  actions: {
    resetAll() {
      this.$reset()
    },
  },
})

上の例では、resetAllメソッドを呼び出すと、counterとisAuthenticated状態の両方がデフォルト値にリセットされます。

2. ステータスを手動でリセットする

場合によっては、ストア内のデータを手動でリセットする必要がある場合があります。ストア内の状態を反復処理して、それらをデフォルト値に設定できます。次に例を示します。

import { defineStore } from 'pinia'

export const useMyStore = defineStore('myStore', {
  state: () => ({
    counter: 0,
    isAuthenticated: false,
  }),
  actions: {
    resetAll() {
      Object.assign(this.$state, this.$options.state())
    },
  },
})

上の例では、resetAllメソッドはストアの状態を反復して、各状態をデフォルト値に設定します。これにより、counterとの両方の状態がisAuthenticatedデフォルト値にリセットされます。

どの方法を使用する場合でも、次回使用するときにストアが正しい初期状態になるように、ストアのすべての状態をリセットする必要があります。

Pinia がデータを変更する方法

Pinia は、Vue アプリケーションでデータの状態を管理するために使用できる状態管理ライブラリです。Pinia でデータを変更するには、Pinia で提供されるアクションメソッドを使用する必要があります。これは、Vuex のミューテーションメソッドに似ています。

以下は、Pinia でデータを変更する方法を示す簡単な例です。

import { defineStore } from 'pinia'

// 创建一个 Pinia Store
const store = defineStore('example', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

// 在组件中使用
import { useStore } from 'pinia'

export default {
  setup() {
    const store = useStore('example')

    function handleClick() {
      store.increment()
    }

    return {
      handleClick
    }
  }
}

上記のコードでは、exampleという名前の状態を含むという名前の Pinia ストアを定義しますcount。の値に 1 を加算する、という名前のメソッドactionsを定義します。incrementthis.count++count

コンポーネントでは、useStoreメソッドを使用してexampleStore のインスタンスを取得し、incrementメソッドを呼び出してcount値を変更できます。

コンポーネントで使用するとstore.count、Pinia の状態がリアクティブであるため、ビューに自動的に応答します。

Pinia が非同期操作を実行する方法

Pinia は、Vue 3 の複合 API を使用して、データの非同期操作をサポートします。以下は、データを非同期的に操作する例です。

import { defineStore } from 'pinia'

export const useStore = defineStore({
  id: 'example',
  state: () => ({
    data: null,
    loading: false,
    error: null,
  }),
  actions: {
    async fetchData() {
      try {
        this.loading = true
        const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
        const data = await response.json()
        this.data = data
        this.error = null
      } catch (error) {
        this.error = error.message
      } finally {
        this.loading = false
      }
    },
  },
})

上記の例では、fetchDataメソッドはasync/await非同期を使用してデータを取得します。データ取得開始時にloadingステータスをに設定し、true読み込み状況をインターフェース上に表示できるようにします。エラーが発生した場合は、errorステータスをエラーメッセージに設定します。結果に関係なく、ステータスは最終的にloadingになりますfalse。

コンポーネント内でストアを使用します。

<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-if="error">{
   
   { error }}</div>
    <div v-if="data">{
   
   { data.title }}</div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script setup>
import { useStore } from './store'

const store = useStore()

const { data, loading, error, fetchData } = store
</script>

上の例ではstore、fetchData、data、loadingおよびfrom をインポートしerror、コンポーネントのsetup関数に追加します。テンプレートでは、v-if属性を使用してステータスに基づいて対応するコンテンツを表示し、@click属性を使用してfetchDataメソッドを呼び出してデータを取得します。

ピニアとビュークスの違い

Pinia と Vuex はどちらも Vue.js アプリケーションでアプリケーションの状態を管理するために使用されるライブラリですが、次のような違いがあります。

API スタイル: Pinia は関数ベースの API スタイルを採用し、Vuex はオブジェクトベースの API スタイルを採用します。
TypeScript のサポート: Pinia は TypeScript をネイティブでサポートしていますが、Vuex では TypeScript サポートを追加インストールする必要があります。
パフォーマンス: Pinia は、状態管理にリアクティブを使用するなど、Vue 3 の新機能を活用することでパフォーマンスを向上させ、Vue 2 での Dep オブジェクトの使用を回避できます。これに比べて、Vuex はより複雑なデータ構造を使用し、Vue 2 の Dep オブジェクトを使用するため、パフォーマンスは比較的低くなります。
動的ロード: Pinia はモジュールの動的ロードをサポートしていますが、Vuex はアプリケーションの起動時にすべてのモジュールをロードする必要があります。
モジュールの初期化: Vuex では、アプリケーションの起動時にモジュールを初期化する必要がありますが、Ponia では、必要に応じてモジュールが動的に作成されます。

全体として、Ponia はより軽量でパフォーマンスが優れており、Vuex はすぐに使用できる機能と幅広いコミュニティサポートを提供します。どちらを選択するかは、特定のニーズによって異なります。

Vue2.0とVue3.0の違いは何ですか?

Vue2.0 と Vue3.0 は Vue.js の 2 つの主要なバージョンであり、次のような違いがあります。

パフォーマンスの向上: Vue3.0 では、Object.defineProperty の代わりに Proxy を使用して応答性の高いデータバインディングを実装することにより、パフォーマンスが向上しました。
より優れた型推論: Vue3.0 は TypeScript を使用してコードを書き換え、より優れた型推論と型制約を提供します。
パッケージサイズの縮小: Vue3.0 は、不要なコードを削除し、ツリーシェーキングの最適化を改善することで、パッケージサイズの縮小を実現します。
テンプレートコンパイラのアップグレード: Vue3.0 のテンプレートコンパイラは、コンパイルのパフォーマンスとコンパイルエラーのフィードバックを向上させる新しいコンパイラフレームワークを使用します。
コンポーザビリティの向上: Vue3.0 では、コンポジション API が導入され、コンポーザビリティと再利用性が向上しました。
より優れた開発エクスペリエンス: Vue3.0 は、より優れたエラー処理、より優れたデバッグツールなど、より優れた開発ツールと開発エクスペリエンスを提供します。

一般に、Vue3.0 は Vue2.0 よりもパフォーマンスが高く、構成可能性が高く、開発エクスペリエンスが優れており、パッケージサイズが小さくなっています。ただし、Vue3.0 ではいくつかの新機能が導入され、一部の独自 API が変更されているため、Vue2.0 とは構文や使用方法にいくつかの違いがあり、開発者は適切な学習と変換を行う必要があります。

セットアップパラメータを簡単に説明します

Vue 3 のセットアップパラメーターは、Composition API で使用される特別な関数であり、コンポーネント内で再利用可能なロジックコードを定義するために使用できます。refこれらのロジックコードでは、reactive、、computedなどのリアクティブ API を使用してデータを定義したり、 watch、、onMountedなどのライフサイクル関数を使用して副作用を処理したりできます。

一般的に使用されるセットアップパラメーターの一部を次に示します。

props: 親コンポーネントから受け取ったプロパティを定義します。
context: 親コンポーネント、子コンポーネント、その他の情報を含むコンポーネントコンテキストオブジェクト。
setup: コンポーネントのロジックを定義する関数。
data: コンポーネントの内部データを定義する関数。
computed: 計算されたプロパティを定義する関数。
メソッド: コンポーネントのメソッドを定義するオブジェクト。
watch: 応答性の高いデータのリスナーを定義します。

Vue 3 では、setup 関数が必須であり、コンポーネントインスタンスを作成する前に 1 回実行されます。setup 関数は、propsとの2 つのパラメータを受け取ることができますcontext。そのうちのは、props親コンポーネントからプロパティを受け取るために使用されるリアクティブオブジェクトであり、そのプロパティをラップするためにrefまたはを使用できます。は、一般的に使用されるコンポーネントコンテキスト情報を含む通常の JavaScript オブジェクトです。reactivecontext

setup 関数を使用した簡単な Vue 3 コンポーネントの例:

<template>
  <div>
    <h1>{
   
   { message }}</h1>
    <button @click="increment">Click Me</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'MyComponent',
  setup(props, context) {
    const message = ref('Hello World');

    function increment() {
      message.value += '!';
    }

    return { message, increment };
  },
};
</script>

上の例では、using というリアクティブデータrefを定義し、それをに初期化しました。次に、関数内で変更しての値を変更します。最後に、テンプレートで使用するためにステートメントをエクスポートします。message'Hello World'incrementmessage.valuemessagereturnmessageincrement

セットアップの戻り値の簡単な説明

Vue 3 ではsetup関数が必須であり、構成 API に使用されます。setup関数はオブジェクトを返す必要があり、そうでない場合、このオブジェクトはコンポーネントインスタンスのプロパティnullになります。setupState

setup関数によって返されるオブジェクトには複数のプロパティを含めることができ、各プロパティは共通の値、リアクティブオブジェクト、計算されたプロパティ、メソッドなどにすることができます。これらのプロパティは、コンポーネントのテンプレートまたはコンポーネントのメソッドで使用できます。

簡単な関数の例を次に示しますsetup。

import { reactive } from 'vue'

export default {
  name: 'MyComponent',
  setup() {
    const state = reactive({
      count: 0,
      increment() {
        state.count++
      }
    })

    return { state }
  }
}

上の例では、setup関数stateは値がリアクティブオブジェクトであるプロパティを含むオブジェクトを返します。このリアクティブオブジェクトでは、count初期値がのという名前のプロパティ0と、の値をincrementインクリメントするという名前のメソッドを定義します。count最後に、stateコンポーネントのテンプレートとメソッドで使用できるようにエクスポートします。

setup関数によって返されたオブジェクトにコンポーネントオプションと同じ名前のプロパティが含まれている場合、このプロパティはコンポーネントオプションのプロパティを上書きすることに注意してください。たとえば、setup関数とコンポーネントオプションの両方でcreatedメソッドが定義されている場合、setup関数のメソッドはコンポーネントオプションのメソッドをオーバーライドします。

シャローリアクティブとは

ShallowReactive は Vue 3 の API です。これはリアクティブ API のバリアントであり、オブジェクトの最上位プロパティにのみ応答するリアクティブオブジェクトを作成するために使用されます。reactive とは異なり、shallowReactive はオブジェクトのすべてのプロパティを応答オブジェクトに再帰的に変換するのではなく、最上位のプロパティのみを応答オブジェクトに変換します。したがって、shallowReactive は、最上位のプロパティが変更された場合には更新をトリガーしますが、ネストされたプロパティが変更された場合には更新をトリガーしません。

浅い参照とは何ですか

ShallowRef は、Vue.js 3 の応答性の高いデータ型です。ref に似ていますが、基本的な型 (文字列、数値、ブール値など) に対して浅い応答性の処理のみを実行します (つまり、データ自体を処理するだけで、埋め込みデータは処理しません)、プロパティのセット)。ShallowRef がオブジェクトをラップすると、オブジェクト内のプロパティはリアクティブに処理されませんが、オブジェクト自体はリアクティブに処理されます。ref と同様に、shallowRef も、ラップされた値を読み取り、更新するための value 属性を提供します。

readonly とshallowReadonly とは何ですか?

readonlyとはshallowReadonlyどちらも Vue3 のツール機能で、読み取り専用 (変更不可) のリアクティブオブジェクトを作成するために使用されます。

readonlyオブジェクトに他のオブジェクトまたは配列が含まれている場合でも、オブジェクトのすべてのプロパティは読み取り専用の応答プロパティに再帰的に変換されます。
shallowReadonlyオブジェクト自体のプロパティのみが読み取り専用のリアクティブプロパティに変換され、オブジェクト内のプロパティは再帰的に変換されません。

例えば：

import { readonly, shallowReadonly } from 'vue';

const obj = {
  a: 1,
  b: {
    c: 2
  },
  arr: [3, 4, 5]
};

const ro = readonly(obj);
const sro = shallowReadonly(obj);

// 下面两行代码都会报错
ro.a = 2;
sro.a = 2;

// 下面两行代码只有第一行会报错
ro.b.c = 3;
sro.b.c = 3;

// 下面两行代码都会报错
ro.arr[0] = 6;
sro.arr[0] = 6;

toRef と toRefs の違いは何ですか?

toRef と toRefs はどちらも Vue3 のリアクティブ API です。これらは、非反応性オブジェクトを反応性オブジェクトに変換するために使用されます。

toRef の機能は、通常のオブジェクトプロパティを応答オブジェクトプロパティに変換し、ref オブジェクトを返すことです。これにより、この ref オブジェクトをテンプレートでレンダリングおよび応答更新に使用できるようになります。

toRefs の機能は、通常のオブジェクトを複数の ref オブジェクトに変換することです。各 ref オブジェクトは元のオブジェクトのプロパティに対応するため、これらの ref オブジェクトはレンダリングや応答性の高い更新用のテンプレートで使用できます。toRefs 関数は、複数の ref オブジェクトを含む応答オブジェクトを返します。

toRef と toRefs の違いは次のとおりです。

toRef は通常のオブジェクトプロパティを ref オブジェクトに変換することしかできませんが、toRefs はオブジェクト全体を複数の ref オブジェクトに変換できます。
toRef は ref オブジェクトを返しますが、toRefs は複数の ref オブジェクトを含む応答オブジェクトを返します。

結合アピレフとは何ですか

コンポジション API では、ref はコンポーネントまたは要素のインスタンスを参照するプロパティです。これにより、合成 API を使用するときに DOM 要素またはコンポーネントインスタンスを直接操作できるようになります。ref は、使用される API に応じて、コールバック関数または ref を作成する関数になります。ref を使用すると、イベントのトリガー、プロパティ値の取得、再レンダリングの強制など、コンポーネントのメソッドとプロパティを直接操作できます。

結合APIのrefとreactiveの違い

合成 API は、Vue 3 の新しい API であり、従来のオプション API を使用して Vue コンポーネントを作成する代わりに、複数の再利用可能なロジック関数を組み合わせるために使用できます。複合 API の ref と reactive は両方とも、応答性の高いデータを管理するために使用されます。

ref は、通常の JavaScript データを応答性の高いデータに変換し、そのデータを含む参照オブジェクトを返します。このデータには .value 属性を通じてアクセスすることも、ref に組み込まれたメソッドの一部を使用してデータを操作することもできます。

reactive は、通常の JavaScript オブジェクトをレスポンシブオブジェクトに変換し、レスポンシブオブジェクトを返します。応答オブジェクトのプロパティおよび応答オブジェクトの一部の組み込みメソッドにアクセスすることで、データ操作を実行できます。

ref と reactive の違いは次のとおりです。

Ref は単一値の応答データを管理するためにのみ使用できますが、reactive はオブジェクト全体を応答的に管理できます。
ref の .value 属性はデータに直接アクセスする方法ですが、reactive のデータにはオブジェクトのプロパティにアクセスする必要があります。
コンポーネントで ref を使用する場合は、ref オブジェクトをサブコンポーネントに渡すことによって値を転送できますが、reactive を使用する場合は、オブジェクト全体をサブコンポーネントに渡すことによって値を転送する必要があります。

つまり、ref と reactive はどちらもレスポンシブデータを管理するための API ですが、アプリケーションシナリオが若干異なるため、特定の状況に応じてどちらを使用するかを選択する必要があります。

Object.defineProperty と Proxy の違いは何ですか

Object.defineProperty と Proxy はどちらも JavaScript オブジェクトの操作をインターセプトするために使用できますが、この 2 つにはいくつかの違いがあります。

さまざまな関数: Object.defineProperty は主に、単一プロパティの読み取り、書き込み、削除操作をインターセプトするために使用されますが、プロキシはプロパティアクセス、割り当て、関数呼び出しなどを含むすべてのオブジェクト操作をインターセプトできます。
操作方法は異なります。Object.defineProperty は各プロパティを設定する必要がありますが、Proxy はオブジェクト全体をインターセプトでき、インターセプターは対応する操作を実装するだけで済みます。
互換性は異なります。Object.defineProperty は ES5 以降でサポートされ、Proxy は ES6 以降でサポートされます。古いブラウザはプロキシをサポートしていない可能性があります。
使用シナリオは異なります。通常、Object.defineProperty は既存のオブジェクトを変換するために使用されますが、Proxy はオブジェクトの作成時にインターセプトするか、既存の複雑なオブジェクトをインターセプトするのに適しています。

一般に、Object.defineProperty の方がシンプルで使いやすいのに対し、Proxy はより強力ですが、使用するのがより複雑です。特定のニーズに応じて、対応する方法の使用を選択できます。

複合 API の計算されたプロパティ

合成 API を使用すると、計算されたプロパティを使用してデータを計算し、合成関数に保存できるため、コードの再利用性と可読性が向上します。

たとえば、結合関数では、合計価格を計算するための計算プロパティを作成できます。

import { computed } from 'vue';
import { useStore } from './store';

export default {
  setup() {
    const store = useStore();

    const totalPrice = computed(() => {
      return store.state.cart.reduce((total, product) => total + product.price, 0);
    });

    return { totalPrice };
  }
}

上の例では、関数を使用して、computedショッピングtotalPriceカート内のすべての商品の合計価格を計算して返すという計算プロパティを作成します。計算されたプロパティを合成関数の戻り値にして、テンプレートで使用できるようにします。

テンプレートでは、次のように計算されたプロパティを使用できます。

<template>
  <div>
    <p>Total price: {
   
   { totalPrice }}</p>
  </div>
</template>

こうすることで、ショッピングカート内の商品の数量または価格が変更された場合、totalPrice計算されたプロパティが自動的に更新され、合計価格が正確に保たれます。

結合された API フィルター

Vue 3 ではフィルターは非推奨になったので、同じ機能を実行するには計算されたプロパティまたはメソッドを使用することをお勧めします。

計算されたプロパティ:

<template>
  <div>
    <p>{
   
   { message }}</p>
    <p>{
   
   { filteredMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello world',
      filterBy: 'world'
    }
  },
  computed: {
    filteredMessage() {
      return this.message.split(' ').filter(word => word.includes(this.filterBy)).join(' ');
    }
  }
}
</script>

上記のコードでは、計算されたプロパティを使用して、特定の単語を含む部分filteredMessageをフィルター処理します。message

方法：

<template>
  <div>
    <p>{
   
   { message }}</p>
    <p>{
   
   { filteredMessage() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello world',
      filterBy: 'world'
    }
  },
  methods: {
    filteredMessage() {
      return this.message.split(' ').filter(word => word.includes(this.filterBy)).join(' ');
    }
  }
}
</script>

filteredMessage上記のコードでは、同じフィルタリング機能を実行するメソッドを使用しています。

要約すると、Vue 3 では非推奨のフィルターがあり、同じことを行うには計算されたプロパティまたはメソッドを使用することが推奨されます。

結合された API とは何ですか?

Vue 3 では、新しい関数ベースの合成 API が導入されています。以下に、Vue 3 のコンポーザブル API の一部を示します。

setup(): コンポーネントのインスタンス化前に実行され、コンポーネントを初期化するために使用されるコンポーネントオプションの 1 つ。ここでは、応答性の高いデータ、計算されたプロパティ、メソッド、ライフサイクルフックなどを定義できます。
reactive(): オブジェクトをパラメータとして受け入れ、応答データオブジェクトを返します。
ref(): 初期値をパラメータとして受け入れ、プロパティを通じてアクセスおよび変更できるラッパーオブジェクトを返します.value。
watchEffect(): 応答性の高いデータまたは計算されたプロパティをパラメーターとして受け入れ、データが変更されるとコールバック関数が自動的に実行されます。
computed(): 関数をパラメータとして受け取り、計算されたプロパティを返します。計算されたプロパティの値は、それが依存するリアクティブデータが変更されると再計算されます。
watch(): 応答性の高いデータまたは計算されたプロパティをパラメーターとして受け入れ、データが変更されたときにコールバック関数を実行します。
toRefs(): リアクティブデータオブジェクトをリアクティブデータで構成されるオブジェクトに変換します。
onMounted(): コンポーネントのマウント後に実行されるライフサイクルフック。
onUpdated(): コンポーネントの更新後に実行されるライフサイクルフック。
onUnmounted(): コンポーネントがアンインストールされる前に実行されるライフサイクルフック。

つまり、Vue 3 で統合された API はより柔軟で直観的であり、コンポーネントをより適切にカプセル化して再利用できます。

API-Watch の組み合わせについて簡単に説明してください

Vue3 結合 API の監視関数は、応答データの変更を監視し、対応する操作を実行するために使用されます。watch 関数は、監視対象のデータとコールバック関数の 2 つのパラメータを受け取ります。監視データが変化すると、コールバック関数がトリガーされて、対応する操作が実行されます。

監視機能を使用するには、次の 3 つの方法があります。

単一のデータソースをリッスンします。

import { watch } from 'vue'

const count = ref(0)

watch(count, (newVal, oldVal) => {
  console.log(`count的值发生变化，新值为${newVal}，旧值为${oldVal}`)
})

1. 複数のデータソースを監視します。

import { watch } from 'vue'

const count1 = ref(0)
const count2 = ref(0)

watch([count1, count2], ([newVal1, newVal2], [oldVal1, oldVal2]) => {
  console.log(`count1的值发生变化，新值为${newVal1}，旧值为${oldVal1}`)
  console.log(`count2的值发生变化，新值为${newVal2}，旧值为${oldVal2}`)
})

3. 複数のデータソースをオブジェクト形式で監視します。

import { watch } from 'vue'

const data = reactive({
  count1: 0,
  count2: 0
})

watch(data, ({ count1, count2 }, { count1: oldCount1, count2: oldCount2 }) => {
  console.log(`count1的值发生变化，新值为${count1}，旧值为${oldCount1}`)
  console.log(`count2的值发生变化，新值为${count2}，旧值为${oldCount2}`)
})

カスタムフックとは

Vue3 のカスタムフックは、Vue3 の結合 API に基づいて実装されています。フックをカスタマイズすると、一般的に使用されるロジック (データ取得、状態管理など) を関数にカプセル化して、コードとロジックの重複を避けるために別のコンポーネントで再利用できるようになります。

カスタムフックの実装は非常に簡単で、関数を定義し、その関数内で Vue3 の結合 API を使用して論理カプセル化を実装するだけです。たとえば、カスタムフックを使用する簡単な例を次に示します。

import { ref, onMounted } from 'vue'

function useCountdown(seconds) {
  const count = ref(seconds)

  const timer = setInterval(() => {
    count.value--
  }, 1000)

  onMounted(() => {
    if (count.value <= 0) {
      clearInterval(timer)
    }
  })

  return { count }
}

export default {
  setup() {
    const { count } = useCountdown(10)

    return { count }
  }
}

上の例では、カウントダウンを表す秒数を受け取る useCountdown という名前のカスタムフック関数を定義し、ref 関数を通じて count という名前の応答データを作成し、関数内で Vue3 を使用しました。結合された API onMounted と setInterval は、次の目的で使用されます。カウントダウンロジックのカプセル化を実装します。最後に、カスタムフックを関数としてエクスポートし、関数によって返されたカウントデータをコンポーネント内で使用します。

Vue オプション API と結合 API のフォワード値は何ですか?

オプション API: 前方値はコンポーネントの props を通じて渡されます。
複合 API: 転送値は複合 API のパラメーターを通じて渡されます。たとえば、setup関数のパラメータを使用して親コンポーネントから渡された props を受信したり、provide/ injectAPI を使用して親コンポーネントと子コンポーネントの間で状態を共有したりできます。
値の転送: 通常は props 属性を介して、親コンポーネントから子コンポーネントにデータを渡すことを指します。たとえば、親コンポーネントでを使用して、<ChildComponent :propName="propValue" />プロパティ値を子コンポーネントに渡します。

Vue オプション API と結合 API の逆価値転送とは何ですか?

Vue のオプション API では、親コンポーネントから子コンポーネントへの値の受け渡しは props を通じて行われます。$emit イベントをトリガーすることで、値が子コンポーネントから親コンポーネントに渡されます。

Vue の結合 API では、setup 関数で返されたオブジェクトを通じて、値が親コンポーネントから子コンポーネントに渡されます。子コンポーネントから親コンポーネントへの値の転送は、子コンポーネントで関数を定義し、親コンポーネントで v-on ディレクティブを使用してその関数をバインドすることで実行されます。context 属性を介して祖先コンポーネントのプロパティとメソッドにアクセスし、値を渡すこともできます。

Vue2 と vue3 の双方向データバインディングの原則は異なります

Vue2 と Vue3 の双方向データバインディングの原則は異なります。

Vue2 では、データハイジャックを使用して双方向のデータバインディングが実現されます。データハイジャックとは、Object.defineProperty() メソッドを通じてオブジェクトのプロパティをハイジャックし、プロパティを監視して応答することを指します。Vue2 では、データが変更されると、システムは自動的に setter 関数をトリガーし、関連するコンポーネントに更新するよう通知します。

Vue3 では、Proxy プロキシを使用して双方向のデータバインディングが実現されます。プロキシプロキシは ES6 の新機能で、オブジェクトをプロキシし、オブジェクトの変更を追跡できます。Vue3 では、データが変更されると、システムはプロキシエージェントを通じて新しい値をキャプチャし、関連するコンポーネントの更新をトリガーします。

一般に、Vue2 と Vue3 の双方向データバインディングの実装原則は異なりますが、どちらもデータとビューの自動更新を実現できます。Vue3 でプロキシを使用する方法は、Vue2 のデータハイジャックよりも柔軟で効率的ですが、ブラウザの互換性を考慮する必要があります。

v-if および v-for 優先順位

Vue 2 では、v-for は v-if よりも優先されます。これは、要素に v-if ディレクティブと v-for ディレクティブの両方がある場合、v-for が最初に実行され、次に v-if が実行されることを意味します。

例えば：

<div v-for="item in items" v-if="item.isActive">
  {
   
   { item.name }}
</div>

上記の例では、isActive 属性がない場合、または値が false の場合、レンダリングされた div 要素は表示されませんが、v-for ディレクティブは引き続き実行されます。

Vue 3 では、v-if と v-for の順序が変更されました。要素に v-if 命令と v-for 命令がある場合、v-if が最初に解析されて実行され、v-for は v-if の条件が true の場合にのみ実行され、ループ内でレンダリングされます。

例えば：

<div v-if="isShow" v-for="item in items">
  {
   
   { item }}
</div>

Vue 3 では、isShow が true の場合にのみ、items 配列内の要素がリスト形式でレンダリングされます。

要約すると、Vue 2 では v-for の方が v-if よりも優先されますが、Vue 3 では v-if の方が優先されます。したがって、テンプレートが期待どおりに動作するように、適切な命令順序を選択するように注意する必要があります。

最後に注意すべき点は、レンダリングのパフォーマンスの問題を避けるために、v-if と v-for を使用するときは注意する必要があるということです。同じノード上で v-if ディレクティブと v-for ディレクティブを同時に使用することは避けてください。また、大規模なデータセットに対して v-if 操作を行わないでください。

vue-router4 と vue-router3 の違いは何ですか

Vue Router 4 と Vue Router 3 の違いは次のとおりです。

動的ルーティングは別の方法で記述されます。Vue Router 4 では動的ルーティング:paramを表す必要がありますが、Vue Router 3 では動的ルーティングを使用する必要があります$route.params.param。
Vue Router 4 では、Vue Router 3 ではサポートされていないオプションのパラメーターを使用できます。
Vue Router 4 では、createRouter()メソッドを使用して新しいルートインスタンスを作成できますが、Vue Router 3 では、new VueRouter()メソッドを使用する必要があります。
およびなどbeforeRouteEnter、いくつかの新しいライフサイクルフック関数が Vue Router 4 に追加されました。これらのライフサイクルは Vue Router 3 には存在しません。beforeRouteUpdatebeforeRouteLeave
useRoute()Vue Router 4 では、を使用して現在のルーティングオブジェクトを取得できますが、Vue Router 3 では、$routeを使用して取得する必要があります。
Vue Router 4 のモードではhistory、ルーティングbase設定で相対パスが使用されますが、Vue Router 3 では絶対パスが使用されます。

全体として、Vue Router 4 は、機能と構文の点で Vue Router 3 よりも強力で使いやすくなっています。Vue 2.x を使用している場合は、開発のために Vue Router 4 にアップグレードすることをお勧めします。

vue-router4でルーティングモードを設定する方法

Vue Router 4 では、createRouter関数を使用してルーティングインスタンスを作成し、ルーティングモードを設定できます。ルーティングモードには、ハッシュモードとヒストリーモードの 2 つがあります。

1.ハッシュモード

ハッシュモードでは、URL のパスは # で始まります。ルーターは URL のハッシュ値の変更をリッスンし、現在の URL のハッシュ値をルーティングパラメーターとして自動的に使用し、一致するコンポーネントをレンダリングします。

ハッシュモードを有効にするには、関数のプロパティを次のようにcreateRouter設定します。historycreateWebHashHistory()

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // routes配置
  ]
})

2.ヒストリーモード

履歴モードでは、URL のパスは # で始まりません。ルーターはブラウザの履歴変更をリッスンし、現在の URL のパスをルーティングパラメーターとして自動的に使用し、一致するコンポーネントをレンダリングします。

次のようにcreateRouter関数内でhistoryプロパティをに設定することで、履歴モードを有効にできます。createWebHistory()

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // routes配置
  ]
})

注: 履歴モードを使用する場合は、ブラウザでページが更新されたときにアプリケーションの正しい状態を正しく取得できるように、サーバーのベース URL が正しく構成されていることを確認する必要があります。サーバーがベース URL を正しく構成していない場合、ページを更新するときに 404 エラーが発生する可能性があります。

スロット、通常のスロット、名前付きスロット、およびスコープ付きスロットについて簡単に説明します。

スロットは、コンポーネント内のコンテンツを入力できるプレースホルダーであり、親コンポーネントが子コンポーネントにコンテンツを渡すことができるようになります。

通常のスロットはコンポーネント内の最も単純なスロットであり、デフォルトスロットとも呼ばれます。親コンポーネントが特定のコンテンツを子コンポーネントに渡さない場合、スロット内のデフォルトのコンテンツがレンダリングされます。

名前付きスロットには異なる名前を付けることができ、親コンポーネントが複数の異なるコンテンツを子コンポーネントに渡すことができます。子コンポーネントでは、<slot>タグのname属性を使用して名前付きスロットの名前を指定し、親コンポーネントでは<template>タグのv-slotディレクティブを使用してコンテンツを渡します。

スコープ付きスロットは、スロットの内容を子コンポーネントで処理できるようにするスロットです。サブコンポーネントでは、<slot>ラベルのnameプロパティを使用してスコープスロットの名前を指定したり、<slot>ラベルのv-bind命令を使用してサブコンポーネントからスロットのコンテンツにデータを渡すことができます。<template>親コンポーネントでは、タグのv-slot命令でこれを使用して、slot-scope子コンポーネントに渡されたデータを取得し、スロットのコンテンツを処理できます。

Vue3 テレポートとは何ですか?

Vue3 Teleport は Vue.js バージョン 3.0 の新しいコンポーネントで、サブコンポーネントをテンプレートに直接配置するのではなく、現在のコンポーネント内の任意の場所にレンダリングできます。テレポートコンポーネントを使用すると、コードを簡潔で理解しやすく保ちながら、アプリケーション内の DOM 要素とコンポーネントの配置をより適切に制御できるようになります。テレポートコンポーネントは、必要に応じてコンポーネントを動的に移動できます。これは、異なる階層でレンダリングされるモーダル、ポップアップ、ドロップダウンメニューなどに役立ちます。

オプションAPI、複合APIのライフサイクルフック機能とは何ですか?

オプションAPIのライフサイクルフック機能は以下のとおりです。

beforeCreate: データの観察とイベントの構成の前に、コンポーネントインスタンスが作成されたばかりです。
created: コンポーネントインスタンスが作成され、データの観測とイベントの設定が完了しました。
beforeMount: コンポーネントがマウントされる前に呼び出され、関連するレンダリング関数が初めて呼び出されます。
Mounted: コンポーネントがマウントされた後に呼び出されます。この時点では、マウントされた DOM 要素にアクセスできます。
beforeUpdate: コンポーネントが更新される前、およびデータが強制的に更新される前に呼び出されます。
updated: コンポーネントの更新が完了した後に呼び出され、この時点でコンポーネント DOM が更新されています。
アクティブ化: キープアライブによってキャッシュされたコンポーネントがアクティブ化されるときに呼び出されます。
deactivated: キープアライブによってキャッシュされたコンポーネントが非アクティブ化されるときに呼び出されます。
beforeDestroy: コンポーネントが破棄される前に呼び出されますが、インスタンスはまだ使用可能です。
destroy: コンポーネントが破棄された後に呼び出されます。この時点で、インスタンスは完全に破棄されています。

複合 API のライフサイクルフック関数はオプション API のライフサイクルフック関数とほぼ同じですが、フック関数の名前が異なります。詳細は次のとおりです。

onBeforeMount: コンポーネントがマウントされる前に呼び出され、関連するレンダリング関数が初めて呼び出されます。
onMounted: コンポーネントがマウントされた後に呼び出され、この時点で、マウントされた DOM 要素にアクセスできます。
onBeforeUpdate: コンポーネントが更新される前、およびデータが強制的に更新される前に呼び出されます。
onUpdated: コンポーネントの更新が完了した後、コンポーネント DOM が更新されたときに呼び出されます。
onBeforeUnmount: コンポーネントが破棄される前に呼び出されますが、インスタンスはまだ使用可能です。
onUnmounted: コンポーネントが破棄された後に呼び出され、この時点でインスタンスは完全に破棄されています。

Piniaのデータをリセットする方法

Pinia がデータを変更する方法

Pinia が非同期操作を実行する方法

ピニアとビュークスの違い

Vue2.0とVue3.0の違いは何ですか?

セットアップパラメータを簡単に説明します

セットアップの戻り値の簡単な説明

シャローリアクティブとは

readonly とshallowReadonly とは何ですか?

toRef と toRefs の違いは何ですか?

結合アピレフとは何ですか

結合APIのrefとreactiveの違い

Object.defineProperty と Proxy の違いは何ですか

複合 API の計算されたプロパティ

結合された API フィルター

結合された API とは何ですか?

API-Watch の組み合わせについて簡単に説明してください

カスタムフックとは

Vue オプション API と結合 API のフォワード値は何ですか?

Vue オプション API と結合 API の逆価値転送とは何ですか?

Vue2 と vue3 の双方向データ バインディングの原則は異なります

v-if および v-for 優先順位

vue-router4 と vue-router3 の違いは何ですか

スロット、通常のスロット、名前付きスロット、およびスコープ付きスロットについて簡単に説明します。

Vue3 テレポートとは何ですか?

オプションAPI、複合APIのライフサイクルフック機能とは何ですか?

おすすめ

Vue2 と vue3 の双方向データバインディングの原則は異なります