Vue3 ファミリーのバケット開発における 15 の一般的な問題 (落とし穴を素早く回避するのに役立ちます)

この記事では、落とし穴や地雷原を回避できるように、Vue3 ファミリ バケットの開発における一般的な問題をいくつか紹介します。

私は最近 Vue3 を使い始めて 3 つのプロジェクトを完了しました。多くの問題に遭遇しました。今日は時間をかけてそれらを整理し、そのうちの 15 件を共有します。より一般的な問題. 基本的に、対応するドキュメントのアドレスが掲載されていますので、他のドキュメントをお読みください ~ 完成した 3 つのプロジェクトは、基本的に Vue3 (セットアップ スクリプト モード) Family Bucket を使用して開発されているため、主にいくつかの側面で要約されています:

• Vue3
• Vite
• VueRouter
• Pinia
• ElementPlus

(学習ビデオ共有: vue ビデオチュートリアル )

1. Vue3

1. Vue2.x および Vue3.x

のライフサイクル メソッドの変更

ドキュメント アドレス: https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html

Vue2.x および Vue3.x のライフ サイクルメソッドの変更は非常に大きいので、最初に見てみましょう:

現在、Vue3.x は引き続き Vue2.x のライフサイクルをサポートしていますが、メソッドとメソッドを混在させることはお勧めできません。ライフサイクルの初期段階では 2.x を使用できますが、後で 3.x ライフサイクル開発を使用してみてください。

私は script-srtup モードを使用しているため、Vue3.x のライフサイクル機能を直接使用しています。

// A.vue\
<script setup>\
import { ref, onMounted } from "vue";\
let count = ref<number>(0);\
\
onMounted(() => {\
count.value = 1;\
})\
</script>

各フックの実行タイミングは、次のようにすることもできます。ドキュメントを参照してください: v3.cn.vuejs.org/guide/insta…

2. スクリプト セットアップ モードの親コンポーネントは、子のデータを取得します。コンポーネント

ドキュメントアドレス: v3.cn.vuejs.org/api/sfc-scr…

ここでは主にその方法を紹介します。親コンポーネントは子コンポーネントを取得します。コンポーネント内で定義された変数については、親子コンポーネント通信に関して、詳細についてはドキュメントを参照してください: v3.cn.vuejs.org/guide/compo…

グローバル コンパイルを使用できます。ツール マクロの defineExpose マクロは、子コンポーネントのパラメーターを親コンポーネントに公開し、{key: vlaue}# を使用します。 ## メソッドをパラメータとして、親コンポーネントがテンプレートを渡します ref メソッドを使用してサブコンポーネントのインスタンスを取得すると、対応する値を取得できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 子组件\ &lt;script setup&gt;\ let name = ref(&quot;pingan8787&quot;)\ defineExpose({ name }); // 显式暴露的数据，父组件才可以获取\ &lt;/script&gt;\ \ // 父组件\ &lt;Chlid ref=&quot;child&quot;&gt;&lt;/Chlid&gt;\ &lt;script setup&gt;\ let child = ref(null)\ child.value.name //获取子组件中 name 的值为 pingan8787\ &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

Note

:

グローバル コンパイラ マクロはスクリプトでのみ使用できます - セットアップ モードで使用されます。
• スクリプト セットアップ モードでは、マクロは
import## を使用せずに直接使用できます。 #;
• script-setup モードでは、defineProps、defineEmits、defineExpose、withDefaults を含む合計 4 つのマクロが提供されます。
3. プロパティのデフォルト値を提供します

defineProps ドキュメント:

v3.cn.vuejs.org/api/sfc -scr …

ドキュメント:

v3.cn.vuejs.org/api/sfc-scr…スクリプト セットアップ モードで提供される 4 つの

グローバル コンパイルデバイス マクロ

はまだ詳しく紹介されていませんが、このセクションでは

defineProps と withDefaults を紹介します。 defineProps マクロは、次のようにコンポーネントの入力パラメータを定義するために使用できます。

<script setup>\
let props = defineProps<{\
schema: AttrsValueObject;\
modelValue: any;\
}>();\
</script>

props# の

schema

と # のみを定義します。 ## ここに属性 ##modelValue2 つの属性タイプ、defineProps この宣言の欠点は、props のデフォルト値を設定する方法が提供されていないことです。 実際には、withDefaults マクロを使用してこれを実現できます。

<script setup>\
let props = withDefaults(\
defineProps<{\
schema: AttrsValueObject;\
modelValue: any;\
}>(),\
{\
schema: [],\
modelValue: &#39;&#39;\
}\
);\
</script>

withDefaults 補助関数は、デフォルト値の型チェックを提供し、返された props の型が宣言されたデフォルト value 属性のオプションのフラグ。

4. グローバル カスタム パラメーターの構成

ドキュメント アドレス: v3.cn.vuejs.org/guide/migra…

在 Vue2.x 中我们可以通过 Vue.prototype 添加全局属性 property。但是在 Vue3.x 中需要将 Vue.prototype 替换为 config.globalProperties 配置：

// Vue2.x\
Vue.prototype.$api = axios;\
Vue.prototype.$eventBus = eventBus;\
\
// Vue3.x\
const app = createApp({})\
app.config.globalProperties.$api = axios;\
app.config.globalProperties.$eventBus = eventBus;

使用时需要先通过 vue 提供的 getCurrentInstance方法获取实例对象：

5. v-model 变化

文档地址：v3.cn.vuejs.org/guide/migra…

当我们在使用 v-model指令的时候，实际上 v-bind 和 v-on 组合的简写，Vue2.x 和 Vue3.x 又存在差异。

Vue2.x

在子组件中，如果要对某一个属性进行双向数据绑定，只要通过 this.$emit('update:myPropName', newValue) 就能更新其 v-model绑定的值。

• Vue3.x

script-setup模式下就不能使用 this.$emit去派发更新事件，毕竟没有 this，这时候需要使用前面有介绍到的 defineProps、defineEmits 两个宏来实现：

父组件使用的时候就很简单：

6. 开发环境报错不好排查

文档地址：v3.cn.vuejs.org/api/applica…

Vue3.x 对于一些开发过程中的异常，做了更友好的提示警告，比如下面这个提示：

这样能够更清楚的告知异常的出处，可以看出大概是 <elinput>这边的问题，但还不够清楚。这时候就可以添加 Vue3.x 提供的<strong>全局异常处理器</strong>，更清晰的<strong>输出错误内容和调用栈信息，代码如下</strong>：</elinput>

这时候就能看到输出内容如下：

一下子就清楚很多。当然，该配置项也可以用来集成错误追踪服务 Sentry 和 Bugsnag。推荐阅读：Vue3 如何实现全局异常处理？

7. 观察 ref 的数据不直观，不方便

当我们在控制台输出 ref声明的变量时。

会看到控制台输出了一个 RefImpl对象：

看起来很不直观。我们都知道，要获取和修改 ref声明的变量的值，需要通过 .value来获取，所以你也可以：

这里还有另一种方式，就是在控制台的设置面板中开启 「Enable custom formatters」选项。

image.png

image.png

这时候你会发现，控制台输出的 ref的格式发生变化了：

更加清晰直观了。

##このメソッドは「Vue.js の設計と実装」で発見しましたが、ドキュメントには関連する紹介が見つかりませんでした。見つけた人はぜひお知らせください~

2. Vite

1. Vite 動的インポートの使用に関する問題

ドキュメント アドレス:

cn.vitejs。 dev/ guide/featu…

webpack を使用する学生は、webpack では

require.context:

# を通じてファイルを動的にインポートできることを知っておく必要があります。

##Vite では、次の 2 つの方法を使用してファイルを動的にインポートできます:

#import.meta.glob

• このメソッドで一致するファイルは、デフォルトでは
遅延読み込み

であり、

dynamic import を通じて実装されます。ビルド時に、独立したチャンクを 分離します。これは asynchronous import は、非同期操作が必要な Promise を返します。使用方法は次のとおりです。

##import.meta.globEager

• このメソッドは すべてのモジュールを直接インポートしています
、および

同期的にインポートしています

。返された結果は、for メソッドを通じて直接操作できます。 ... ループの使用法は次のとおりです。

Vue3 コンポーネントの非同期インポートのみを使用する場合は、Vue3 のdefineAsyncComponent API を直接使用して、ロード:

2. Vite 設定エイリアス タイプ エイリアス

ドキュメント アドレス: cn.vitejs.dev /config/#res…

プロジェクトがより複雑な場合、一部のコードを簡略化するためにエイリアス パスのエイリアスを構成することが必要になることがよくあります。

Vite の設定も非常に簡単で、

vite.config.ts

resolve.alias

: # で設定するだけです。 ##TypeScript を使用している場合、エディターはパスが存在しないという警告を表示します⚠️。この時点で、

tsconfig.json に

compilerOptions.paths の構成を追加できます。

:

3. Vite はグローバル scss を設定します

ドキュメント アドレス: cn.vitejs。 dev/config/#css…

いつ scss で設定されたテーマ変数 ($primary など)、mixin メソッド (

など) を使用する必要がある場合@mixin 行

) など:

scss テーマ設定ファイルは

vite.config.ts

# で設定できます。 ##css.preprocessorOptions.scss.AdditionalData:

scss 構成ファイルを使用したくない場合は、scss コードを直接記述することもできます。

#3. VueRouter

1. スクリプト セットアップ モードでルーティング パラメータを取得する

ドキュメント アドレス:

router.vuejs.org/zh/guide/ad…

#script-setup

モードなので、# はありません##this

は使用できますが、ルーティング パラメータを取得してルートをジャンプするために this.$router または

this. $route

を直接渡すことはできません。ルーティング パラメータを取得する必要がある場合は、次のように

vue-router が提供する useRoute メソッドを使用してパラメータを取得できます。<p> ルート ジャンプを行う場合は、<code>useRouter メソッドの戻り値を使用してジャンプできます。

4 . Pinia

1. ストアの構造化された変数は変更後に更新されません

ドキュメント アドレス: pinia.vuejs.org/core- concep…

ストア変数を分解してからストア上の変数の値を変更すると、ビューは更新されません:

現時点では、ボタンをクリックして changeName イベントをトリガーしても、ビュー上の name は変更されていません。これは、ストアが反応性のオブジェクトであり、構造が破壊されるとその反応性が失われるためです。したがって、直接分解することはできません。この場合、Ponia が提供する storeToRefs ツール メソッドを使用できます。これも非常に簡単に使用できます。storeToRefs を通じて、分解する必要があるオブジェクトをラップするだけです。

この方法で値を変更すると、ビューはすぐに更新されます。

2. Pinia がデータのステータスを変更する方法

公式 Web サイトの計画によると、現時点では 3 つの方法でデータを変更できます:

• store.属性名割り当てを通じて単一データのステータスを変更する;

このメソッドは前のセクションで使用されています:

• $patch メソッドを使用して複数のデータのステータスを変更します。

ドキュメントアドレス: pinia .vuejs.org/api/interfa…

複数のデータのステータスを同時に変更する必要がある場合、依然として

上記の記述に問題はありませんが、Pinia の公式 Web サイトには、$patch を使用すると次のように記述されています。より効率的でパフォーマンスが向上するため、複数のデータを変更する場合は、$patch を使用することをお勧めします。使用方法も非常に簡単です:

• action メソッドを使用して複数のストロークを変更します。データのステータス;

次のメソッドを定義することもできます。更新するストア内のアクション:

使用時:

これら 3 つのメソッドは、ストアのデータ ステータスを更新できます。ピニアにあるお店。

5. Element Plus

1. element-plus がパッケージ化される場合の @charset 警告

新しくインストールされた element-Plus開発段階では正常であり、警告は表示されませんが、パッケージ化プロセス中に、コンソールに次の警告内容が出力されます:

公式で読みました。長年の問題: github.com/element-plu…

vite.config.ts で charset: false を設定してみてください、結果も無効です:

公式問題で最終的に解決策が見つかりました:

2 .中国語言語パックの構成

ドキュメントのアドレス: element-plus.gitee.io/zh-CN/guide…

element-plus のデフォルトのコンポーネントは英語です:

中国語言語パックを導入し、それを ElementPlus 構成に追加することで、中国語に切り替えることができます。

現時点では、コンポーネントのテキストがElementPlusでは中国語になります。

概要

上記は、最近の 3 つのプロジェクトの開始から実際の Vue3 ファミリー バケットに至るまでの、落とし穴回避の経験をまとめたものです。それらの多くはドキュメントで紹介されていますが、最初はよくわかりません。また、皆さんにもドキュメントをもっと読んでいただければ幸いです~

Vue3 スクリプト セットアップ モードは、作成すればするほど人気が​​高まります。

この記事の内容について質問がある場合は、どなたでもコメントして議論してください。

[推奨関連ビデオ チュートリアル: vuejs エントリ チュートリアル、Web フロントエンド エントリ]