什么是组件
组件 (Component) 是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。也就是说，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。
在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。
下面自定义一个wanzi-comp 组件。
我们之间看组件代码吧：
<body>
<div id="wzApp">
<!-- 组件的使用 -->
<wanzi-comp></wanzi-comp>
</div>
</body>
<script>
const { createApp, ref, reactive, watch, computed } = Vue
const app = {
setup() {
return {
}
}
}
const vm = createApp(app)
// 全局注册组件 : 这段代码必须在mount('#wzApp')之前调用
// 第一个参数: 组件的名字
// 第二个参数: 接收一组组件的选项参数
vm.component('wanzi-comp',{
// 创建自定义组件
template:'<div>hello 我是丸子</div>'
})
vm.mount('#wzApp')
</script>
重点说明
wanzi-comp 这个组件可以重复使用，比如加上这个组件就显示“hello 我是丸子”。
还能通过修改这个组件一次性更新到其他组件，统一管理。
实际项目代码设计中，为了保证复用性和可维护性，是会有多种可行的方案。
我们这里采用vue自动的component组件来实现这一点。
比如我们可以用一个wanzi-page 做一个页面组件，直接把后端接口数据渲染到分页面组件中。后面再分享。
当然，所有的Vue 组件同时也都是 Vue 的实例，所以它们能够可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子（hook）。
总结
组件化是从UI界面的角度进行划分，前端的组件化，方便UI组件的重用，减少重复代码，方便维护
就写到这里
我是丸子，每天学会一个小知识。
一个前端开发
希望多多支持鼓励，感谢
