vue深入解析之render function code详解

前言

最近在深入的学习研究vue，其实vue在使用上入门并没有什么太高的门槛，但前端同学们也不该仅仅停留在使用上。以 vue 设计、编码之优秀，足当抽丝剥茧，扒开它的外壳，深入其原理。让我们一起来刺破 vue 的心脏，下面话不多说了，来一起看看详细的介绍吧。

vue核心执行过程图

vue核心的执行过程主要分为这几个阶段：

      1） 编译模板，生成可复用的render function code(这是今天要重点解读的)，这一步在vue实例的整个生命周期中只会执行一次甚至零次，因为我们可以在打包的时候可以预编译

      2） 生成watcher等核心渲染监听，在整个vue实例的生命过程中持续发生着作用，对view和modal进行双向绑定

      3） 虚拟dom的diff比较，当watcher监听到data的变更的时候，就会根据注入新的data执行render function code，生成新的虚拟dom，跟老的虚拟dom（第一次执行的时候可能为空）进行diff比对，不同的部分将写入真实的dom

这几个过程都会以源码解析的方式分篇解读，今天我们重点讲解的是第一部分模板编译中输出的render function code

render function code解析

一、模板编译过程分解

// 生成ast语法树
const ast = parse(template.trim(), options)
// 标记静态内容（以免diff的时候需要重复比较）
optimize(ast, options)
// 生成render function code
const code = generate(ast, options)

很遗憾，上诉三步的代码今天都只是点到为止，不需要太努力，就能在网上搜到相关解析的文章，如果实在找不到同时又感兴趣，可以找到vue源码中的下面文件去读：

// 编译入口
src/compiller/index.js
// html解析
src/compiller/parser/html-parser.js
// src/compiller下的其它文件

换一个姿势读源码，今天我们要读的是

generate(ast, options)

二、写一个 vue demo

之前有提到过，读源码需要先了解整体的设计思想、架构，上面那个执行过程图在此列；另外，搭建一个demo执行环境进行debug单步调试，也是一个重要手段（特别是你对源码的目录结构不是特别清晰的时候）。为了让生成的render function code更为完整，写一个覆盖面尽量广的 demo :

//template
 <div id="app">
  <p>普通属性：{{ message }}</p>
  <p>{{msg()}}</p>								 
 1/3    1 2 3 下一页 尾页