对编译过程的了解会让我们对 Vue 的指令、内置组件等有更好的理解。不过由于编译的过程是一个相对复杂的过程，我们只要求理解整体的流程、输入和输出即可。

2020年即将到来,在众多前端的招聘要求里,webpack、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如vue-cli、create-react-app的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深…

笔者公司的前端小组掀起了Vue源码学习小组，前后几个月的共同学习，让小组成员都已经对Vue对大致框架有了个模糊对轮廓。 现在已经进入第二阶段：整理。 我们将小组分为四个部分，vue对整理也分为三个大模块：数据绑定、从template到vnode、vnode转化为dom对patc…

看vue源码已经有一段时间了，但是很多东西都是看的时候当时记住了，过段时间不去使用或者回顾又忘记了，所以现在开始以博客的方式写一下自己的理解，也方便后续自己的回顾。 让我们开始直入主题吧，在vue源码开始入口的entry-runtime-with-compiler.js文件中，…

1. 前言（需求） 就是想读取 *.vue 文件的源码并高亮展示到页面上，又不想用第三方的依赖（其实是找不到）。 2. 实现思路 通过 vue-loader 自定义块 功能，获取目标文件的文件路径，然后通过 fs 读取源码，再用 @vue/compiler-core 的 API…

前言 此篇主要手写 Vue2.0 源码-模板编译原理 上一篇咱们主要介绍了 Vue 数据的响应式原理 对于中高级前端来说 响应式原理基本是面试 Vue 必考的源码基础类

其中 compiler-core 模块是 Vue 编译的核心模块，并且是平台无关的。而剩下的三个都是在 compiler-core 的基础上针对不同的平台作了适配处理。 Vue 的编译分为三个阶段，分别是：parse、transform、codegen。 其中 parse 阶段…

模板编译流程是什么？ 1. 获取 outerHTML 2. 正则查找转义成 ast 语法树 3. ast 语法树转换成 render 字符串函数 4. 执行 redner 函数 生成 vnode 其实

初识模板编译 在此之前,我想表达一下我个人的观点, 之前尤大曾说过, “你们为什么要去读源码”, 这句话让人深思熟虑, 其实我的观点是,读源码的目的就是为了更深层的了解框架的设计,搞懂其设计原理, 而