• 把模板转化成render函数
• 调用render函数产生虚拟节点，将虚拟节点插入到真实节点上

  let oldTemplate = `<div>{{message}}</div>`;
  let vm1 = new Vue({data:{message:'hello world'}});
  const render1 = compileToFunction(oldTemplate);
  const oldVnode = render1.call(vm1);//虚拟dom
  document.body.appendChild(createElm(oldVnode));

生成render函数方法：compileToFunction

//parse.js
const attribute =
  /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/; //属性正则
const unicodeRegExp =
  /a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;
const dynamicArgAttribute =
  /^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+?\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/;
const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z${unicodeRegExp.source}]*`; //标签名
const qnameCapture = `((?:${ncname}\\:)?${ncname})`; //用来获取标签名的，match后索引为1的
const startTagOpen = new RegExp(`^<${qnameCapture}`); //开始标签
const startTagClose = /^\s*(\/?)>/; //<div/>
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`); //闭合标签
const doctype = /^<!DOCTYPE [^>]+>/i;
// #7298: escape - to avoid being passed as HTML comment when inlined in page
const comment = /^<!\--/;
const conditionalComment = /^<!\[/;

export function parseHtml(html) {
  let root = null;
  let stack = [];
  function advance(len) {
    html = html.substring(len);
  }
  function parseStartTag() {
    const start = html.match(startTagOpen);
    if (start) {
      //如果是开始标签，需要截取掉前面的字符串，并获取到匹配到的数据
      const match = {
        tagName: start[1],
        attrs: [],
      };
      advance(start[0].length);
      let end;
      //如果没有遇到结束标签就不停的解析
      let attr;
      while (
        !(end = html.match(startTagClose)) &&
        (attr = html.match(attribute))
      ) {
        match.attrs.push({
          name: attr[1],
          value: attr[3] || attr[4] || attr[5],
        });
        advance(attr[0].length);
      }
      if (end) {
        advance(end[0].length);
      }
      return match;
    } else {
      //说明不是开始标签
      return false;
    }
  }
  while (html) {
    //看要解析的内容是否存在，如果存在就不停的解析
    let textEnd = html.indexOf("<"); //可能是开始标签，也可能是结束标签
    if (textEnd == 0) {
      //说明存在，
      const startTagMatch = parseStartTag(html); //解析开始标签;
      if (startTagMatch) {
        start(startTagMatch.tagName, startTagMatch.attrs);
        continue;
      }
      const endTagMatch = html.match(endTag);
      if (endTagMatch) {
        end(endTagMatch[1]);
        advance(endTagMatch[0].length);
        continue;
      }
    }
    let text;
    if (textEnd > 0) {
      text = html.substring(0, textEnd);
    }
    if (text) {
      charts(text);
      advance(text.length);
    }
  } //html字符串解析成对应的脚本来触发 tokens <div id="app"></div>
  function createAstElement(tagName, attrs) {
    return {
      tag: tagName,
      children: [],
      attrs,
      type: 1,
      parent: null,
    };
  }

  function start(tagName, attributes) {
    let parent = stack[stack.length - 1];
    let element = createAstElement(tagName, attributes);
    if (!root) {
      root = element;
    }
    if (parent) {
      element.parent = parent; //当放入栈时，记录父亲是谁
      parent.children.push(element);
    }
    stack.push(element);
  }
  function end(tagName) {
    let last = stack.pop();
    if (last.tag != tagName) {
      throw new Error("标签闭合有误");
    }
  }
  function charts(text) {
    text = text.replace(/\s/g, "");
    let parent = stack[stack.length - 1];
    if (text) {
      parent.children.push({
        type: 3,
        text,
      });
    }
  }
  return root;
}

//generate.js
const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g;
function getProps(el){//{[name:'id',value:app]}
    let str = ''
    el.forEach(attr=>{
      //修改style前_c('div'),{d:"app",class:"app",style:"color:red;background:blue"}
      if (attr.name == "style") {
        let styleObj = {};
        attr.value.replace(/([^:;]+):([^:;]+)/g, function () {
          styleObj[arguments[1]] = arguments[2];
        });
        attr.value = styleObj;
      }
      //修改style之后_c('div'),{d:"app",class:"app",style:{"color":"red","background":"blue"}}
      str += `${attr.name}:${JSON.stringify(attr.value)},`;
    })
    return `{${str.slice(0,-1)}}`
}
function gen(el){
  if(el.type == 1){
    return generate(el);
  }else{
    let text = el.text;
    if(!defaultTagRE.test(text)){
       return `_v("${text}")`
    }else{
      // 'hello' + arr + 'world' hello{{arr}}world
      let tokens = [];
      let match;
      let lastIndex = defaultTagRE.lastIndex = 0;
      while(match = defaultTagRE.exec(text)){//看有没有匹配到
        let index = match.index;
        if(index > lastIndex){
          tokens.push(JSON.stringify(text.slice(lastIndex,index)))
        }
        tokens.push(`_s(${match[1].trim()})`)
        lastIndex = index + match[0].length
      }
      if(lastIndex < text.length){
        tokens.push(JSON.stringify(text.slice(lastIndex)));
      }
      return `_v(${tokens.join('+')})`
    }
  }
}
function generateChildren(el){
  let children = el.children
  if(children){
    return children.map(c=>gen(c)).join(',')
  }
  return false
}            
export function generate(el){
  //遍历树，将树拼接成字符串
  let children  = generateChildren(el);
  let str = el.attrs.length>0?getProps(el.attrs):'undefined';
  let code = `_c('${el.tag}',${str}${children?`,${children}`:''})`;
  return code
}


//index.js
import { generate } from "./generate";
import { parseHtml } from "./parse";

export function compileToFunction(el) {
  const root = parseHtml(el);
    //生成代码 _c('div',{id:'app',a:1},[text])
  let code = generate(root);
  let render = new Function (`with(this){return ${code}}`)
 
  return render
  //html->ast(只能描述语法，语法不存在的属性无法描述)->render函数->虚拟dom（增减额外的属性）->生成真实的dom
}

创建虚拟节点方法：createElm

export function patch(oldVnode,vnode){//新的虚拟节点替换掉老的节点，先插入，后删除
    if(!oldVnode){
        return createElm(vnode)
    }
    if(oldVnode.nodeType == 1){
        const parent = oldVnode.parentNode;
        const newElm = createElm(vnode);
        parent.insertBefore(newElm, oldVnode.nextSibling);
        parent.removeChild(oldVnode);
        return newElm;//首次渲染时将老节点删除掉，会导致再次更新数据，获取不到老节点，所以没办法插入，所以每次更新老节点
    }
}
function createComponent(vnode){
    let i = vnode.data; 
    if((i = i.hook) && (i = i.init)){
        i(vnode);//调用init方法
    }
    if (vnode.componentInstance) {
      //有属性说明子组件new完毕了，并且组件的真实dom挂载到了vnode。componentInstance
      return true;
    }
} 
export function createElm(vnode){
    let {vm,tag,data,children,text} = vnode;
    if(typeof tag === 'string'){
        //判断是否是组件
        if( createComponent(vnode)){
            //返回组件对应的真实节点
            console.log(vnode.componentInstance.$el);
            return vnode.componentInstance.$el
        }
        vnode.el = document.createElement(tag);
        if(children.length){
            children.forEach(child=>{
                vnode.el.appendChild(createElm(child));
            })
        }
    }else{
        vnode.el = document.createTextNode(text);
    }
    return vnode.el;
}