一、处理问题的方式

任何一个人处理信息的逻辑能力都是有限的
所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容
但是，我们人有一种天生的能力，就是将问题进行拆解
如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，会发现大的问题也会迎刃而解

二、组件化开发

组件化也是类似的思想

如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展
但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了
如果我们将一个个功能块拆分后，就可以像搭建积木一下来搭建我们的项目

通过组件化的思想来思考整个应用程序：

将一个完整的页面分成很多个组件
每个组件都用于实现页面的一个功能块
而每一个组件又可以进行细分
而组件本身又可以在多个地方进行复用

Vue的组件化

组件化是Vue、React、Angular的核心思想

createApp函数传入了一个对象App，这个对象其实本质上就是一个组件，也是我们应用程序的根组件
组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用
任何的应用都会被抽象成一颗组件树

注册组件的方式

全局组件：在任何其他的组件中都可以使用的组件

全局组件需要使用我们全局创建的app来注册组件
通过component方法传入组件名称、组件对象即可注册一个全局组件了
之后，我们可以在App组件的template中直接使用这个全局组件

<body>
    <div id="app"></div>
    <script src="../js/vue.js"></script>

    <template id="my-app">
        <com-a></com-a>
        <com-b></com-b>
    </template>
    <template id="comb">
        <h2>组件b</h2>
        <h3>组件b的数据：{{msg}}</h3>
    </template>

    <script>
        const App = {
            template: '#my-app',
            data: function () {
                return {
                    message: 'Hello World'
                }
            },
            methods: {}
        }
        
        let app = Vue.createApp(App)
        
        app.component('com-a', {
            template:
                '<h2>组件a</h2>',
            

        })
        app.component('com-b',{
            template:'#comb',
            data() {
                return {
                    msg: 'hello'
                }
            }
        })
        app.mount('#app')
    </script>
</body>

局部组件：只有在注册的组件中才能使用的组件

全局组件往往是在应用程序一开始就会全局组件完成，那么就意味着如果某些组件我们并没有用到，也会一起被注册
比如注册了三个全局组件：ComponentA、ComponentB、ComponentC；在开发中我们只使用了ComponentA、ComponentB，如果ComponentC没有用到但是我们依然在全局进行了注册
那么就意味着类似于webpack这种打包工具在打包我们的项目时，我们依然会对其进行打包；这样最终打包出的JavaScript包就会有关于ComponentC的内容，用户在下载对应的JavaScript时也会增加包的大小
所以在开发中我们通常使用组件的时候采用的都是局部注册：局部注册是在我们需要使用到的组件中，通过components属性选项来进行注册
比如之前的App组件中，我们有data、computed、methods等选项了，事实上还可以有一个components选项
该components选项对应的是一个对象，对象中的键值对是组件的名称: 组件对象

<body>
    <div id="app"></div>
    <script src="../js/vue.js"></script>

    <template id="my-app">
        <h2>{{message}}</h2>
        <component-a></component-a>
    </template>

    <script>
        const componentA = {
            template: '<h2>组件componentA</h2>'
        }
        const App = {
            template: '#my-app',
            data: function () {
                return {
                    message: 'Hello World'
                }
            },
            methods: {},
            components: {
                // componentA: componentA
                // Es6语法糖
                componentA
            }
        }

        Vue.createApp(App).mount('#app')
    </script>
</body>