Vue3 で避けるべき間違いは何ですか

Reactive を使用したプリミティブ値の宣言

データ宣言はこれまで非常に簡単でしたが、現在では使用できるヘルパー関数が多数あります。現在のルールは次のとおりです:

• reactive を使用して Object、Array、Map、Set

• # を宣言します。

  ##ref を使用して String、Number、Boolean を宣言します

プリミティブ値に

reactive を使用すると、警告、値はリアクティブ データにはなりません。

/* DOES NOT WORK AS EXPECTED */
<script setup>
import { reactive } from "vue";

const count = reactive(0);
</script>

逆説的ですが、別の方法も可能です。たとえば、

ref を使用して Array を宣言すると、内部で reactive が呼び出されます。

リアクティブ データの分解

count プロパティを持つリアクティブ オブジェクトと、count をインクリメントするボタンがあるとします。

<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>

上記のロジックは非常に単純で、期待どおりに動作しますが、JavaScript の構造化を利用して次のことを行うこともできます。

/* DOES NOT WORK AS EXPECTED */
<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 つです。

.value についての混乱

同様に、

ref の奇妙なパターンの使用には慣れるのが難しい場合があります。

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

const count = ref(0)

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

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

ただし、

ref はテンプレート ファイルで使用すると解凍されるため、.value は必要ありません。

<script setup>
import { ref } from &#39;vue&#39;

const count = ref(0)

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

<template>
  <button @click="increment">
    {{ count }} // no .value needed
  </button>
</template>

しかし、注意してください!アンラップはトップレベルのプロパティでのみ機能します。次のコード スニペットは

[object Object] を生成します。

// DON'T DO THIS
<script setup>
import { ref } from &#39;vue&#39;

const object = { foo: ref(1) }

</script>

<template>
  {{ object.foo + 1 }}  // [object Object]
</template>

.value を正しく使用するには時間がかかります。たまに使い方を忘れてしまうこともありますが、使う頻度はどんどん増えています。

イベントのトリガー

Vue の初期リリース以来、子コンポーネントは

emit を使用して親コンポーネントと通信できます。イベントをリッスンするカスタム イベント リスナーを追加するだけです。

// 子组件
this.$emit('my-event')

// 父组件
<my-component @my-event="doSomething" />

次に、

defineEmits を使用して emit を宣言する必要があります。

<script setup>
const emit = defineEmits([&#39;my-event&#39;])
emit(&#39;my-event&#39;)
</script>

もう 1 つ覚えておくべきことは、

defineEmits も defineProps もインポートする必要がないことです。これらは、script setup を使用するときに自動的に使用可能になります。

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

const emit = defineEmits([&#39;change&#39;, &#39;delete&#39;])
// setup code
</script>

最後に、イベントを宣言する必要があるため、

.native 修飾子を使用する必要はありません。実際、この修飾子は削除されています。

追加オプションを宣言する

Options API メソッドには、

script setup ではサポートされていないプロパティがいくつかあります。

• #名前

• inheritAttrs

プラグインまたはライブラリに必要なカスタム オプション
解決策は、

script setup

RFC で定義されているように、同じコンポーネント内に 2 つの異なるスクリプトをセットアップすることです。 <pre class="brush:js;">&lt;script&gt; export default { name: &amp;#39;CustomName&amp;#39;, inheritAttrs: false, customOptions: {} } &lt;/script&gt; &lt;script setup&gt; // script setup logic &lt;/script&gt;</pre>リアクティブ トランスフォームの使用

リアクティブ トランスフォームは、コンポーネントの宣言方法を簡素化することを目的とした、実験的ではありますが物議を醸している Vue 3 の機能です。このアイデアは、コンパイル時の変換を利用して、

ref

を自動的に解凍し、.value を廃止することです。しかし現在は廃止され、Vue 3.3 で削除される予定です。これはまだパッケージとして入手できますが、Vue コアの一部ではないため、時間を投資しないほうがよいでしょう。 非同期コンポーネントを定義する

以前は、非同期コンポーネントは関数でラップすることによって宣言されていました。

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

Vue 3 以降、非同期コンポーネントは

defineAsyncComponent

ヘルパー関数を使用して明示的に定義する必要があります。 <pre class="brush:js;">import { defineAsyncComponent } from &amp;#39;vue&amp;#39; const asyncModal = defineAsyncComponent(() =&gt; import(&amp;#39;./Modal.vue&amp;#39;))</pre>テンプレートでの冗長なラップされた要素の使用

Vue 2 では、コンポーネント テンプレートには単一のルート要素が必要であり、これによって不要なラップされた要素が発生する場合があります。

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

複数のルート要素がサポートされるようになったので、これは必要なくなりました。 ????

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

間違ったライフサイクルの使用

すべてのコンポーネントのライフサイクル イベントは、

on

プレフィックスを追加するか、名前を完全に変更することによって、名前が変更されました。以下のグラフですべての変化を確認できます。

以上がVue3 で避けるべき間違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。