源码分析——01_template

小冰快跑

于 2021-01-28 20:19:20 发布

阅读量98

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_50365835/article/details/113245528

版权

template元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
//template中所有的内容都不会渲染到页面上
//所以在vue的组件模板中的内容，一开始浏览器不会解析
//其中的内容，最终是由vue来解析
    <template id="temp">
        <span>123</span>
        <img src="./xm.jpg" alt="">
    </template>
</body>
<script>
    var temp = document.querySelector("#temp")
    console.log(temp)//document-fragment  文档碎片
</script>
</html>

文档碎片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>达姆</li>
        <li>老张</li>
        <li>老付</li>
        <li>安妮</li>
    </ul>
</body>
<script>
    window.onload=function () {
        //拿到真实的ul dom节点
        var ulNode = document.querySelector("ul");
        //创建一个文档碎片
        var fragment = document.createDocumentFragment();
        //定义一个接收子节点的变量
        var child = null;

        //firstChild 会考虑文本节点的
        //会引起界面的重新渲染
        while (ulNode.firstChild){
            //剪切操作
            fragment.appendChild(ulNode.firstChild)
        }

        //dom树中将不会再有节点  而文档碎片中会塞入所有的ul的子节点

        //children 不包含节点的
        //进行大量的dom操作  且界面不会更新  提供了dom操作的性能
        Array.from(fragment.children).forEach((item)=>{
            //当前这一行代码 会不会引起界面的重新渲染?
            //不会!!!  因为这是一次文档碎片内部的操作 并不是真实dom树种的操作
            item.innerHTML = "尚硅谷-" + item.innerHTML;
        })

        //appendChild 让 fragment作为参数  最终追加到文档中的是fragment的子节点列表 而不是fragment本身
        //会引起界面的重新渲染
        ulNode.appendChild(fragment)
    }
</script>
</html>

进阶版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <template id="temp">
        <ul>
            <li>达姆</li>
            <li>老张</li>
            <li>老付</li>
            <li>安妮</li>
        </ul>
    </template>
</body>
<script>
    window.onload=function () {
        var temp = document.querySelector("#temp")
        var fragment = temp.content
        //firstChild 不会考虑文本节点
        Array.from(fragment.firstElementChild.children).forEach((item)=>{
            //当前这一行代码 会不会引起界面的重新渲染?
            //不会!!!  因为这是一次文档碎片内部的操作 并不是真实dom树种的操作
            item.innerHTML = "尚硅谷-" + item.innerHTML;
        })

        //appendChild 让 fragment作为参数  最终追加到文档中的是fragment的子节点列表 而不是fragment本身
        document.body.appendChild(fragment)
    }
</script>
</html>

小冰快跑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
源码分析——01_template

template元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>//template中所有的内容都不会渲染到页面上//所以在vue的组件模板中的内容，一开始浏览器不会解析//其中的内容，最终是由vue来解析 <template
复制链接

扫一扫