Vue 3 的组件式开发（1）

1 引言

1.1 为什么需要组件化开发

前端需要组件化开发的原因主要有以下几点：

1. 提高开发效率：

   • 组件化开发允许开发者将复杂的页面拆分成多个独立、可复用的组件。
   • 每个组件可以独立开发、测试和维护，从而减少了代码的重复，提高了开发速度。

2. 增强代码可维护性：

   • 组件化使得代码结构更加清晰，每个组件都有明确的职责和边界。
   • 当需要修改或更新功能时，只需关注相关的组件，降低了代码的耦合度和复杂度。

3. 促进团队协作：

   • 组件化开发支持多人并行开发，不同的开发者可以专注于不同的组件。
   • 通过版本控制和组件库管理，团队成员可以方便地共享和更新组件，促进团队协作。

4. 提升用户体验：

   • 组件化使得界面更加模块化，可以更容易地实现动态加载和按需渲染。
   • 这有助于提升页面的加载速度和响应性能，从而改善用户体验。

5. 便于复用和扩展：

   • 组件化使得代码更加灵活和可扩展，新的功能可以通过添加新的组件或修改现有组件来实现。
   • 组件的复用性也降低了开发成本，因为已经开发好的组件可以在不同的项目中重复使用。

6. 支持跨平台开发：

   • 在现代前端开发中，组件化技术（如React Native、Flutter等）也支持跨平台开发。
   • 这意味着开发者可以使用相同的组件库来构建适用于不同平台（如Web、iOS、Android）的应用程序。

7. 便于测试和调试：

   • 组件化开发使得测试更加容易，因为每个组件都可以独立地进行单元测试。
   • 这有助于快速定位和解决问题，提高代码的健壮性和稳定性。

1.2 Vue 3 组件化开发的优势

Vue 3 组件化开发的优势主要体现在以下几个方面：

一、性能提升与优化

1. 更快的渲染速度：Vue 3 在底层的实现上进行了优化，如使用静态标记和树摇优化等手段来减小打包体积，从而提高了页面加载速度和渲染性能。
2. 更高效的响应式系统：Vue 3 采用了基于 ES6 的 Proxy 实现响应式系统，相比 Vue 2 中的 Object.defineProperty，Proxy 更加灵活和强大，能够捕获更多的操作，并且性能更好。这使得 Vue 3 能够更准确地追踪数据的变化，实现更高效的数据更新和渲染。

二、更好的代码组织和复用性

1. Composition API：Vue 3 引入了 Composition API，允许开发者将逻辑按照功能或者相关性进行组织，而不是按照选项的不同部分（如 data、methods、computed 等）来分散代码。这种方式使得组件代码更加简洁、直观和可复用。
2. 模块化开发：组件化开发将页面拆分成多个独立的模块，每个模块都是一个独立的组件，具有自己的功能和样式。这使得代码更加模块化，易于理解和维护。
3. 高复用性：通过组件化开发，开发者可以创建可复用的组件库，从而在不同的项目中重复使用这些组件，降低了代码的重复编写，提高了开发效率。

三、更强大的工具链支持

1. 完整的工具链：Vue 3 提供了完整的工具链支持，包括 Vue CLI、Vue Devtools、Vetur 等。这些工具使得 Vue 3 的开发、调试和发布更加便捷。
2. TypeScript 支持：Vue 3 对 TypeScript 的支持更加完善，提供了更好的类型推断和错误检查，支持更灵活的类型定义和泛型推断。这使得开发者能够编写更加类型安全的 Vue 应用程序。

四、更灵活的状态管理

1. setup 函数：Vue 3 引入了 setup 函数来统一组件的逻辑处理和状态管理。开发者可以在 setup 函数中使用 ref、reactive 等 API 来定义响应式数据，使用 computed 和 watch 等 API 来定义计算属性和侦听器。这使得组件的状态管理更加灵活和直观。
2. provide/inject API：Vue 3 还提供了 provide/inject API，允许组件之间共享状态，而不需要通过 props 传递。这进一步提高了组件的复用性和可维护性。

五、更丰富的组件特性

1. Fragment 组件：Vue 3 引入了 Fragment 组件，允许开发者在模板中返回多个根节点，而不需要包裹在一个额外的父节点中。这样可以更自然地书写模板，减少不必要的 HTML 标签。
2. Teleport 组件：Teleport 组件允许开发者将组件的内容渲染到 DOM 结构的其他位置，而不需要改变组件的父子关系。这对于创建模态框、弹出菜单等需要在 DOM 结构中动态改变位置的组件非常有用。
3. Suspense 组件：Suspense 组件用于处理异步操作和动态组件的加载状态。开发者可以使用 Suspense 组件来优雅地处理数据加载、代码分割等异步操作，同时提供了自定义加载状态和错误处理的能力。

综上所述，Vue 3 组件化开发在性能提升、代码组织和复用性、工具链支持、状态管理以及组件特性等方面都表现出显著的优势。这些优势使得 Vue 3 在开发过程中更加高效和灵活，也更加符合现代前端开发的需求。

2 Vue 3 组件基础

2.1 组件的基本结构

Vue 3 组件的基本结构主要由三部分组成，即模板（Template）、逻辑（Script）、样式（Styles）。以下是关于Vue 3组件基本结构的详细解释：

一、模板（Template）

模板用来定义组件的HTML结构。在Vue 3中，模板通常写在<template>标签内。模板中可以包含HTML元素、指令、插值表达式等。例如：

<template><div class="my-component"><h1>{{ title }}</h1><button @click="handleClick">点击我</button></div>
</template>

在这个例子中，模板定义了一个包含标题和按钮的组件。

二、逻辑（Script）

逻辑部分负责组件的JavaScript逻辑和数据等。在Vue 3中，逻辑通常写在<script>标签内，并且可以使用setup语法来组织代码。逻辑部分可以定义组件的数据、方法、生命周期钩子等。例如：

<script setup>
import { ref } from 'vue';// 定义数据
const title = ref('我的组件');// 定义方法
function handleClick() {alert('按钮被点击了！');
}
</script>

在这个例子中，逻辑部分定义了一个名为title的响应式数据和一个名为handleClick的方法。

三、样式（Styles）

样式部分用于定义组件的CSS样式。在Vue 3中，样式通常写在<style>标签内，并且可以使用scoped属性来确保样式只作用于当前组件。例如：

<style scoped>
.my-component {border: 1px solid #ccc;padding: 10px;
}button {background-color: #42b983;color: white;border: none;padding: 10px 20px;cursor: pointer;
}
</style>

在这个例子中，样式部分定义了组件的边框、内边距以及按钮的背景色、文字颜色等样式。

四、组件注册与使用

在Vue 3中，组件需要先注册才能使用。注册组件有两种方式：全局注册和局部注册。

• 全局注册：通过Vue.component()方法或app.component()方法（在Vue 3的创建应用实例后）可以将组件注册为全局组件，这样在任何模板中都可以使用这个组件。
• 局部注册：在父组件的<script>部分中，通过components选项可以将组件注册为局部组件，这样只有在这个父组件的模板中才能使用这个子组件。

五、示例

以下是一个完整的Vue 3组件示例：

<template><div class="my-component"><h1>{{ title }}</h1><button @click="handleClick">点击我</button></div>
</template><script setup>
import { ref } from 'vue';const title = ref('我的组件');function handleClick() {alert('按钮被点击了！');
}
</script><style scoped>
.my-component {border: 1px solid #ccc;padding: 10px;
}button {background-color: #42b983;color: white;border: none;padding: 10px 20px;cursor: pointer;
}
</style>

这个示例展示了如何定义一个包含模板、逻辑和样式的Vue 3组件，并展示了如何在模板中使用插值表达式和指令来绑定数据和事件。

2.2 组件的定义与注册

2.2.1 全局注册

Vue 3 组件的全局注册是 Vue 框架中一个重要的功能，它允许开发者在整个 Vue 应用程序中全局地使用某个组件，而无需在每个需要使用该组件的页面中单独引入。以下是对 Vue 3 组件全局注册的详细讲解：

一、全局注册的基本步骤

1. 定义组件：
   首先，需要定义一个 Vue 组件。这通常包括一个模板（template）、脚本（script）和样式（style）部分。例如，定义一个名为 MyComponent 的组件：

   <!-- MyComponent.vue -->
   <template><div><h1>Hello, MyComponent!</h1></div>
   </template><script>
   export default {name: 'MyComponent',// 组件的其他选项...
   }
   </script><style scoped>
   /* 组件的样式... */
   </style>
   

2. 引入组件：
   在 Vue 应用的主入口文件（通常是 main.js 或 main.ts）中，引入刚刚定义的组件。

   import { createApp } from 'vue';
   import App from './App.vue';
   import MyComponent from './components/MyComponent.vue';
   

3. 全局注册组件：
   使用 createApp 方法创建 Vue 应用实例后，通过调用实例的 component 方法来全局注册组件。

   const app = createApp(App);
   app.component('MyComponent', MyComponent);
   

   这里，'MyComponent' 是全局注册的组件名（可以是自定义的），MyComponent 是组件的实例。

4. 挂载应用：
   最后，调用应用实例的 mount 方法，将应用挂载到 DOM 元素上。

   app.mount('#app');
   

5. 使用全局组件：
   现在，在任何 Vue 组件或页面的模板中，我们都可以直接通过 标签来使用这个按钮组件，而无需再次引入和注册：

   <!-- SomeOtherComponent.vue -->  <template>  <div>  <h1>Welcome to SomeOtherComponent</h1>  <MyComponent />  </div>  </template>  <script>  // 注意：这里我们不需要再次引入和注册 MyComponent 组件  export default {  name: 'SomeOtherComponent'  }  </script>
   

二、全局注册的优势

1. 简化代码：全局注册后，在任何需要使用该组件的页面中，都可以直接通过标签名来使用，而无需再次引入和注册。
2. 提高复用性：全局注册的组件可以在整个 Vue 应用中复用，避免了代码的重复编写。
3. 便于管理：对于大型项目，可以通过创建专门的文件（如 components/index.js）来集中管理全局注册的组件，使得代码更加清晰和易于维护。

三、批量全局注册组件

对于包含多个全局组件的大型应用，可以创建一个函数来批量注册这些组件。例如：

1. 创建 components/index.js 文件：

   import MyComponent from './MyComponent.vue';
   import AnotherComponent from './AnotherComponent.vue';const components = {MyComponent,AnotherComponent// 其他组件...
   };export function registerGlobalComponents(app) {Object.keys(components).forEach(key => {app.component(key, components[key]);});
   }
   

2. 在 main.js 中调用该函数：

   import { createApp } from 'vue';
   import App from './App.vue';
   import { registerGlobalComponents } from './components/index';const app = createApp(App);
   registerGlobalComponents(app);
   app.mount('#app');
   

四、注意事项

1. 命名冲突：全局注册的组件名应该唯一，以避免命名冲突。
2. 性能考虑：虽然全局注册组件很方便，但如果注册了太多不必要的全局组件，可能会增加应用的体积和加载时间。因此，应该根据实际需求来选择是否全局注册某个组件。
3. 类型安全：在 TypeScript 项目中，全局注册的组件可以通过明确的类型进行注册，以增强代码的可维护性和类型安全。

2.2.2 局部注册

Vue 3 组件的局部注册是一种将组件限制在特定作用域内使用的方法。与全局注册不同，局部注册的组件只能在注册它的父组件及其子组件中使用，无法在其他组件中直接使用。这种方式有助于减少全局作用域中的组件数量，降低应用的整体体积，并提高代码的模块化和可维护性。以下是对 Vue 3 组件局部注册的详细讲解：

一、局部注册的基本步骤

1. 定义组件：
   首先，需要定义一个 Vue 组件。这通常包括一个模板（template）、脚本（script）和样式（style）部分。例如，定义一个名为 LocalComponent 的组件：

   <!-- LocalComponent.vue -->
   <template><div><h2>This is a local component.</h2></div>
   </template><script>
   export default {name: 'LocalComponent',// 组件的其他选项...
   }
   </script><style scoped>
   /* 组件的样式... */
   </style>
   

2. 引入组件：
   在需要使用该组件的父组件中，通过 import 语句引入该组件。

   <script>
   import LocalComponent from './components/LocalComponent.vue';export default {// 父组件的其他选项...
   }
   </script>
   

3. 局部注册组件：
   在父组件的 components 选项中注册该组件。注册后，该组件就可以在父组件的模板中通过标签名来使用了。

   <script>
   import LocalComponent from './components/LocalComponent.vue';export default {components: {'local-component': LocalComponent},// 父组件的其他选项...
   }
   </script>
   

   注意，在 components 选项中，属性名（如 'local-component'）是自定义元素名，用于在模板中引用该组件；属性值（如 LocalComponent）是组件的实例或配置对象。

4. 使用组件：
   在父组件的模板中，通过标签名来使用局部注册的组件。

   <template><div><h1>Parent Component</h1><local-component /></div>
   </template>
   

二、局部注册的优势

1. 减少全局作用域污染：局部注册的组件不会污染全局作用域，避免了全局组件名冲突的问题。
2. 降低应用体积：由于局部注册的组件只会在需要使用它们的组件中加载，因此可以降低应用的整体体积。
3. 提高代码可维护性：局部注册的组件与父组件之间的依赖关系更加明确，有助于代码的模块化和可维护性。

三、注意事项

1. 命名规范：建议遵循 Vue 的命名规范，使用 kebab-case（小写字母加连字符）来命名组件。虽然 PascalCase（大写驼峰命名）在某些情况下也可以使用，但在 DOM 模板中，kebab-case 是唯一有效的命名方式。
2. 局部注册范围：局部注册的组件只能在注册它的父组件及其子组件中使用。如果尝试在其他组件中使用该组件，Vue 会报错并提示该组件未注册。
3. 组合式 API：在 Vue 3 中，还可以使用组合式 API（Composition API）来注册和使用组件。这种方式提供了更灵活的方式来组织组件逻辑和状态管理。

四、例子

以下是一个完整的例子，展示了如何在 Vue 3 中进行组件的局部注册和使用：

<!-- ParentComponent.vue -->
<template><div><h1>Parent Component</h1><local-component /></div>
</template><script>
import LocalComponent from './components/LocalComponent.vue';export default {components: {'local-component': LocalComponent},// 父组件的其他选项...
}
</script>

<!-- LocalComponent.vue -->
<template><div><h2>This is a local component.</h2></div>
</template><script>
export default {name: 'LocalComponent',// 组件的其他选项...
}
</script>

在这个例子中，LocalComponent 是一个局部注册的组件，它只能在 ParentComponent 及其子组件中使用。通过在 ParentComponent 的 components 选项中注册 LocalComponent，我们可以在 ParentComponent 的模板中通过 <local-component /> 标签来使用它。

2.3 父子组件通信

Vue 3中父子组件的通信是组件间交互的核心部分，它允许数据和方法在父子组件之间传递和调用。以下是对Vue 3父子组件通信的详细讲解：

2.3.1 父组件向子组件传参

1. 父组件传递参数：

父组件通过属性绑定的方式（使用:或v-bind:前缀）将参数传递给子组件。
例如，在父组件的模板中，可以这样传递参数给子组件<ChildComponent :param="parentParam"/>，其中param是子组件中定义的属性名，parentParam是父组件中定义的参数。

2. 子组件接收参数：

子组件通过defineProps方法接收父组件传递过来的参数。defineProps方法接收一个对象，对象的键是子组件中定义的属性名，值是对应的类型或默认值等配置。
例如，在子组件中可以这样接收参数const props = defineProps({ param: { type: String, default: '' } });。

具体示例如下：

父组件 (ParentComponent.vue)

<template><div><h1>我是父组件</h1><!-- 通过属性绑定将message传递给子组件 --><ChildComponent :message="parentMessage" /></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue'; // 引入子组件// 定义父组件的数据
const parentMessage = ref('Hello from Parent!');
</script><style scoped>
/* 父组件的样式 */
</style>

子组件 (ChildComponent.vue)

<template><div><h2>我是子组件</h2><!-- 使用插值表达式显示从父组件传递过来的message --><p>{{ message }}</p></div>
</template><script setup>
import { defineProps } from 'vue';// 定义子组件接收的props
const props = defineProps({message: {type: String, // 指定类型为Stringrequired: true, // 标记为必传},
});
</script><style scoped>
/* 子组件的样式 */
</style>

在这个样例中，父组件ParentComponent.vue定义了一个名为parentMessage的响应式数据，并通过属性绑定的方式（使用:前缀）将其传递给子组件ChildComponent.vue。子组件通过defineProps方法接收这个名为message的prop，并在模板中使用插值表达式{{ message }}来显示这个值。

当运行这个Vue 3应用程序时，就可以在页面上看到父组件和子组件的标题，以及子组件中显示的从父组件传递过来的消息“Hello from Parent!”。

2.3.2 子组件向父组件传参（事件触发）

1. 子组件发射事件：
   子组件通过defineEmits方法定义可以发射的事件。
   defineEmits方法接收一个数组，数组中的元素是事件名（可以使用字符串或字符串数组的形式）。
   子组件通过emit方法发射事件，并可以传递参数给父组件。
   例如，在子组件中可以这样定义和发射事件const emit = defineEmits(['update']); emit('update', newValue);。

2. 父组件监听事件：
   父组件在模板中通过@或v-on:前缀监听子组件发射的事件。
   当子组件发射事件时，父组件中对应的事件处理函数会被调用，并接收到子组件传递过来的参数。
   例如，在父组件的模板中可以这样监听事件<ChildComponent @update="handleUpdate"/>，并在父组件的脚本部分定义handleUpdate方法。

具体示例如下：

子组件 (ChildComponent.vue)

<template><div><h2>我是子组件</h2><!-- 一个按钮，点击时触发向父组件发送事件 --><button @click="sendUpdate">发送更新到父组件</button></div>
</template><script setup>
import { defineEmits } from 'vue';// 定义子组件可以发射的事件
const emit = defineEmits(['update']);// 定义一个方法，当按钮被点击时调用
function sendUpdate() {const newValue = 'New Value from Child';// 发射'update'事件，并传递newValue作为参数emit('update', newValue);
}
</script><style scoped>
/* 子组件的样式 */
</style>

父组件 (ParentComponent.vue)

<template><div><h1>我是父组件</h1><!-- 监听子组件的'update'事件 --><ChildComponent @update="handleUpdate" /><!-- 显示从子组件接收到的数据 --><p>从子组件接收到的数据: {{ receivedData }}</p></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue'; // 引入子组件// 定义父组件的数据
const receivedData = ref('');// 定义处理子组件'update'事件的方法
function handleUpdate(newValue) {// 更新父组件的数据receivedData.value = newValue;
}
</script><style scoped>
/* 父组件的样式 */
</style>

在这个样例中，子组件ChildComponent.vue定义了一个按钮，当按钮被点击时，会调用sendUpdate方法。这个方法通过emit函数发射一个名为update的事件，并传递一个字符串newValue作为参数。

父组件ParentComponent.vue在模板中使用了子组件，并通过@update="handleUpdate"语法监听了子组件的update事件。当子组件发射update事件时，父组件的handleUpdate方法会被调用，并接收到子组件传递过来的newValue参数。然后，父组件将接收到的数据存储在receivedData响应式变量中，并在模板中显示出来。

运行这个Vue 3应用程序时，点击子组件中的按钮，就可以在父组件中看到从子组件传递过来的新数据。

2.3.3 父组件调用子组件的方法

1. 父组件获取子组件实例：
   父组件通过ref属性获取子组件的实例。
   在父组件的模板中，给子组件添加ref属性，并指定一个引用名。
   例如，<ChildComponent ref="childRef"/>。

2. 父组件调用子组件方法：
   子组件通过defineExpose方法暴露其内部的方法或属性。
   父组件通过ref属性获取的子组件实例，可以调用defineExpose中暴露的方法或访问属性。
   例如，在子组件中定义和暴露方法defineExpose({ someMethod() { /* ... */ } });，在父组件中可以这样调用this.$refs.childRef.someMethod();（注意在<script setup>中需要使用ref的值来访问，即this.$refs.childRef.value.someMethod();，但在组合式API的setup函数中通常不会使用this，而是直接使用ref变量）。

具体示例如下：

在Vue 3中，父组件调用子组件的方法通常涉及到使用ref来获取子组件的实例，并在子组件中使用defineExpose（或直接在setup函数中返回对象）来暴露方法。以下是一个详细的样例：

子组件 (ChildComponent.vue)

<template><div><h2>我是子组件</h2><!-- 子组件的内容 --></div>
</template><script setup>
import { ref } from 'vue';// 子组件的内部数据或方法
function internalMethod() {console.log('子组件的内部方法被调用');// 这里可以执行一些操作
}// 暴露给父组件的方法
defineExpose({someMethod() {internalMethod();// 这里可以执行一些额外的操作或返回数据return 'Hello from Child';}
});// 注意：在setup中通常不直接定义和调用方法，而是通过defineExpose或返回对象来暴露它们。
// 但为了演示内部方法，我在这里定义了internalMethod并在someMethod中调用它。
</script>

父组件 (ParentComponent.vue)

<template><div><h1>我是父组件</h1><!-- 使用ref属性获取子组件实例 --><ChildComponent ref="childRef" /><button @click="callChildMethod">调用子组件方法</button><!-- 显示子组件方法返回的结果 --><p>子组件方法返回的结果: {{ childMethodResult }}</p></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';// 引用子组件实例
const childRef = ref(null);// 存储子组件方法返回的结果
const childMethodResult = ref('');// 定义调用子组件方法的方法
function callChildMethod() {// 在onMounted或某个事件处理器中调用子组件的方法// 确保子组件已经挂载并且ref已经解析if (childRef.value) {// 调用子组件暴露的方法childMethodResult.value = childRef.value.someMethod();}
}// 注意：在<script setup>中，我们不会使用this关键字。
// 相反，我们直接访问ref变量的.value属性来获取或设置值。
// 在这个例子中，我们使用了childRef.value来访问子组件实例。
</script>

在这个样例中，子组件ChildComponent.vue定义了一个内部方法internalMethod和一个暴露给父组件的方法someMethod。someMethod调用了internalMethod并返回了一个字符串。

父组件ParentComponent.vue在模板中使用了子组件，并通过ref属性childRef获取了子组件的实例。然后，父组件定义了一个方法callChildMethod，该方法在按钮点击时被调用。在callChildMethod中，父组件通过childRef.value.someMethod()调用了子组件的someMethod方法，并将返回的结果存储在childMethodResult中。

请注意，在<script setup>中，我们不会使用this关键字来访问组件实例或refs。相反，我们直接访问通过ref定义的变量，并使用.value属性来获取或设置值。此外，确保在调用子组件方法之前，子组件已经挂载并且ref已经解析（例如，在onMounted钩子或某个事件处理器中调用）。

2.4 注意事项

1. 单向数据流：

   • Vue 3遵循单向数据流的原则，即父组件传递给子组件的数据应该是不可变的，子组件不应该直接修改父组件传递的数据。
   • 如果子组件需要修改数据，应该通过事件将新的数据传递给父组件，由父组件来更新数据。

2. 类型检查：

   • 在使用defineProps和defineEmits时，可以利用TypeScript的类型系统来进行类型检查，以提高代码的可读性和健壮性。

3. 避免过度使用$refs：

   • 虽然$refs提供了父组件调用子组件方法和访问属性的能力，但过度使用可能会导致代码难以维护和理解。
   • 在可能的情况下，优先考虑通过事件和属性绑定来实现父子组件之间的通信。