你真的了解过 Vue 的组件化开发吗🔥

作者：渔戈

2022-10-24
广东
本文字数：2786 字
阅读完需：约 9 分钟

Hello,又见面了,我是渔戈!

前言

人处理问题的方式

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

1.认识组件化开发

组件化也是类似的思想：

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

2.组件化开发

现在可以说整个的大前端开发都是组件化的天下，无论从三大框架（Vue、React、Angular），还是跨平台方案的 Flutter，甚至是移动端都在转向组件化开发，包括小程序的开发也是采用组件化开发的思想
所以，学习组件化最重要的是它的思想，每个框架或者平台可能实现方法不同，但是思想都是一样的。
我们需要通过组件化的思想来思考整个应用程序：
我们将一个完整的页面分成很多个组件；
每个组件都用于实现页面的一个功能块；
每个组件都用于实现页面的一个功能块；
而组件本身又可以在多个地方进行复用；

3.Vue 的组件化

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

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

3.1 注册组件的方式

如果我们现在有一部分内容（模板、逻辑等），我们希望将这部分内容抽取到一个独立的组件中去维护，这个时候如何注册一个组件呢？
我们先从简单的开始谈起，比如下面的模板希望抽离到一个单独的组件:

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

复制代码

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

4.全局组件

4.1 注册全局组件

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

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

    <template id="component-a">      <h2>{{title}}</h2>      <p>{{desc}}</p>      <button @click="btnClick">按钮点击</button>    </template>    <script src="../js/vue.js"></script>    <script>      const App = {        template: "#my-app",      };
      const app = Vue.createApp(App);
      // 使用app注册一个全局组件app.component()      // 全局组件: 意味着注册的这个组件可以在任何的组件模板中使用      app.component("component-a", {        template: "#component-a",        data() {          return {            title: "我是标题",            desc: "我是内容, 哈哈哈哈哈",          };        },      app.mount("#app");    </script>

复制代码

4.2 全局组件的逻辑

当然，我们组件本身也可以有自己的代码逻辑：比如自己的 data、computed、methods 等等

app.component("my-cpn"),{template:"#my-cpn",    data(){        return {            title: "我是标题",            message: "我是内容!"        }    },    methods: {        btnClick() {        console.log("btnClick")        }    }}

复制代码

4.3 组件的名称

在通过 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',{    /*...*/    })

复制代码

5.局部组件

5.1 注册局部组件

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

比如我们注册了三个全局组件：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">    <h2>{{message}}</h2>    <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: {        // key: 组件名称        // value: 组件对象        ComponentA: ComponentA,        ComponentB:ComponentB      },      data() {        return {          message: "Hello World"        }      }    }    const app = Vue.createApp(App);    // app.component("ComponentA", ComponentA);    app.mount('#app');  </script>