21天学会写个仿Vue3的轮子：（二）第一次渲染虚拟树__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

原生js的痛

假设我们要删除bar节点，无脑的办法就是分别找到bar和父节点。

<div id='foo'>
  <span id='bar'>aaa</span>
  <span id='baz'>bbb</span>
</div>

var foo = document.getElementById('foo')
var bar = document.getElementById('bar')
foo.removeChild(bar)

但是为了删除一个节点，我们还得先找到节点的爸爸是谁，才能把它干掉。每次删除都要进行“找爸爸”这种重复劳动。

<div>
  <span>count: 0</span>
</div>

其次，没有数据绑定，count的值变化了，可能每次都还得手动选中节点更新。

最后往往业务逻辑里，混杂了一大堆DOM API的操作。

为了解决以上痛点，你能想到哪些方案？

比如，原生js的api设计的不太合理，名字又臭又长，经常重复操作DOM的话，把api改漂亮点能省不少事。

嗯jQuery也是这么想的。

但是这没从根本上解决，数据层和视图层的鸿沟，数据层变化了得手动更新视图层的问题。

进一步想，为什么不做一个，语法接近HTML的模板语言以及对应的Compiler呢，发明几个指令（directive）来指示此处该与对应数据绑定？

// 假设有个data object存着count
const data = {
  count: 0
}

// 模板
<div>
  <span id='count'>count: {{ data.count }}</span>
</div>

将模板输入到Compiler里，当解析到，Compiler发现有特殊指令{{ }}(双花括号)的存在，就知道这里有需要绑定的数据，立刻监视data.count。

一旦data.count发生了改变，就更新这个

用伪代码近似表示下：

// 第一个参数监视数据，当数据变化，第二个callback就会执行，更新视图层的dom元素
watch(data.count, (el, data)=>{el.innerHTML = data.count})

这样，不管count变化多少次，我们只用关心data.count本身，而不用再手动写document.getElementById('count')之类的，直接操作DOM的代码。

好了，你想出来的这个模板 + 指令 + 监视数据, 更新DOM的方案，就很接近Vue1.x的思路了。

另一种脑洞

还有另一种方案，是比较难想到的，所以我比较佩服react作者的脑洞，那就是抽象出个Virtual DOM。

你不是说DOM操作起来繁琐，而且和数据分离开了吗？那你就当它不存在吧。

框架的用户只用和虚拟DOM打交道，剩下的事情交给框架。

具体来说，我们可以用javascript里的Object重新建立一个树形的数据结构，把DOM的信息进行抽象和存储，变成了由一个个Virtual Node组成的Virtual Tree。

一个dom元素无非有以下信息：

// div is a tag
// id is a prop
// span element is a child of div
<div id='foo'>
  <span> 0 </span>
</div>

所以设计对应以上结构的vnode的话，我们可以先简单的设计三个属性，type，props，children

const vnode = {
  type: 'div',
  props: {id: 'foo'},
  children: [
    type: 'span',
    props: null,
    children: data.count  // count is 0 now
  ]
}

因为vnode本身就是原生js构造的，所以我们可以在js里写vnode。

然后框架负责把vnode渲染成真正的DOM到页面。

// <div id='foo'>
//      <span>data.count</span>
// </div>
render() {
  // will return one root vnode
  return createVNode('div', {id: 'foo'}, [
    createVNode('span', {}, data.count)
  ]);
}

这样我们就完全不用触碰真实的DOM，不用手动调用DOM API。

完全可以在render function里创建vnode描述视图，然后框架根据render function里的vnode进行最终真实DOM的生成。

当然，为了更新数据时也能自动更新视图，框架需要提供一个特殊的函数，就叫他setState吧。它特殊在每次被调用，就会通知render()。

// change count to 1
setState({
    data.count: 1
});

用户保证更改数据时用setState更改，这样才能确保数据变化后会再次调用render()。

从而根据新的数据重新生成新的vnode，然后比较新旧vnode，更新真实DOM。

这个方案可以说是最早React的思路。真的是脑洞大开，把HTML视图层抽象到了javascript里，用户只用和vnode打交道，剩下的交给react。

融合

Vue1.0那样，在模板里，每个数据都进行一次绑定，细粒度太细了。

如果Web App复杂点，每个数据都进行watch，可能占用的内存会很大。

另外，将DOM用js object进行一次抽象，生成vnode tree确实好处很大，比如可以跨平台。

业务逻辑上写vnode，在不同平台，只需把框架的渲染器（renderer)稍微订制下，就可以在不同平台渲染了（理想都很丰满~）。

综上，从vue2.x开始，就引入了虚拟dom概念，并且更新也是以组件为单位进行更新。

在组件的render function中定义了这个组件包含的vnode。

下面这段代码其实就比较接近Vue模板被编译后，生成的render函数写法。

// h is createVNode actually
import h from 'balbalabla...';

const simpleComponent = {
  data() {
    return {
      count: 0
    }
  },
  render() {
    return h('div', {id: 'foo'}, [
      h('span', {}, data.count)
    ]);
  }
}

虽然大部分时候写Vue，都是写模板居多。其实模板里的组件编译后，都会变成这样一个个带render function的组件。

我们今天的目标就是写个hello world，并且渲染到页面上。

第一次渲染

要渲染的例子在playground/main.js下面，并且我已经把今天完成的代码，作为新的branch（02），上传到了github(https://github.com/yangjiang3973/vheel) 上了：

import { createApp, createVNode as h } from '../packages/runtime-dom/src/index';

const app = createApp({
  data() {
    return {
      title: 'Hello world!',
    };  
  },
  render() {
    // <div>
    //     <span>“Hello world!”</span>
    // </div>
    // equivalence vnode:
    return h('div', null, [h('span', null, [this.title])]);
  },
});

app.mount('#app');

如果你想跟着文章的思路一起写，把repo的上个branch（我只搭好了环境）clone到本地，然后npm install一下。

就可以直接在里面写了。写好了npm run dev可以在浏览器里渲染出Hello world！

开始写前我们要先理下思路，需要实现哪些函数到我们的轮子里。

我们创建vnode需要一个createVNode函数（简写为h），用在组件的render function里，来描述这个组件的样子。
组件最终返回根vnode，需要从该vnode出发，创建出真实的DOM子树
将该生成的DOM tree插入到页面, 也就是app.mount('#app')中选中的id为"app"的节点。在这里插入。

我在index.html里已经预先写好了HTML：

<body>
  <div id="app">  
    /*insert into here*/
  </div>
</body>

这是个仿Vue3的轮子，所以能模仿Vue的api我都是尽量起一样的名字，方便读者看Vue3源码的时候熟悉点。

我们先在packages下面创建个runtime-dom文件夹，开始写入口函数createApp。(以后文件结构不再重复解释，直接看我在github上传的repo)

// packages/runtime-dom/src/index.ts
export const createApp = (rootComponent) => {
  const app = {
    _component: rootComponent,
  };
  //* here to add mount method
  app.mount = (containerOrSelector) => {
    // just make sure the container passed in is valid
    const container = normalizeContainer(containerOrSelector);
    if (!container) return;
    const component = app._component;
    // build a virtual node for this component
    const vnode = createVNode(component);
    render(vnode, container);
    };
    return app;
};


function normalizeContainer(container) {
  if (isString(container)) {
    const res = document.querySelector(container);
    if (!res && __DEV__) {
      console.error('Cannot find the target container');
    }
    return res;
  }
}

目前入口很简单，只要创建个app对象，保存传入的根组件，并且挂上mount方法。

重要的是mount方法，负责生成vnode，渲染到页面。所以需要再分别实现createVNode，render这两个方法。

创建VNode

抽象出来的的，通用的vnode相关的代码，放在另外个runtime-core文件夹下。

我们先来写createVNode, 目前阶段逻辑非常简单。

我们只要创建vnode然后返回就行，注意的是，除了type，props和children，我还额外添加了两个属性。

随着后面继续开发vnode的属性会越来越多。

export function createVNode(type, props?, children?) {
  const vnode: VNode = {
    __v_isVNode: true,
    type,
    props,
    children,
    el: null,
  };
  return vnode;
}

渲染器

注意，我之前提过的render，是组件的里render，用户在这个约定好的地方定义vnode。

而此处我说的render是框架的渲染器的render，负责将用户在组件里声明的vnode渲染到真实DOM里去。

渲染有两种情况：

第一次渲染，没有旧的vnode，只需根据新vnode创建DOM（mount）
后续数据变化引发的渲染，需要比较新旧vnode来更新DOM（update）

我们目前只关心第一种情况，所以patch的第一个参数为null。

export function render(vnode, container) {
  // first time mount, no oldVNode
  patch(null, vnode, container);  
}

function patch(oldVNode, newVNode, container) {
  // mount or update
}

patch怎么设计, 这得看看目前的vnode有哪些可能，分别是：

创建app时（createApp），把根组件作为对象传入createVNode, 所以vnode里type属性是个组件对象。
创建<div>或者, type是String类型。
Hello，Hello是个文字节点，在的vnode里它是children

最好把文字也单独变成一个vnode，type是Text，这样以后patch或者update更方便，都是vnode。

function patch(oldVNode, newVNode, container) {
  const { type } = newVNode;
  if (isObject(type)) {
    processComponent(oldVNode, newVNode, container);
  } else if (isString(type)) {
    processElement(oldVNode, newVNode, container);
  } else if (type === Text) {
    processText(oldVNode, newVNode, container);
  }
}

接下来我们开始处理今天最麻烦的根组件：processComponent。

目前只考虑第一次插入的情况，更新暂时不考虑，写个TODO flag占位。

// n1=oldVnode, n2=newVNode
function processComponent(n1, n2, container) {
  if (!n1) mountComponent(n2, container);
  // else {
  //     TODO:
  //     updateComponent(n1, n2);
  // }
}

在mountComponent主要需要做三件事情，

我们需要根据传入的组件vnode，来生成组件的实例。

在写Vue时，我们经常用到this.keyName来取data或者props，this就是指向这个实例。

setup这个实例，比如把data挂到实例上。
最后调用组件里的render方法，生成VNode subtree。

function mountComponent(compVNode, container) {
  // init component instance
  const instance = {
    type: compVNode.type,
    vnode: compVNode,
    data: {},
    proxy: {},
  };
  compVNode.component = instance;
  // setup component, such as props
  setupComponent(instance);
  // generate component's root vnode tree, then patch again
  setupRenderEffect(instance, compVNode, container);
}

如果你以前有使用Vue的经验，你肯定是直接通过this.count或者this.title来直接获取数据，

而不是this.data.title。

这是因为数据直接被挂在了instance上，方便使用。

这里就用Proxy来把数据代理到instance上。

暂时不了解Proxy不要紧，可以去MDN上看文档，也可以等下一篇重点用到Proxy的时候我再介绍。

function setupComponent(instance) {
  instance.proxy = new Proxy(instance, PublicInstanceProxyHandlers);
  
  const Component = instance.type;
  instance.render = Component.render || (() => {});
  if (isFunction(Component.data)) {
    const dataFn = Component.data;
    const data = dataFn.call(instance.proxy);
    instance.data = data;
  }
}


// simple proxy handler to access data on instance directly
const PublicInstanceProxyHandlers = {
  get: function (target, key) {
    if (hasOwn(target.data, key)) 
      return Reflect.get(target.data, key);
    },
};

mount Component的最后一步，就是调用组件的render，生成vnode。

function setupRenderEffect(instance, initialVNode, container) {
  const { proxy, render } = instance;
  const subTree = render.call(proxy);
  patch(null, subTree, container);
}

这里的subTree就是组件里，我们定义的根vnode。在要跑通的例子里，此处是包裹着的根节点

此时再次调用patch，对组件的vnode tree进行mount。

处理一般DOM Element

这种vnode属于我们在patch中设计的第二种情况。忘记了的回去重看patch。

处理一般的节点使用processElement, 同样只是mount，不管更新

function processElement(n1, n2, container) {
  if (!n1) mountElement(n2, container);
  // TODO:
  // else patchElement(n1,n2,container)
}

这里很清楚的表明，从虚拟DOM到真实DOM的创建，都是由框架干的活。

框架负责进行DOM API的调用来生成真实页面。

function mountElement(vnode, container) {
  const el = (vnode.el = document.createElement(vnode.type));
  if (vnode.children) {
    mountChildren(vnode.children, el);
  }
  container.appendChild(el);
}

一般的element如果有children，就递归式的再次调用patch，处理child。

这里有个特例，就是child是字符串。

比如Hello world中，“Hello world”会作为字符串类型的child。

我们需要把它重新生成一个type为Text类型的vnode，传入patch再进行mount。

function mountChildren(children, container) {
  for (let i = 0; i < children.length; i++) {
    let child = children[i];
    // TODO: should normalize all possible child types
    if (isString(child)) {
      child = createVNode(Text, null, child);
    }
    patch(null, child, container);
  }
}

此时进入patch函数里的第三种情况，处理文字节点。

function processText(n1, n2, container) {
  if (!n1) {
    n2.el = document.createTextNode(n2.children);
    container.append(n2.el);
  }
  // TODO:
  // else
}

以上就是第一次渲染的整个流程。

期间用到了一些helper function，比如 isString, isObject, hasOwn, isFunction。

我就不在主线内容里提这些函数是干嘛的了，看名字就知道。

这些常用的helper function放在packages/shared/src/index.ts里，不想自己写的，可以去github上看。

下一篇的任务是，让渲染出的内容可以变换，也就是自动把数据的变换更新到视图。

债见~

【首发在公众号：奔三程序员Club】

回到顶部