vue2源码-四、解析模板参数

解析模板参数

前言

在vue中，vue的初始化流程中，会做两件事：

状态初始化：实现数据的响应式

将数据挂载到页面上

因此后面就要实现将数据挂载到页面上。
export function initMixin(Vue) {
  Vue.prototype._init = function (options) {
    const vm = this;
    vm.$options = options;
    
    // 1，状态初始化：实现数据劫持
    initState(vm);
    
    // 2，将数据挂载到页面上
    if (vm.$options.el) {
      // todo...
    }
  }
}
分析

在vue中，由于响应式数据的特性，当数据变化时，会触发视图更新。在写vue页面时，会大量使用到{{xxx}}插值表达式、Vue指令等等。

当数据变化时，vue并不会对整个视图全部重新渲染一遍，毕竟那样做性能太低了，也太笨了。

vue会对新老节点进行对比，尽可能复用节点。

就会有几个步骤：

模板引擎性能差异需要正则匹配替换

采用虚拟DOM，数据变化后比较虚拟DOM的差异，最后核心需要更新的地方

核心就是我们需要将模板变成我们的JS代码，通过JS语法生成虚拟DOM
实现

看代码:
  Vue.prototype.$mount = function (el) {
    const vm = this
    el = document.querySelector(el)
    let ops = vm.$options
    // 先进行查找有没有render函数
    if (!ops.render) {
      let template // 没有render看一下是否写了template，没有写template采用内部的template
      // 没有写模板但是写了el
      if (!ops.template && el) {
        template = el.outerHTML
      } else {
        if (el) {
          template = ops.template // 如果有el则采用模板的内容
        }
      }
      // 写了template就用写了的template
      if (template) {
        // 编译
        const render = complileToFunction(template)
        ops.render = render // jsx最终编译成h('xxx')
      }
    }
    mountComponent(vm, el) // 挂载组件
    // script 标签引用的vue.global.js 这个变异过程是在浏览器运行的
    // runtime是不包含模板编译的，整个变异是打包的时候通过loader来转义.vue文件的，用runtime的时候不能使用template
  }
首先获取到模板，然后需要对模板进行编译：

也就是complileToFunction方法：主要是对模板进行编译，获得render函数

最后进行挂载组件，也就是mountComponent