vue大括号里接受一个函数_vue源码探究（第四弹）

vue源码探究（第四弹）

结束了上一part的数据代理，这一部分主要讲讲vue的模板解析，感觉这个有点难理解，而且内容有点多，hhh。

模板解析

废话不多说，先从简单的入手。

按照之前的套路，先举一个例子 ：

<div id="test">
  <p>{
    {name}}</p>
</div>
<script type="text/javascript" src="js/mvvm/compile.js"></script>
<script type="text/javascript" src="js/mvvm/mvvm.js"></script>
<script type="text/javascript" src="js/mvvm/observer.js"></script>
<script type="text/javascript" src="js/mvvm/watcher.js"></script>
<script type="text/javascript">
  new MVVM({
    el: '#test',
    data: {
      name: '喵喵喵'
    }
  })
  // 这时候，我们的页面还是渲染出 喵喵喵
</script>

接下来讲讲内部的相关实现：

我们的MVVM中的构造函数中有什么东西，可以解析我们的模板呢？

// 创建一个用来编译模板的compile对象
this.$compile = new Compile(options.el || document.body, this)

什么是Compile？

一行一行注释着解读

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对象中
    // 这里的node2Fragment 就是将node -> 放入 Fragment中，documentFragment将node