vue源码之数据驱动 - 1.html模拟vue实现数据渲染

想要使用html实现和vue一样的数据渲染效果，首先需要知道vue实现数据渲染的大致思路：

  1. 获取需要渲染的 DOM 节点
  2. 获取需要渲染的数据data
  3. 将 DOM 节点和数据data相结合形成新的DOM
  4. 将新的DOM渲染到页面

 

下面来通过代码具体说明实现过程

<body>
    <div id="root">
        <div>
            <div>
                <p>{{name}} - {{age}}</p>
            </div>
        </div>
    </div>
</body>

 

js代码如下：

let rkuuohao = /\{\{(.+?)\}\}/g;

// 1. 获取DOM节点
let tmpNode = document.querySelector("#root")

// 2. 获取数据
let data = {
    name: 'zhou',
    age: 18
}
// 3. 循环渲染数据
function rendering(tmpNode, data) {
    let childNodes = tmpNode.childNodes
    for (let i = 0; i < childNodes.length; i++) {
        let type = childNodes[i].nodeType // 1 元素，3文本节点

        if (type === 3) {
            // 文本节点可以判断里面是否含有 {{}} 插值
            let txt = childNodes[i].nodeValue // 该属性只有文本节点才有效
            txt = txt.replace(rkuuohao, (_, g) => {
                let key = g.trim()
                let value = data[key]
                return value
            })
            childNodes[i].nodeValue = txt

        } else if (type === 1) {
            // 元素，考虑有没有子元素
            rendering(childNodes[i], data)
        }
    }
}

let parentNode = tmpNode.cloneNode(true) /// DOM可以直接使用克隆
rendering(parentNode, data)

// 4. 追加节点
root.parentNode.replaceChild(parentNode, root) // 此处到root为标签id

先看下效果：

渲染前：

 

渲染后：

 

数据已经正常显示到页面上啦～

 

从上面代码也可以看出还有很多问题，以后会慢慢完善。

下次将会对以下内容进行完善：

  1. Vue使用的是 虚拟DOM
  2. 只考虑了但属性，而Vue中大量使用了层级（ {{ child.name }} ）
  3. 代码没有整合

 

posted @ 2020-12-25 17:40  我若亦如风  阅读(293)  评论(0)    收藏  举报