vue源码分析之模版解析

小灰灰 2023-07-03 02:52 27阅读 0赞

#### 一、模版解析的分析 ####

1.  **模版解析**：对模版进行拆解分析。
2.  **模版解析的实现过程**：

*  将 `el` 的所有子节点取出, 添加到一个新建的文档 `fragment` 对象中
 *  对 `fragment` 中的所有层次子节点递归进行编译解析处理
    
     *  对大括号表达式文本节点进行解析
     *  对元素节点的指令属性进行解析
        
         *  事件指令解析
         *  一般指令解析
 *  将解析后的 `fragment` 添加到 `el` 中显示

1.  **模版解析的关键过程**：

function Compile(el, vm) { 
      // 保存vm
      this.$vm = vm;
      // 保存el元素
      this.$el = this.isElementNode(el) ? el : document.querySelector(el);
      // 如果el元素存在
      if (this.$el) { 
        // 1. 取出el中所有子节点, 封装在一个framgment对象中
        this.$fragment = this.node2Fragment(this.$el);
        // 2. 编译fragment中所有层次子节点
        this.init();
        // 3. 将fragment添加到el中
        this.$el.appendChild(this.$fragment);
      }
    }

1.  模版解析在挂载原型`prototype`上，通过`document.createDocumentFragment()`创建`fragment`对象，核心代码如下：

node2Fragment: function (el) { 
        var fragment = document.createDocumentFragment(),
          child;
    
        // 将原生节点拷贝到fragment
        while (child = el.firstChild) { 
          fragment.appendChild(child);
        }
    
        return fragment;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，27人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-router源码解析

码下载：[github.com/vuejs/vue-r…][github.com_vuejs_vue-r] 1. 简述 vue-router基于Vue组件化的概念...

末蓝、/ 2024年04月17日 13:59/ 0 赞/ 162 阅读

相关 vue源码分析之模版解析的一般指令

一、模版解析之一般指令的分析 1. 一般指令：在`vue`中是比较常见的，比如`v-text`、`v-html`等等的一般指令。 2. 模版解析之一般指令的实现过程：

- 日理万妓/ 2023年07月03日 03:16/ 0 赞/ 56 阅读

相关 vue源码分析之模版解析的事件指令

一、模版解析之事件指令的分析 1. 事件指令：在`vue`中是比较常见的，比如`v-on:click`等进行绑定点击事件。 2. 模版解析之事件指令的实现过程：

小咪咪/ 2023年07月03日 03:00/ 0 赞/ 35 阅读

相关 vue源码分析之模版解析的大括号表达式

一、模版解析之大括号表达式的分析 1. 大括号表达式：在`vue`中是比较常见的，通过双大括号`{ {}}`可以进行插值表达式的读取。 2. 模版解析之大括号表达式

忘是亡心i/ 2023年07月03日 02:55/ 0 赞/ 33 阅读

相关 vue源码分析之模版解析

一、模版解析的分析 1. 模版解析：对模版进行拆解分析。 2. 模版解析的实现过程：将 `el` 的所有子节点取出, 添加到一个新建的文档 `fragmen

小灰灰/ 2023年07月03日 02:52/ 0 赞/ 28 阅读

相关 Vue3源码 nextTick解析

![format_png][] > 定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM 看完是不是有一堆问号？我们从

╰+哭是因爲堅強的太久メ/ 2022年12月23日 07:24/ 0 赞/ 291 阅读

相关 Vue 源码解析

Vue 源码解析框架地址 [https://www.processon.com/view/link/5d1eb5a0e4b0fdb331d3798c\map][http

水深无声/ 2022年12月11日 11:27/ 0 赞/ 351 阅读

相关 Vue源码分析-模板解析

模板解析模板解析流程: 1. 将el的所有节点取出,放在文档碎片fragment对象中 2. 将fragment对象的所有子节点进行递归解析处理 3.

朱雀/ 2022年12月05日 00:44/ 0 赞/ 340 阅读

相关 Vue源码解析

[https://ustbhuangyi.github.io/vue-analysis/][https_ustbhuangyi.github.io_vue-analysis]

红太狼/ 2022年05月14日 04:40/ 0 赞/ 601 阅读

相关 Springboot 源码分析 —— refreshContext() 解析

文章目录 1 refreshContext()：解析配置文件，加载业务 \`bean\`，启动 \`tomcat\` 等 1-1 invokeBeanFact

快来打我*/ 2022年02月02日 13:25/ 0 赞/ 732 阅读