Compétences en développement Vue3+TS+Vite : comment créer une architecture d'application maintenable et évolutive

在上面的代码中，我们使用ref来定义响应式的数据message，并在模板中使用它。

2. 组件通信

在大型应用中，组件之间的通信是一个重要的问题。Vue3提供了provide/inject和emits两种方式来实现组件之间的通信。

provide/inject可以在祖先组件中提供数据，并在后代组件中使用。例如：

// 祖先组件  // 后代组件 

在上述代码中，我们通过provide提供了一个名为userData的数据，然后在后代组件中通过inject来使用。

emits用于父子组件之间的通信。例如：

// 子组件   // 父组件  

在上面的代码中，子组件通过emit来触发一个自定义事件，并将数据传递给父组件。父组件通过.sync修饰符来实现双向绑定。

三、状态管理

在大型应用中，状态管理非常重要。Vue3提供了一个新的状态管理库@vue/reactivity，它可以帮助我们更好地管理应用的状态。

我们可以将状态管理库作为一个单独的模块来使用，例如创建一个store文件夹，然后在其中创建一个index.ts文件，编写以下代码：

import { reactive } from 'vue'; export interface State { count: number; } const state = reactive({ count: 0, }); export function increment() { state.count++; }

然后，我们可以在组件中使用这个状态和方法：

在这个例子中，我们将状态和方法存储在独立的文件中，以便在需要的时候进行访问。

四、路由管理

对于前端应用来说，路由管理也是非常重要的一部分。在Vue3中，我们可以使用vue-router来管理路由。

首先，我们需要安装vue-router，在终端中输入以下命令：

npm install vue-router@4

然后，在src目录下创建一个router文件夹，并在其中创建一个index.ts文件，编写以下代码：

import { createRouter, createWebHistory } from 'vue-router'; const routes = [ { path: '/', name: 'Home', component: () => import('../views/Home.vue'), }, { path: '/about', name: 'About', component: () => import('../views/About.vue'), }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router;

然后，在main.ts中引入router并使用它：

import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app');

现在，我们可以在组件中使用路由了：

在这个例子中，我们通过来生成导航链接，并通过rrreee

Communication entre composants

Dans les grandes applications, la communication entre les composants est un problème important. Vue3 fournit deux méthodes :provide/injectetemispour établir la communication entre les composants.

provide/injectpeut fournir des données dans les composants ancêtres et les utiliser dans les composants descendants. Par exemple :
• rrreee
Dans le code ci-dessus, nous fournissons une donnée nommée userDatavia provide, puis passons injectdans le composant descendant à utiliser.
• emissont utilisés pour la communication entre les composants parent et enfant. Par exemple :
• rrreee
Dans le code ci-dessus, le composant enfant déclenche un événement personnalisé via emitet transmet les données au composant parent. Le composant parent implémente la liaison bidirectionnelle via le modificateur .sync.