Vue-createElement源码解析

最新推荐文章于 2023-11-09 09:20:03 发布

敢问

最新推荐文章于 2023-11-09 09:20:03 发布

阅读量1k

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_41040445/article/details/114004062

版权

VUE 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

vue中 render函数实际上return 一个createElement函数

对createElement函数进行简单解析

<!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>Document</title>
</head>
<style>
    .textarea{
        width: 400px;
        height: 300px;
        resize: none;
    }
</style>
<body>
    <div id="app"></div>
    <script>
        var vDom = createElement('div',{
            class:"container"
        },[
            createElement("h2",{
                class:"item",
                style:"background:yellow"
            },'四大名著'),
            createElement("ul",{
                class:"item"
            },[
                createElement("li",{
                    class:"item"
                },'三国演义'),
                createElement("li",{
                    class:"item"
                },'水浒传'),
                createElement("li",{
                    class:"item"
                },'红楼梦'),
                createElement("li",{
                    class:"item"
                },['西游记'])
            ]),
            createElement('textarea',{
                class:'textarea',
                style:'line-height:20px;text-indent:15px',
                placeholder:'你最喜欢哪一部，并写出读后感'
            })
        ])

        function Element(type,props,children){
            this.type=type
            this.props = props
            this.children = children
        }
        function createElement(type,props,children) {
            return new Element(type,props,children)
        }
        function render(obj) {
            // 创建节点
            let el = document.createElement(obj.type)
            // 给相关的节点设置对应的属性
            for(let key in obj.props){
                console.log(key,'56')
                //console.log(el)
                el.setAttribute(key,obj.props[key])
            }
            if(Array.isArray(obj.children)){
                // 遍历创建子元素
                obj.children.forEach((child) => {
                    // 递归操作，如果当前的child不是文本，就继续进行递归操作，否则，渲染文本节点
                    child = child instanceof Element ? render(child) : document.createTextNode(child)
                     // 节点上树
                    el.appendChild(child)
                })
            }
            // 当前obj.children如果不是数组，是字符串，就当做文本进行渲染
            else if(typeof obj.children === 'string'){
                el.appendChild(document.createTextNode(obj.children))
            }
            return el
        }
        // 渲染节点
        function renderDom(el,target) {
            target.appendChild(el)
        }
        console.log(renderDom(render(vDom),document.getElementById("app")))
    </script>
</body>
</html>

敢问

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue-createElement源码解析

vue中 render函数实际上return 一个createElement函数对createElement函数进行简单解析<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con..
复制链接

扫一扫