Vue3 + TS 系统学习五 - 组件化开发基础

发布于 2024-01-04 02:38:38 字数 7822 浏览 31 评论 0

现在可以说整个的大前端开发都是组件化的天下，无论从三大框架（Vue、React、Angular），还是跨平台方案的 Flutter，甚至是移动端都在转向组件化开发，包括小程序的开发也是采用组件化开发的思想。
所以，学习组件化最重要的是它的思想，每个框架或者平台可能实现方法不同，但是思想都是一样的。

一. 认识组件化

1.1. 什么是组件化？

人面对复杂问题的处理方式：

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

复杂问题的处理

组件化也是类似的思想：

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

组件化的拆分

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

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

1.2. Vue 的组件化

组件化是 Vue、React、Angular 的核心思想，也是我们后续课程的重点（包括以后实战项目）：

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

组件化开发

组件化思想的应用：

有了组件化的思想，我们在之后的开发中就要充分的利用它；
尽可能的将页面拆分成一个个小的、可复用的组件；
这样让我们的代码更加方便组织和管理，并且扩展性也更强；

接下来，我们来学习一下在 Vue 中如何注册一个组件，以及之后如何使用这个注册后的组件。

二. 注册一个组件

2.1. 注册全局组件

如果我们现在有一部分内容（模板、逻辑等），我们希望将这部分内容抽取到一个独立的组件中去维护，这个时候如何注册一个组件呢？

我们先从简单的开始谈起，比如下面的模板希望抽离到一个单独的组件：

<h2>{{title}}</h2>
<p>{{message}}</p>

注册组件分成两种：

全局组件：在任何其他的组件中都可以使用的组件；
局部组件：只有在注册的组件中才能使用的组件；

我们先来学习一下全局组件的注册：

全局组件需要使用我们全局创建的 app 来注册组件；
通过 component 方法传入组件名称、组件对象即可注册一个全局组件了；

<template id="my-cpn">
    <h2>我是组件标题</h2>
    <p>我是组件内容，哈哈哈哈</p>
  </template>

  <script src="../js/vue.js"></script>
  <script>
    const app = Vue.createApp(App);

    // 注册全局组件（使用 app)
    app.component("my-cpn", {
      template: "#my-cpn"
    });

    app.mount('#app');
  </script>

之后，我们可以在 App 组件的 template 中直接使用这个全局组件：

  <template id="my-app">
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
  </template>

当然，我们组件本身也可以有自己的代码逻辑：

// 注册全局组件（使用 app)
app.component("my-cpn", {
  template: "#my-cpn",
  data() {
    return {
      title: "我是标题",
      message: "我是内容, 哈哈哈哈"
    }
  },
  methods: {
    btnClick() {
      console.log("btnClick");
    }
  }
});

2.2. 组件的名称

在通过 app.component 注册一个组件的时候，第一个参数是组件的名称，定义组件名的方式有两种：

方式一：使用 kebab-case（短横线分割符）

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name> ；

app.component('my-component-name', {
  /* ... */
})

方式二：使用 PascalCase（驼峰标识符）

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的；

app.component('MyComponentName', {
  /* ... */
})

2.3. 注册局部组件

全局组件往往是在应用程序一开始就会全局组件完成，那么就意味着如果某些组件我们并没有用到，也会一起被注册：

比如我们注册了三个全局组件：ComponentA、ComponentB、ComponentC；
在开发中我们只使用了 ComponentA、ComponentB，如果 ComponentC 没有用到但是我们依然在全局进行了注册，那么就意味着类似于 webpack 这种打包工具在打包我们的项目时，我们依然会对其进行打包；
这样最终打包出的 JavaScript 包就会有关于 ComponentC 的内容，用户在下载对应的 JavaScript 时也会增加包的大小；

所以在开发中我们通常使用组件的时候采用的都是局部注册：

局部注册是在我们需要使用到的组件中，通过 components 属性选项来进行注册；
比如之前的 App 组件中，我们有 data、computed、methods 等选项了，事实上还可以有一个 components 选项；
该 components 选项对应的是一个对象，对象中的键值对是 组件的名称: 组件对象 ；

接下来，我们看一下局部组件是如何注册的：

 <div id="app"></div>

  <template id="my-app">
    <component-a></component-a>
    <component-b></component-b>
  </template>

  <template id="component-a">
    <h2>{{title}}</h2>
    <p>{{message}}</p>
  </template>


  <template id="component-b">
    <h2>{{title}}</h2>
    <p>{{message}}</p>
  </template>

  <script src="../js/vue.js"></script>
  <script>
    const ComponentA = {
      template: "#component-a",
      data() {
        return {
          title: "我是 ComponentA 标题",
          message: "我是 ComponentA 内容, 哈哈哈哈"
        }
      }
    }

    const ComponentB = {
      template: "#component-b",
      data() {
        return {
          title: "我是 ComponentB 标题",
          message: "我是 ComponentB 内容, 呵呵呵呵"
        }
      }
    }

    const App = {
      template: '#my-app',
      components: {
        'component-a': ComponentA,
        'component-b': ComponentB,
      },
      data() {
        return {
          message: "Hello World"
        }
      }
    }

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

在开发中通常我们都会注册局部组件，而不是全局组件。