# 组件的本质
- 在模板引擎的年代,组件的产出的是html 字符串。
- 现在的vue或者react,组件产出的内容是virtual dom。
- h函数用来创建vnode,组件的产出是vnode 要从直接产出 html 变成产出 Virtual DOM 呢?其原因是 Virtual DOM 带来了 分层设计,它对渲染过程的抽象,使得框架可以渲染到 web(浏览器) 以外的平台,以及能够实现 SSR 等。
- Vnode是真实DOM的描述。
- 函数式组件 a. 是一个纯函数 b. 没有自身状态,只接受外部数据 c. 产出Vnode的方式,单纯的函数调用
- 有状态的组件 a. 是一个类,可实例化 b. 可以有自身状态 c. 产出Vnode的方式,需要实例化,然后调用其render函数
# 设计Vnode
- 尽可能的再保证语义能够说通的情况下服用属性,会使Vnode对象更加轻量。
- 我们可以通过检查tag属性值是否是字符串俩确定一个Vnode是否是普通标签。
- 当渲染器在渲染Vnode时,如果发现该vnode的类型是fragment,就只需要把该Vnode的子节点渲染到页面。
- 什么是portal,它允许你把内容渲染到任何地方。
- 所谓的portal,就是把子节点渲染到给定的目标。
- 不同类型的Vnode拥有不同的设计。
- Html/svg标签 组件 a. 有状态组件 i. 普通的有状态的组件 ii. 需要被keepalive的有状态组件 iii. 已经被keepalive的组件 b. 函数式组件 纯文本 Fragment Portal
- Vue2中区分Vnode 是html元素还是组件亦或是普通文本的做法: a. 拿到vnode后先尝试把它当做组价去处理,如果成功地创建了组件,那说明该vnode就是组件的vnode b. 如果没能成功地创建组件,则检查vnode.tag 是否有定义,如果有定义则当做普通标签处理 c. 如果vnode.tag 没有定义接检查是否是注释节点。 d. 如果不是注释节点,则会把它当做文本节点对待。
- 从设计角度来说,任何可以对Vnode进行描述的内容,我们都可以将其存放到vnodedata对象中。
# 辅助创建Vnode的h函数
- 在设计有状态组价时,我们会设计一个基础组件,所有组价都会继承其基础组件,并且基础组件拥有用来报告信息的render函数。
← VueRouter文档 Vue学习 →