Vue组件的本质和手写通过render渲染函数渲染组件

1.组件的本质

组件就是一组 DOM 元素的封装，本质就是一个对象

(mounted函数中打印一下组件即可看到打印的是一个对象)

如何利用javascript对象来描述一个组件？

const MyComponent = {render() {return {tag: 'div',props: {onClick: () => alert('hello')},children: 'click Me'}}
}const vnode = {tag: MyComponent
}

如何修改渲染器的内容？渲染函数时写的只是针对虚拟节点不是针对组件（即传入一个对象）

2.手写组件渲染函数

虚拟节点为字符串时：手写Vue渲染器render函数-CSDN博客

重点：和普通字符串tag不同的时，判断vnode.tag是一个组件时，通过组件的render函数获取组件对象的虚拟节点

    <div id="app"></div><script>// 手写render函数组件对象渲染到页面/*重点:使用vnode.tag作为创建的dom标签el（判断vnode.tag是一个组件时，通过组件的render函数获取组件对象的虚拟节点）*//*** @vnode 虚拟 DOM 对象* @container 一个真实 DOM 元素，作为挂载点，渲染器会把虚拟 DOM 渲染到该挂载点*/function render(vnode, container) {// 通过判断vode的tag为对象则为组件渲染if(typeof vnode.tag === "string"){mount(vnode, container);}else if(typeof vnode.tag === "object"){let comVnode = vnode.tag.render();mount(comVnode, container);}else{// ...其他操作}}// tag为字符串时的渲染函数function mount(vnode, container) {// 使用vnode.tag作为创建的dom标签ellet el = document.createElement(vnode.tag);// 遍历vnode.props，将属性 事件添加到DOM上（事件即给元素添加监听事件；）for (let key in vnode.props) {// 判断如果为事件则将其设置到el中if ((/^(on)/).test(key)) {el.addEventListener(key.substr(2).toLowerCase(), vnode.props[key]);}}// 处理 children(字符串和数组)if (typeof vnode.children === "string") {el.appendChild(document.createTextNode(vnode.children));} else if (Array.isArray(vnode.children)) { //是数组进行遍历并递归调用render方法vnode.children.forEach(child => {render(child, el);});}// 将元素添加到挂载节点container下container.appendChild(el);}// render函数测试const container = document.getElementById('app')// 仿组件结构（可以通过render方法获取组件的虚拟节点对象数据）const MyComponent = {render() {return {tag: 'div',props: {},children: [{tag: 'p',props: {},children: '我是一个p标签'},{tag: 'button',props: {onClick: () => alert('hi vue')},children: '按钮'}]}}}const vnode = {tag: MyComponent}render(vnode, container)