vue源码分析之模版解析

一、模版解析的分析

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

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

3. 模版解析的关键过程：

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);
  }
}

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

node2Fragment: function (el) {
    var fragment = document.createDocumentFragment(),
      child;

    // 将原生节点拷贝到fragment
    while (child = el.firstChild) {
      fragment.appendChild(child);
    }

    return fragment;
}

5. 关于vue的源码分析，我在github上建立了一个项目，项目地址如下https://github.com/jiuchengTk279/vueSourceCode.git，欢迎大家访问下载，也希望可以多给予一些建议交流。