霍春阳版

2023年08月30日

柏拉文

越努力，越幸运

一、实现

---

const patchElement = (n1, n2) => {
    const el = (n2.el = n1.el);
    const oldProps = n1.props;
    const newProps = n2.props;

    /**
     * @description: 更新 children
     */
    patchChildren(n1, n2, el, null);

    /**
     * @description: 更新 Props
     */
    patchProps(el, n2, oldProps, newProps);
};

二、测试

---

import { watch } from './reactivity/watch';
import { effect } from './reactivity/effect';
import { computed } from './reactivity/computed';
import { patchProp } from './runtime-core/patchProp';
import { jobQueue, flushJob } from './reactivity/scheduler';
import { createRenderer, Text, Comment } from './runtime-core/renderer';
import { reactive, shallowReactive, readonly } from './reactivity/reactive';

const renderOps = {
  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 data = reactive({ msg: 'Hello World' });

effect(() => {
  const vnode = {
    type: 'div',
    shapeFlag: 9,
    props: {
      id: 'id-div',
      style: {
        color: 'red'
      },
      class: 'class-div',
      onClick: [
        () => {
          console.log('1');
        },
        () => {
          console.log('2');
        }
      ]
    },
    children: [
      {
        type: 'h3',
        shapeFlag: 9,
        children: data.msg
      }
    ]
  };

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

setTimeout(() => {
  data.msg = 'Hello World 修改';
}, 3000);