MicroVue框架搭建Part4——
Render渲染前MicroVue框架搭建Part1——基本目录结构MicroVue框架实现Part2——数据代理实现MicroVue框架搭建Part3——$Mount方法实现概述在上面$Mount的实现中方法中，我们根据入口点对HTML结构进行解析分析，为每个HTML节点构建一个虚拟DOM（vnode）。本文将在此基础上实现Render渲染前的一些准备工作，为Render渲染数据打下基础。后面渲染数据的时候，我们可以根据模板语法和vnode的关系找到对应的数据变量，通过虚拟DOM渲染到页面。页面中使用模板语法HTML代码的目标概览分析文本内容：{{content}}{{info.school}}
根据上文，对于每个节点构建的虚拟DOM（vnode），如下图所示，我们可以看到在打印出来的vnode节点中，text属性值为页面中使用的模板语法入口方法——parpaerRender/***挂载方法的具体实现*@param{*}vm*@param{*}el挂载节点对应的真实DOM*/functionmount(vm,el){//第一步：构建虚拟DOMconstrootDom=getDom(el);vm._vnode=contrucVNode(vm,rootDom,null);//Step2:收集DOM节点与模板语法的映射关系——待实现parpaerRender(vm,vm._vnode);}要分析vnode和template的关系，我们不仅要知道模板语法用在哪里，还需要知道它们之间的映射关系。后面我们修改数据的时候，就可以同步页面上的显示内容了。什么样的映射关系？:在单个vnode节点中，使用了哪些模板语法，在单个模板语法中使用了哪些vnode节点。使用ES6中的Map对象代码实现——parpaerRender方法nodeType为3，表示为文本节点param{*}vnode*/exportfunctionparpaerRender(vm,vnode){if(vnode.nodeType===3){analysisTemplteString(vnode);}for(leti=0;i
