// MyComponent 是一個對象
const MyComponent = {
  render() {
    return {
      tag: "div",
      props: {
        onClick: () => alert("hello"),
      },
      children: "click me",
    };
  },
};
function mountComponent(vnode, container) {
  // 調(diào)用組件函數(shù)，獲取組件要渲染的內(nèi)容（虛擬 DOM）
  const subtree = vnode.tag();
  // 遞歸地調(diào)用 renderer 渲染 subtree
  renderer(subtree, container);
}

// MyComponent 是一個函數(shù)
function renderer(vnode, container) {
  if (typeof vnode.tag === "string") {
    // 說明 vnode 描述的是標(biāo)簽元素
    // mountElement內(nèi)部實現(xiàn)與下文的「實現(xiàn)renderer渲染器邏輯一致」
    mountElement(vnode, container);
  } else if (typeof vnode.tag === "function") {
    // 說明 vnode 描述的是組件
    mountComponent(vnode, container);
  }
}
function mountComponent(vnode, container) {
  // 調(diào)用組件函數(shù)，獲取組件要渲染的內(nèi)容（虛擬 DOM）
  const subtree = vnode.tag();
  // 遞歸地調(diào)用 renderer 渲染 subtree
  renderer(subtree, container);
}

function renderer(vnode, container) {
  // 使用 vnode.tag 作為標(biāo)簽名稱創(chuàng)建對應(yīng)的 DOM 元素
  const el = document.createElement(vnode.tag);
  // 遍歷 vnode.props，將屬性、事件添加到 DOM 元素
  for (const key in vnode.props) {
    if (/^on/.test(key)) {
      // 如果 key 以 on 開頭，說明它是事件
      el.addEventListener(
        key.substr(2).toLowerCase(), // 事件名稱 onClick ---> click
        vnode.props[key] // 事件處理函數(shù)
      );
    }
  }
  // 處理 children
  if (typeof vnode.children === "string") {
    // 如果 children 是字符串，說明它是元素的文本子節(jié)點
    el.appendChild(document.createTextNode(vnode.children));
  } else if (Array.isArray(vnode.children)) {
    // 遞歸地調(diào)用 renderer 函數(shù)渲染子節(jié)點，使用當(dāng)前元素 el 作為掛載點
    vnode.children.forEach((child) => renderer(child, el));
  }
  // 將元素添加到掛載點下
  container.appendChild(el);
}

<template>
   // Portal 把里面的內(nèi)容掛載到 #app
  <Portal target="#app">
    <div class="overlay"></div>
  </Portal>
</template>

function createRenderer() {
  function render(vnode, container) {
    if (vnode) {
      // 存在舊節(jié)點  需要進行patch補丁更新
      patch(container._vnode, vnode, container);
    } else {
      if (container._vnode) {
        // 舊 vnode 存在，且新 vnode 不存在，此時渲染的是上一步中的節(jié)點值，說明是卸載（unmount）操作
        container.innerHTML = "";
      }
    }
    // 把 vnode 存儲到 container._vnode 下，即后續(xù)渲染中的舊 vnode
    container._vnode = vnode;
  }
  return {
    render,
  };
}

<template>
  <div @click="login">
    登錄
  </div>
</template>
<script>
  export default {
    data() {
    },
    methods: {
      login: () => { }
    }
  }
</script>
//編譯后
export default {
  data() {},
  methods: {
    login: () => { }
  },
  render() {
    return h('div', { onClick: login }, '登錄')
  }
}