组件的拆分粒度是越细越好吗-轻识

点击上方程序员成长指北，关注公众号

回复1，加入高级Node交流群

Hello，各位小伙伴，接下来的一段时间里，我会把我的课程《Vue.js 3.0 核心源码解析》中问题的答案陆续在我的公众号发布，由于课程的问题大多数都是开放性的问题，所以我的答案也不一定是标准的，仅供你参考喔。

那么，回到这个问题本身，组件的拆分粒度是越细越好吗？先说结论：并不是。为什么呢？

什么是组件

组件是一个抽象的概念，它是对一棵 DOM 树的抽象，直观点说，一个组件可以包含若干个原生 DOM 标签，举个例子，假设我们有一个 HelloWorld 组件，如下：

<template>
  <div>
    <p>Hello World</p>
  </div>
</template>

然后我们在页面中去引用这个组件：

<hello-world></hello-world>

这段代码并不会在页面上渲染一个 <hello-world> 标签，而是会渲染 HelloWorld 组件中的模板内容，即渲染一个 div，内部包含一个 p 标签，显示 Hello World 文本。

当然，组件除了对 DOM 层面的封装，还可以对数据、逻辑、交互等等进行封装，不仅如此，组件还支持嵌套，所以整个页面就是可以由一个个嵌套的组件构成，抽象成一棵组件树，如下：

组件化是 Vue.js 的核心思想之一，它允许我们用模板加对象描述的方式去创建一个组件，再加上我们给组件注入不同的数据，就可以完整地渲染出组件，那么它具体是怎么做的呢?

组件是如何渲染的

众所周知，Vue.js 对开发者非常友好的一点是支持模板，任何合乎规范的 HTML 都是合法的 Vue 模板。Vue.js 对于模板会有一个编译的过程（可以离线完成，也可以在运行时完成），Vue.js 在编译模板的过程中会识别出组件标签，编译生成对应的 render 函数。

你可以借助 Vue.js 的在线模板编译工具看一下我们前面示例 <hello-world></hello-world> 的编译结果：

import { resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_hello_world = _resolveComponent("hello-world")

  return (_openBlock(), _createBlock(_component_hello_world))
}