// 从 Vue 中解构出 createRenderer 和 h 函数
    const { createRenderer, h } = Vue;

    // 1. 创建自定义渲染器：传入平台渲染配置对象
    const renderer = createRenderer({
      // 创建元素节点：根据标签名创建 DOM 元素
      createElement(tag) {
        console.log(`[渲染步骤] 创建元素节点：`);
        return document.createElement(tag);
      },

      // 更新元素属性：核心改造！支持普通属性 + 事件绑定（onXXX 格式）
      patchProp(el, key, prevValue, nextValue) {
        // 判断是否是事件属性（以 on 开头，且第二个字母大写，如 onClick、onInput）
        const isEvent = key.startsWith('on') && /^on[A-Z]/.test(key);
        
        if (isEvent) {
          // 提取事件名（去掉 on 前缀，转为小写，如 onClick -> click）
          const eventName = key.slice(2).toLowerCase();
          
          // 移除旧的事件监听（如果有旧值）
          if (prevValue) {
            el.removeEventListener(eventName, prevValue);
          }
          
          // 绑定新的事件监听（如果有新值）
          if (nextValue) {
            el.addEventListener(eventName, nextValue);
            console.log(`[渲染步骤] 绑定事件：${eventName}，回调函数已挂载`);
          }
        } else {
          // 普通属性：直接用 setAttribute 处理
          if (nextValue === undefined || nextValue === null) {
            el.removeAttribute(key);
            console.log(`[渲染步骤] 移除普通属性：${key}`);
          } else {
            el.setAttribute(key, nextValue);
            console.log(`[渲染步骤] 更新普通属性：${key} = ${nextValue}`);
          }
        }
      },

      // 插入元素：将子元素插入到父元素的指定位置
      insert(el, parent, anchor) {
        console.log(`[渲染步骤] 插入元素：将  插入到 `);
        parent.insertBefore(el, anchor || null);
      },

      // 移除元素：从父节点中移除当前元素
      remove(el) {
        console.log(`[渲染步骤] 移除元素：`);
        el.parentNode.removeChild(el);
      },

      // 创建文本节点：创建 DOM 文本节点
      createText(text) {
        console.log(`[渲染步骤] 创建文本节点：${text}`);
        return document.createTextNode(text);
      },

      // 更新文本节点：修改文本节点的内容
      setText(node, text) {
        console.log(`[渲染步骤] 更新文本节点：${node.nodeValue} → ${text}`);
        node.nodeValue = text;
      }
    });

    // 2. 获取挂载容器
    const app = document.getElementById('app');

    // 3. 初始虚拟节点（无事件）
    const vnode1 = h('div', { title: '初始节点' }, 'Hello initial vnode');

    // 4. 1秒后更新的虚拟节点（带 onClick 事件）
    const vnode2 = h(
      'div',
      {
        onClick() {
          console.log('更新了！点击事件触发成功～');
        },
        title: '更新后节点（带点击事件）' // 同时更新普通属性
      },
      'hello world'
    );

    // 5. 先渲染初始虚拟节点
    renderer.render(vnode1, app);

    // 6. 1秒后更新虚拟节点，触发 patchProp 处理事件和属性更新
    setTimeout(() => {
      console.log('==== 开始更新虚拟节点 ====');
      renderer.render(vnode2, app);
    }, 1000);
  

const { createRenderer, h } = Vue;

const renderer = createRenderer({ /* 渲染配置对象 */ });

// 2. 获取挂载容器
const app = document.getElementById('app');

// 3. 初始虚拟节点（无事件）
const vnode1 = h('div', { title: '初始节点' }, 'Hello initial vnode');

// 4. 1秒后更新的虚拟节点（带 onClick 事件）
const vnode2 = h(
  'div',
  {
    onClick() {
      console.log('更新了！点击事件触发成功～');
    },
    title: '更新后节点（带点击事件）' // 同时更新普通属性
  },
  'hello world'
);

// 5. 先渲染初始虚拟节点
renderer.render(vnode1, app);

// 6. 1秒后更新虚拟节点，触发 patchProp 处理事件和属性更新
setTimeout(() => {
  console.log('==== 开始更新虚拟节点 ====');
  renderer.render(vnode2, app);
}, 1000);