Vue3源码学习之路-实现runtime-dom

createRenderer()

创建一个自定义渲染器。通过提供平台特定的节点创建以及更改 API,你可以在非 DOM 环境中也享受到 Vue 核心运行时的特性。

render

用于编程式地创建组件虚拟 DOM 树的函数。

h

创建虚拟 DOM 节点 (vnode)。

先实现基本功能,不考虑细节

使用示例

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <body>
    <div id="app">div>
    <script src="./runtime-dom.global.js">script>
    
    <script>
      const app = document.getElementById('app');
      const { createRenderer, h, render } = VueRuntimeDOM;

      // // 自定义渲染器,渲染虚拟DOM
      // const renderer = createRenderer({
      //   createElement(el) {
      //     return document.createElement(el);
      //   },
      //   setElementText(el, text) {
      //     el.innerHTML = text;
      //   },
      //   insert(el, container) {
      //     container.appendChild(el);
      //   },
      //   patchProp(el, key, prevValue, nextValue) {
      //     el[key] = nextValue;
      //   },
      // });

      // // h > 创建虚拟 DOM 节点 (vnode)
      // renderer.render(h('h1', { style: { color: 'pink' } }, 'hello world'), app);
      
      render(h('h1', { style: { color: 'pink' } }, 'hello world'), app);
    script>
  body>
html>

渲染器可以用不同的方法将虚拟DOM创建成真实DOM,那么我们只需要提供平台特定的节点创建以及更改 API就行了。

runtime-dom模块

新建目录:packages/runtime-dom,目录结构与之前实现的reactivity模块是一样的,此处省略很多行。。。

将当前调试模块更改为runtime-dom

"scripts": {
   "dev": "node scripts/dev.js runtime-dom -f global"
 },
npm run dev

DOM相关操作API

新建文件:packages/runtime-dom/src/nodeOps.ts

export const nodeOps = {
  // 插入
  insert(child, parent, anchor = null) {
    parent.insertBefore(child, anchor);
  },

  createElement(tagName) {
    return document.createElement(tagName);
  },

  createText(text) {
    return document.createTextNode(text);
  },

  // 移除
  remove(child) {
    const parentNode = child.parentNode;
    if (parentNode) {
      parentNode.removeChild(child);
    }
  },

  // 设置元素文本内容
  setElementText(el, text) {
    el.textContent = text;
  },

  setText(node, text) {
    node.nodeValue = text;
  },

  // 查询
  querySelector(selector) {
    return document.querySelector(selector);
  },

  parentNode(node) {
    return node.parentNode;
  },

  nextSibling(node) {
    return node.nextSibling;
  },
};

DOM属性操作API

packages/shared/src/index.ts

const onRE = /^on[^a-z]/;
export const isOn = (key: string) => onRE.test(key);

新建文件:packages/runtime-dom/src/patchProp.ts

import { isOn } from '@vue/shared';
import { patchAttr } from './modules/attrs';
import { patchClass } from './modules/class';
import { patchEvent } from './modules/events';
import { patchStyle } from './modules/style';

export function patchProp(el, key, prevValue, nextValue) {
  if (key === 'class') {
    // 类名
    patchClass(el, nextValue);
  } else if (key === 'style') {
    // 样式
    patchStyle(el, prevValue, nextValue);
  } else if (isOn(key)) {
    // 事件
    patchEvent(el, key, nextValue);
  } else {
    // 属性
    patchAttr();
  }
}

class类名操作

新建文件:packages/runtime-dom/src/modules/class.ts

export function patchClass(el, nextValue) {
  if (nextValue === null) {
    el.removeAttribute('class');
  } else {
    el.className = nextValue;
  }
}

style操作

新建文件:packages/runtime-dom/src/modules/style.ts

export function patchStyle(el, prevValue, nextValue = {}) {
  // 用新值覆盖
  for (const key in nextValue) {
    el.style[key] = nextValue[key];
  }

  // 移除不存在于新值中的旧值
  if (prevValue) {
    for (const key in prevValue) {
      if (!nextValue[key]) {
        el.style[key] = null;
      }
    }
  }
}

事件操作

事件操作,做了缓存,避免频繁卸载和添加事件,属于性能优化

新建文件:packages/runtime-dom/src/modules/events.ts

export function patchEvent(el, eventName, nextValue) {
  // vei = vue event invokers = vue事件调用
  const invokers = el._vei || (el._vei = {});

  // 是否绑定过事件
  const existingInvoker = invokers[eventName];

  if (nextValue && existingInvoker) {
    // 修改
    existingInvoker.value = nextValue;
  } else {
    let event = eventName.slice(2).toLowerCase();
    if (nextValue) {
      // 添加
      const invoker = (invokers[eventName] = createInvoker(nextValue));
      el.addEventListener(event, invoker);
    } else if (existingInvoker) {
      // 移除
      el.removeEventListener(event, existingInvoker);
      invokers[eventName] = undefined;
    }
  }
}

// 创建自定义事件
function createInvoker(initialValue) {
  const invoker = (e) => invoker.value(e);
  invoker.value = initialValue;

  return invoker;
}

runtime-core

Vue模块划分中,将createRenderer、h方法放在了runtime-core模块中

这里现将基本方法及文件创建出来,下次实现具体方法

创建模块runtime-core,与其他模块一样的目录结构,package.json可以参考Vue源码,这里省略很多行。。

创建:packages/runtime-core/src/renderer.ts

export function createRenderer(renderOptions) {
  const render = (vnode, container) => {};

  return { render };
}

创建:packages/runtime-core/src/h.ts

export function h() {
  
}

创建:packages/runtime-core/src/index.ts

export { createRenderer } from './renderer';
export { h } from './h';

packages/runtime-dom/src/index.ts

import { nodeOps } from './nodeOps';
import { patchProp } from './patchProp';
import { createRenderer } from '@vue/runtime-core';

const rendererOptions = Object.assign({ patchProp }, nodeOps);

export function render(vnode, container) {
  createRenderer(rendererOptions).render(vnode, container);
}

export * from '@vue/runtime-core';

你可能感兴趣的:(Vue3源码学习记录,学习,vue.js)