vue组件

什么是vue组件？，我认为这样比较好理解。

声明式的描述UI

1. 首先vue 是声明式的UI框架，也就是使用模板描述UI；但它也支持JS对象描述UI

   何为模板描述UI？：比如 我们非常熟悉的<h1> hello </h1> ,你所看到的的 UI展示是 hello

   何为JS对象描述UI？：通过类似于 { tag: "h1",text:'hello ',children: []} 这样的抽象语法树去展示UI

2. 虚拟Dom就是：使用JS对象的方式描述UI

3. render渲染函数就是：使用虚拟Dom来描述UI

4. h函数是用来辅助创建虚拟Dom的工具函数，本身就是把调用的代码转为JS对象

组件的本质

1. 组件是：一组虚拟Dom的封装
2. 组件可以是：返回一个虚拟Dom的函数，也可以是对象（对象上必须有产出虚拟Dom的方法）。本质上都是产出虚拟Dom给渲染器

渲染器

1. 渲染器就是：把虚拟Dom(即JS对象)转为真实Dom

2. 使用我们熟悉的Dom操作API完成渲染工作

3. 创建Dom节点时，渲染器的处理思路

   1） 把vnode.tag 当作标签名创建元素

   2）为元素添加属性：如果时“on”开头就当事件处理

   3） 处理children：如果是Array就 遍历递归。如果是String就当文本节点处理

模板的工作原理

1. 将模板（即.vue的template的内容）编译成渲染函数，并添加到scrpit标签上，最终在浏览器运行的是render函数的代码

总结

vue组件渲染到页面： template将内容编译成渲染函数，本身会调用工具函数将内容部分的代码转为JS对象，也就是虚拟Dom；最后将虚拟Dom给渲染器转为真实Dom。

vue组件的本质：就是封装的JS对象，所以组件可以采用模板的方式、也可以采用render渲染函数的方式描述UI 最后一句

这是沉曦的学习心得！若有不正，还望斧正。希望掘友们不要吝啬对我的建议哦，回见。