Vue3 の落とし穴をすべて見たことがありますか?

現在、Vue3 は安定しており、多くのコードライブラリが Vue3 を使用し始めており、将来的には多くのプロジェクトが Vue3 に移行することは避けられません。この記事では、他の開発者に役立つことを願って、Vue3 を使用するときに遭遇した問題のいくつかを記録します。

1.リアクティブを使用して基本データ型をカプセル化する

従来の開発モデルでは、データ宣言は非常に簡単です。ただし、Vue には複数のレスポンシブ変数宣言メソッドがあり、全体的な使用規則は次のとおりです。

reactive を使用して、オブジェクト、配列、マップ、およびセットのデータ型をカプセル化します。

ref を使用して、文字列、数値、およびブール型をカプセル化します。

reactive を使用して基本データ型をカプセル化すると、警告が生成され、カプセル化された値はリアクティブオブジェクトになりません。

<script setup>
import {
    
     reactive } from "vue";
const count = reactive(0);
</script>

ただし、 ref を使用して Object や Array などのデータ型をカプセル化することができ、 reactive が内部で呼び出されます。

2.リアクティブオブジェクトを分解する

以下のコードでは、カウントがリアクティブオブジェクトにカプセル化されており、ボタンをクリックするとカウントが自動的に増加します。

<template>
  Counter: {
    
    {
    
     state.count }}
  <button @click="add">Increase</button>
 </template>


 <script>
 import {
    
     reactive } from "vue";
 export default {
    
    
  setup() {
    
    
   const state = reactive({
    
     count: 0 });


   function add() {
    
    
    state.count++;
   }

   return {
    
    
    state,
    add,
   };
  },
 };
 </script>

ES6 構造割り当てを使用して状態を構造化する必要がある場合は、次のコードを使用する必要があります。

<template>
  <div>Counter: {
    
    {
    
     count }}</div>
  <button @click="add">Increase</button>
</template>

<script>
import {
    
     reactive } from "vue";
export default {
    
    
  setup() {
    
    
    const state = reactive({
    
     count: 0 });

    function add() {
    
    
      state.count++;
    }

    return {
    
    
      ...state,
      add,
    };
  },
};
</script>

構造のコピーが完了したら、ボタンをクリックすると、次のような効果が得られます。

コードは比較的似ており、以前のパフォーマンスに基づいて、ロジックは正常に実行できます。しかし実際には、Vue のリアクティブトラッキングはプロパティを通じて取得されるため、リアクティブオブジェクトを分解することができず、参照接続が失われます。これは、リアクティブプロキシの制限の 1 つです。

3. .value の使用による混乱

Ref は値を受け入れ、リアクティブオブジェクトを返します。このオブジェクトは内部オブジェクトの .value プロパティでのみ使用できます。

const count = ref(0)

 console.log(count) // { value: 0 }
 console.log(count.value) // 0

 count.value++
 console.log(count.value) // 1

ただし、ref がテンプレートに適用されている場合、ref を解凍する必要はありません。つまり、.vue を使用する必要はありません。

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

const count = ref(0)

function increment() {
    
    
  count.value++
}
</script>

<template>
  <button @click="increment">
    {
    
    {
    
     count }} // 不需要调用.value
  </button>
</template>

解凍は第 1 レベルの属性に対してのみ機能し、次のコードは [object Object] を返すことに注意してください。

<script setup>
import {
    
     ref } from 'vue'
const object = {
    
     foo: ref(1) }
</script>
<template>
  {
    
    {
    
     object.foo + 1 }}  // [object Object]
</template>

.valueを正しく使用するには時間がかかり、初心者はそれを忘れてしまうことがあります。使用する場合は、適切なシナリオでのみ使用するように注意してください。

4.発行されたイベント

Vue のリリース以降、子コンポーネントは ems を介して親コンポーネントと通信できるようになり、イベントをリッスンするためのカスタムリスナーを追加するだけで済みます。

this.$emit('my-event')

<my-component @my-event="doSomething" />

Vue3 では、コンパイラマクロ defineEmits を使用してエミットを宣言する必要があります。

const emit = defineEmits(['my-event'])
 emit('my-event')
 </script>

セットアップ構文シュガーでは、defineEmits とdefineProps が自動的に導入されます。積極的な導入が必要な場合もあります。

<script setup>
const props = defineProps({
    
    
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

最後に、Vue3 ではイベントを宣言する必要があるため、.native 修飾子は不要になり、この修飾子は削除されました。

5. コンポーネントのオプションを宣言する

セットアップでは、次のコンポーネントオプション宣言はサポートされていません。

名前
継承属性
カスタムオプション

これらの属性を引き続き使用する必要がある場合は、次のように複数のスクリプトを宣言できます。

<script>
  export default {
    
    
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {
    
    }
  }
</script>

<script setup>
  // script setup logic
</script>

6.使用Reactivity Transform

Reactivity Transform は Vue3 のプレビュー属性ですが、多少議論の余地があり、デフォルトでは無効になっています。これは主に、コンポーネントの宣言方法を簡素化するために使用されます。このアイデアは、コンパイル時の変換を利用して ref を自動的に解凍し、.value の使用を回避することです。この機能は Vue3.3 から削除され、拡張パッケージとして提供されています。これは Vue の中核部分ではなく、現時点ではまだ多くのリスクがあるため、この点にあまり投資しないことをお勧めします。興味がある場合は、次の記事を参照してください: Reactivity Transform

7.非同期コンポーネントを定義する

非同期コンポーネントは、以前はメソッドで囲むことによって宣言されていました。

const asyncModal = () => import('./Modal.vue')

Vue3 では、defineAsyncComponent を使用して非同期コンポーネントを宣言する必要があります。

import {
    
     defineAsyncComponent } from 'vue'
 const asyncModal = defineAsyncComponent(() 
=> import('./Modal.vue'))

8.テンプレート内で不要なラッピング要素を使用する

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

Vue3 は複数のルート要素をサポートしており、外側の div 要素でラップする必要がなくなりました。

<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

9.ライフサイクル機能

すべてのコンポーネントのライフサイクル関数は、接頭辞 on を追加するか、名前を完全に変更することによって実装されます。次の図は、具体的な変更点を詳しく示しています。

10.製品ドキュメント

公式ドキュメントが更新され、API が補足および更新され、多くの貴重なコメント、ガイド、ベストプラクティスが含まれています。現在 Vue2 を使用している場合でも、新しいドキュメントを読むことで何か新しいことを学ぶことができます。

要約する

各フレームワークには学習曲線があり、Vue3 は Vue2 よりも急勾配であり、フレームワークの切り替えの間には一定の学習コストが発生します。ただし、Vue3 結合 API は、Vue2 オプション API よりも実際にシンプルで使いやすいです。使用中にご質問がある場合は、コミュニケーションのためにメッセージを残してください。

この記事は次の記事から翻訳したものです。

https://fadamakis.com/10-missing-to-avoid-when-starting-with-vue-3-1d1ced8552ae

拡張リンク:

Spring Boot フレームワークで Excel サーバーのインポートとエクスポートを実装する

プロジェクト実践：オンライン見積調達システム（React + SpreadJS + Echarts）

React + Springboot + Quartz、Excelレポート自動化を0から実現

Vue3 の落とし穴をすべて見たことがありますか?

おすすめ