vue模板编译

最新推荐文章于 2024-02-13 23:11:35 发布

carly_ssj

最新推荐文章于 2024-02-13 23:11:35 发布

阅读量156

点赞数

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

本文链接：https://blog.csdn.net/carly_ssj/article/details/108208112

版权

本文深入探讨Vue.js的模板编译过程，从模板到渲染函数的转换，涉及虚拟DOM、指令处理、条件与循环、组件编译等方面，揭示Vue如何高效地实现视图更新。

摘要由CSDN通过智能技术生成

  /* 正则 */
    let regular = /\{\{(.+?)}\}/g;
    function compile(template, data) {
   
        //查找模板下的所有子元素
        let childNodes = template.childNodes;
        for (let i = 0; i < childNodes.length; i++) {
   
            //查找子元素节点类型 1=== 元素  3===文本
            let type = childNodes[i].nodeType
            //判断 3 文本
            if (type === 3) {
   
                //文本子节点的值
                let textContent = childNodes[i].nodeValue // {
   {xxxxxxx}}
                //进行替换
                let text = textContent.replace(regular, (_, g) => {
   
                    let path = g.trim() // name age love 
                    let value = valueBypath(data, path) //赋值
                    return value
                })
                //dom和值关联
                childNodes[i].nodeValue = text
            } else if (type === 1) {
   
                //如果type 是 1
                compile(childNodes[i], data)
            }
        }
    }
    //xxx.xxx.xxx 格式  
    function valueBypath(obj