霍春阳版

2023年08月30日

柏拉文

越努力，越幸运

一、实现

---

const processText = (n1, n2, container, anchor) => {
    if (n1 == null) {
      const el = (n2.el = hostCreateText(n2.children));
      hostInsert(el, container, anchor);
    } else {
      const el = (n2.el = n1.el);
      if (n2.children !== n1.children) {
        hostSetText(el, n2.children);
      }
    }
};

二、调试

---

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

effect(() => {
  const vnode = {
    type: Text,
    children: data.msg
  };

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

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