模拟实现

2023年09月11日

柏拉文

越努力，越幸运

一、实现

---

二、测试

---

const renderOps = {
  setText(el, text) {
    el.nodeValue = text;
  },
  createText(text) {
    return document.createTextNode(text);
  },
  createComment(comment) {
    return document.createComment(comment);
  },
  createElement(tag) {
    return document.createElement(tag);
  },
  setElementText(el, text) {
    el.textContent = text;
  },
  insert(el, parent, anchor = null) {
    parent.insertBefore(el, anchor);
  }
};

const renderer = createRenderer({ ...renderOps, patchProp });

const ChildComponent = {
  name: 'ChildComponent',
  setup(props, setupContext) {
    const a = reactive({
      b: 1,
      c: 2
    });
    const { slots } = setupContext;
    return () => {
      return {
        type: 'div',
        shapeFlag: 9,
        children: [
          {
            type: 'div',
            shapeFlag: 9,
            children: 'Child Component'
          },
          {
            type: 'div',
            shapeFlag: 9,
            children: [slots.default()]
          },
          {
            type: 'div',
            shapeFlag: 9,
            children: [slots.header()]
          },
          {
            type: 'div',
            shapeFlag: 9,
            children: [slots.body({ a: a })]
          }
        ]
      };
    };
  }
};

const AppComponent = {
  name: 'AppComponent',
  setup() {},
  render() {
    return {
      type: 'div',
      shapeFlag: 9,
      children: [
        {
          type: 'div',
          shapeFlag: 9,
          children: 'App Component'
        },
        {
          shapeFlag: 4,
          type: ChildComponent,
          children: {
            default() {
              return {
                type: 'div',
                shapeFlag: 9,
                children: 'default 插槽渲染内容'
              };
            },
            header() {
              return {
                type: 'div',
                shapeFlag: 9,
                children: 'header 具名插槽渲染内容'
              };
            },
            body(slotProps) {
              const { a } = slotProps;
              return {
                type: 'div',
                shapeFlag: 9,
                children: `body 作用域插槽中 子组件传递给父组件 的数据 ${a.b}`
              };
            }
          }
        }
      ]
    };
  }
};

const vnode = {
  shapeFlag: 4,
  type: AppComponent
};

renderer.render(vnode, document.querySelector('#app'));