序文
Vue3 はデータ駆動型のプログレッシブ JavaScript フレームワークであり、その設計哲学にはシンプルさ、柔軟性、および効率性が含まれます。Vue2 と比較すると、レスポンシブ システムの書き換え、仮想 DOM の改良、Composition API の導入など、Vue3 のアーキテクチャ設計は大きく異なります。Vue3 のパフォーマンスは大幅に改善され、Tree-Shaking や Teleport コンポーネントなど、より多くの最適化オプションも提供されます。
同時に、Vue3 は TypeScript をより適切にサポートし、いくつかの新しい API とグローバル命令を導入して、開発をより便利で柔軟にしました。Vue3 の出現は、エンタープライズ レベルの開発者とフロントエンド開発者の両方にとって、一定の重要性と価値があります。
1.セットアップ機能とは？
Vue3 では、setup 関数はコンポーネント ロジックを記述するための新しい機能です。これは、Vue2 の一部の複雑なコンポーネントの保守と理解が困難であるという問題を解決するために、Composition API の一部です。Vue3 のセットアップ機能を利用することで、コードが整理され、コードの可読性や保守性が向上します。
setup 関数はコンポーネントがインスタンス化されるときに実行され、この関数は beforeCreate フック関数の前に実行されます。setup 関数では、ref や Reactive などの API を使用してレスポンシブ データを宣言できます。また、computed や watch などの API を使用して、計算されたプロパティを定義し、レスポンシブ データの変更を監視できます。
さらに、テンプレートに公開する必要があるデータまたはメソッドも setup 関数で定義でき、これらのデータおよびメソッドはテンプレートで直接使用できます。
setup 関数はコンポーネントがインスタンス化される前に実行され、すべての応答データはコンポーネントが作成される前に作成されるため、setup 関数ではこれにアクセスできないことに注意してください。また、props もレスポンシブ データですが、setup 関数で props に直接アクセスすることはできず、パラメーターを介して渡す必要があります。
2.ステップを使用する
<template>
<div>
<p>count: {
{ count }}</p>
<el-button type="danger" @click="increment">危险按钮</el-button>
<el-button type="danger" @click="fetchData">测试axios</el-button>
</div>
</template>
<script>
// 在Vue3中，ref是一个响应式数据类型，用于声明一个普通类型的数据，
// 并且可以在模板中以响应式的方式使用。
// ref将基础类型的数据（如数字、字符串等）
// 转换为一个带有.value属性的响应式对象，在更新数据时需要修改.value属性的值。
import { ref } from 'vue';
// 根据实际路径引入 Axios 实例
import axios from '@/utils/axios';
export default {
name: "TestPage",
/*vue2 使用data+created
* vue3可以 使用setup等价于data+created
* */
setup() {
// 声明响应式数据
const count = ref(0);
// 定义需要暴露给模板的方法
const increment = () => {
count.value++;
};
let fetchData=()=>{
axios.get('/data')
.then(response => {
// 处理响应数据
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error(error);
});
};
// 返回一个包含需要暴露给模板的数据或方法的对象
return {
count,
increment,
fetchData,
};
}
}
</script>
<style scoped>
</style>3. vue3 中国語ドキュメントと vue3 のコンポーネント ライブラリ
中国語ドキュメントの紹介| Vue.js
コンポーネント ライブラリVue3 用マテリアル スタイル モバイル コンポーネント ライブラリ
要約する
追加予定