Vue3 渲染器的作用

渲染器的作用是把虚拟 DOM 渲染为特定平台上的真实元素。在浏览器中，渲染器会把虚拟 DOM 渲染成真实 DOM 元素。

import {
  createRenderer,
  h,
  render,
} from "/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js";
const renderer = createRenderer({
  createElement(element) {
    return document.createElement(element);
  },
  setElementText(el, text) {
    el.innerHTML = text;
  },
  insert(el, container) {
    container.appendChild(el);
  },
});
// 自定义渲染器
renderer.render(h("h1", "hello world"), document.getElementById("app"));
// 内置渲染器
render(h("h1", "hello world"), document.getElementById("app"));

Vue3 渲染器的作用 #

Vue3 渲染器的作用