组件化自然便是 vue 的一个核心思想。通过把页面拆分成多个组件 (component),每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护。组件是独立的,系统内部是可复用的,组件和组件之间是可以嵌套的。
组件的独立性和可复用性很好理解。一个vue实例就是一个组件,它包含界面(template)、样式(style)、操作(script)。而该实例的构造函数则是通过 Vue 这个基类扩展而来。有了这个构造函数就可以创建多个具有相同功能和界面的UI组件,从而实现来可复用性。
真正让我们疑惑的是vue组件是如果嵌套的。
看下图:
结合vue数据驱动逻辑,上图很清晰的展示来组件是如果在挂载的流程中通过递归实现嵌套的。
vnode 在转换为 DOM 元素时,首先判断其tag 是不是html/svg的标签,如果是,则创建DOM,然后递归遍历 children 中的 vnode。当碰到 vue 组件时,则找到该组件的配置,创建组件构造函数,然后实例化,然后挂载,之后就进入来该组件的渲染流程,此流程将自定义标签转换成来组件所表示的 template。