一、组件化基础：什么是组件化、组件化的优势、小程序组件化与Vue/React组件的异同

1.1 什么是组件化？先聊聊我的理解

组件化，说白了就是把页面拆成一块一块独立的积木。

我记得刚入行那会儿，写页面都是一个大文件从头怼到尾。一个页面几百行代码，改个按钮样式得翻半天。后来接触了组件化开发，才恍然大悟——原来代码可以这么写。

组件化就是把一个完整的页面，拆成若干个独立、可复用的小单元。每个单元有自己的结构、样式和逻辑。它们互不干扰，又能组合在一起。

举个例子，一个电商首页可以拆成：

• 搜索框组件
• 轮播图组件
• 商品列表组件
• 底部Tab栏组件

每个组件只管自己的事。搜索框只管输入和搜索，轮播图只管图片切换。这样一拆，代码瞬间清爽了。

1.2 组件化的优势——我踩过的坑告诉你

说实话，我刚用组件化时也没觉得多厉害。直到有一次项目重构，才真正体会到它的好处。

优势一：复用性

我在项目中遇到过这种情况：三个页面都用到了同一个商品卡片。以前的做法是复制三份代码，改一个地方得改三遍。用组件化后，一个product-card组件到处引用，改一处全盘生效。

优势二：可维护性

你想想看，一个组件就几十行代码。出了问题，定位比大海捞针快多了。我曾经接手过一个老项目，一个页面5000多行，改个bug花了两天。从那以后，我坚持组件化开发。

优势三：团队协作

多人开发时，组件化简直是救星。每个人负责自己的组件，互不冲突。合并代码时冲突少，开发效率翻倍。

优势四：可测试性

组件独立了，测试也简单了。单独测一个组件，比测整个页面省事太多。

对比项	传统开发	组件化开发
代码复用	复制粘贴	引用组件
维护成本	高	低
团队协作	容易冲突	互不干扰
测试难度	困难	简单

1.3 小程序组件化 vs Vue/React组件——到底有啥不一样？

这个问题，我经常被问到。其实底层思想是一样的，但实现方式有差异。

先说共同点：

• 都是组件化思想：拆解、复用、组合
• 都有props传参机制
• 都有生命周期
• 都支持组件间通信

再说差异：

1. 文件结构不同

Vue是单文件组件（.vue），一个文件包含模板、脚本、样式。React是JSX，逻辑和模板混在一起。

小程序呢？一个组件有4个文件：

components/
  my-component/
    my-component.wxml   // 模板
    my-component.wxss   // 样式
    my-component.js     // 逻辑
    my-component.json   // 配置

我个人习惯把同组件的文件放在一个文件夹里，管理起来很清晰。

2. 数据传递方式不同

Vue用props和emit，React用props和回调函数。小程序呢？

• 父传子：properties（类似props）
• 子传父：triggerEvent（类似emit）
• 兄弟组件：通过父组件中转，或者用全局事件

嗯，这里要注意：小程序的triggerEvent和Vue的emit不太一样。小程序的事件需要先在父组件的wxml里绑定，才能接收到。

<!-- 父组件 wxml -->
<my-component bind:myevent="handleEvent" />

<!-- 子组件 js -->
this.triggerEvent('myevent', { data: 'hello' })

3. 样式隔离机制不同

Vue有scoped，React有CSS Modules。小程序默认就是样式隔离的——组件的样式不会影响外部，外部的样式也不会影响组件内部。

我曾经被这个坑过：在父页面写了个全局样式，结果子组件死活不生效。后来才发现，小程序组件默认开启了样式隔离。

如果想穿透，可以用addGlobalClass或者externalClasses。

// 组件 json
{
  "component": true,
  "usingComponents": {},
  "styleIsolation": "apply-shared"
}

4. 生命周期差异

Vue有created、mounted、updated等。React有useEffect、componentDidMount等。

小程序组件的生命周期：

• created：组件实例刚创建
• attached：组件挂载到页面
• ready：组件布局完成
• moved：组件移动
• detached：组件销毁

我个人最常用的是attached和ready。attached适合做数据初始化，ready适合做DOM操作。

5. 插槽机制不同

Vue有slot，React有children。小程序也有slot，但功能弱一些。

小程序默认只有一个slot。想用多个？得在json里声明：

{
  "component": true,
  "multipleSlots": true
}

然后就可以用name区分了：

<!-- 组件模板 -->
<view>
  <slot name="header" />
  <slot name="body" />
</view>

<!-- 使用 -->
<my-component>
  <view slot="header">标题</view>
  <view slot="body">内容</view>
</my-component>

好了，这一章就聊到这儿。下一章我们实战一下，写一个真正的小程序组件。到时候我会分享一些我在项目中积累的小技巧。