自定义渲染器 -> 初始渲染器实现

const vnode = h('div', null, 'hello world')
console.log(vnode)

/**
 * 通过渲染器 将虚拟 DOM 转为真实 DOM 渲染在页面中
 * vnode -> rener -> DOM
 */
import { h, render } from 'vue'

const vnode = h('div', null, 'hello world')
render(vnode, document.body)

import { createRenderer, h } from 'vue'

const renderer = createRenderer()
console.log(renderer)

import { createRenderer, h } from '../../../node_modules/vue/dist/vue.esm-browser.js'

const vnode = h('div', {}, 'hello world')

// 创建自定义渲染器，提供 DOM 操作方法
const renderer = createRenderer({
  // 将元素插入到父节点中
  insert(el, parent, anchor = null) {
    // anchor: 锚点元素，用于指定插入位置
    // 如果有 1、2、3 节点，要将新节点插入到 1 和 3 之间，则 anchor 为 3
    parent.insertBefore(el, anchor)
  },

  // 创建元素节点
  createElement(type) {
    return document.createElement(type)
  },

  // 设置元素的文本内容
  setElementText(el, text) {
    el.textContent = text
  },

  // 移除元素
  remove(el) {
    const parent = el.parentNode
    if (parent) {
      parent.removeChild(el)
    }
  },

  // 创建文本节点
  createText(text) {
    return document.createTextNode(text)
  },

  // 设置文本节点的内容
  setText(node, text) {
    return (node.nodeValue = text)
  },

  // 获取父节点
  parentNode(el) {
    return el.parentNode
  },

  // 获取下一个兄弟节点
  nextSibling(el) {
    return el.nextSibling
  },

  // 查询元素
  querySelector(selector) {
    return document.querySelector(selector)
  }
})

// 将虚拟节点渲染到页面
renderer.render(vnode, document.body)

// 2 秒后卸载
setTimeout(() => {
  renderer.render(null, document.body)
}, 2000)