深度学习Vue源码-模板编译原理

前言

此篇主要手写 Vue2.0 源码-模板编译原理

上一篇咱们主要介绍了 Vue 数据的响应式原理 对于中高级前端来说 响应式原理基本是面试 Vue 必考的源码基础类 如果不是很清楚的话基本就被 pass 了 那么今天咱们手写的模板编译原理也是 Vue 面试比较频繁的一个点 而且复杂程度是高于响应式原理的 里面主要涉及到 ast 以及大量正则匹配 大家学习完可以看着思维导图一起手写一遍加深印象哈

适用人群： 没时间去看官方源码或者看源码看的比较懵而不想去看的同学

---

正文

// Vue实例化
new Vue({
   
  el: "#app",
  data() {
   
    return {
   
      a: 111,
    };
  },
  // render(h) {
   
  //   return h('div',{id:'a'},'hello')
  // },
  // template:`<div id="a">hello</div>`
});

上面这段代码 大家一定不陌生 按照官网给出的生命周期图 咱们传入的 options 选项里面可以手动配置 template 或者是 render

注意一：平常开发中 我们使用的是不带编译版本的 Vue 版本（runtime-only）直接在 options 传入 template 选项 在开发环境报错

注意二：这里传入的 template 选项不要和.vue 文件里面的模板搞混淆了 vue 单文件组件的 template 是需要 vue-loader 进行处理的

我们传入的 el 或者 template 选项最后都会被解析成 render 函数 这样才能保持模板解析的一致性

1.模板编译入口

// src/init.js

import {
    initState } from "./state";
import {
    compileToFunctions } from "./compiler/index";
export function initMixin(Vue) {
   
  Vue.prototype._init = function (options) {
   
    const vm = this;
    // 这里的this代表调用_init方法的对象(实例对象)
    //  this.$options就是用户new Vue的时候传入的属性
    vm.$options = options;
    // 初始化状态
    initState(vm);

    // 如果有el属性 进行模板渲染
    if (vm.$options.el) {
   
      vm.$mount(vm.$options.el);
    }
  };

  // 这块代码在源码里面的位置其实是放在entry-runtime-with-compiler.js里面
  // 代表的是Vue源码里面包含了compile编译功能 这个和runtime-only版本需要区分开
  Vue.prototype.$mount = function (el) {
   
    const vm = this;
    const options = vm.$options;
    el = document.querySelector(el);

    // 如果不存在render属性
    if (!options.render) {
   
      // 如果存在template属性
      let template = options.template;

      if (!template && el) {
   
        // 如果不存在render和template 但是存在el属性 直接将模板赋值到el所在的外层html结构（就是el本身 并不是父元素）
        template = el.outerHTML;
      }

      // 最终需要把tempalte模板转化成render函数
      if (template) {
   
        const render = compileToFunctions(template);
        options.render = render;
      }
    }
  };
}

咱们主要关心$mount 方法 最终将处理好的 template 模板转成 render 函数

相关vue源码视频讲解：进入学习

2.模板转化核心方法 compileToFunctions

// src/compiler/index.js

import {
    parse } from "./parse";
import {
    generate } from "./codegen";
export function compileToFunctions(template) {
   
  // 我们需要把html字符串变成render函数
  // 1.把html代码转成ast语法树  ast用来描述代码本身形成树结构 不仅可以描述html 也能描述css以及js语法
  // 很多库都运用到了ast 比如 webpack babel eslint等等
  let ast = parse(template);
  // 2.优化静态节点
  // 这个有兴趣的可以去看源码  不影响核心功能就不实现了
  //   if (options.optimize !== false) {
   
  //     optimize(ast, options);
  //   }

  // 3.通过ast 重新生成代码
  // 我们最后生成的代码需要和render函数一样
  // 类似_c('div',{id:"app"},_c('div',undefined,_v("hello"+_s(name)),_c('span',undefined,_v("world"))))
  // _c代表创建元素 _v代表创建文本 _s代表文Json.stringify--把对象解析成文本
  let code = generate(ast)