从头创建您自己的vue.js——第2部分(虚拟DOM基础)

公众号---人生代码

发布于 2020-09-23 14:39:48

6980

发布于 2020-09-23 14:39:48

文章被收录于专栏：人生代码人生代码

这是“从头创建自己的vuei .js”系列文章的第二部分，在这里我将介绍如何创建响应式框架(比如vuei .js)的基本原理。在第一部分中，我描述了我们需要的部分和要遵循的路线图。如果你还没有读过，我建议你在阅读这篇文章之前先读一下。

What is a virtual DOM?

?DOM文档对象模型,一个网站的HTML结构 ?VDOM =代表结构的副本

虚拟DOM是将实际DOM表示为JavaScript格式，在这种格式中操作它比在每次有变化时操作实际DOM更容易、成本更低。

如果您不想将DOm呈现给浏览器，而是呈现给一个字符串(当涉及到服务器端呈现时很方便)，那么它也很有用。

Virtual nodes

所以，虚拟DOM是由虚拟节点组成的，在我们将要编码的例子中，它看起来是这样的:

{
    tag: 'div',
    props: {
        class: 'container'
    },
    children: [
        {
            tag: 'h1',
            props: {},
            children: 'Hello World'
        },
        {
            tag: 'p',
            props: {},
            children: 'Lorem ipsum dolor sit amet.'
        }
    ]
}

上面的例子相当于这个HTML代码:

<div class="container">
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

所以一个虚拟节点的组成为:

An HTML tag as String
An Object of properties
A list of children than can either be:
- Another node
- A text (representing the content)

Virtual DOM skeleton

在我们的示例中，我们将不构建一个成熟的虚拟DOM“引擎”，但足以理解基础知识。

让我们看一下虚拟DOM的编码。我们将把所有未来的代码建立在以下几行之上。因此，创建一个包含以下内容的html文件:

<div id="app"></app>
<script>

    // Create virtual node
    function h(tag, props, children) {
        // Return the virtual node
    }

    // Mount a virtual node to the DOM
    function mount(vnode, container) {
        // Create the element
        // Set props
        // Handle children
        // Mount to the DOM
    }

    // Unmount a virtual node from the DOM
    function unmount(vnode) {
        // Unmount the virtual node
    }

    // Take 2 vnodes, compare & figure out what's the difference
    function patch(n1, n2) {
        // Case where the nodes are of the same tag
        // Case where the new vnode has string children
        // Case where the new vnode has an array of vnodes
        // Case where the nodes are of different tags
    }

    function render(message) {
        // Render a virtual node with a given message
    }

    // Create virtual nodes & render them below this line...
</script>

正如你所看到的，我们有五个不同的函数，它们都完成了创建和渲染虚拟DOM的任务:

h创建一个虚拟节点(但还没有将其挂载到实际的DOM)。我称它为h，因为它在vuy。js项目中也是这样叫的
mount将获取一个给定的虚拟节点并将其挂载到实际DOM中的一个给定容器中。对于第一个元素，这将是我们在文件最顶部创建的#app节点。
卸载将从父节点删除虚拟节点
到目前为止，patch是我们为VDOM编写的最大的函数。这是因为我们必须用递归的方式比较两个不同的节点并检查所有的差异(递归地对所有的子节点进行检查)。
render是render函数的简化版本。在我们的示例中，它使用内部给定的消息创建各种虚拟节点(稍后我们将对其进行更改，以演示我们的VDOM“引擎”的工作方式)。