l1shu

Rollup的插件系统算是比较独立的模块，在源码中也只有三个核心文件，代码量在700行左右，相对比较容易上手学习。

Vue 的数据响应原理并非双向绑定，实际上是通过数据的改变去驱动 DOM 视图的变化，而双向绑定除了数据驱动 DOM 外， DOM 的变化反过来影响数据，是一个双向关系，在 Vue 中，我们可以通过 v-model 来实现双向绑定。 v-model 即可以作用在普通表单元素上，…

对于一个组件元素，我们不仅仅可以绑定原生的 DOM 事件，还可以绑定自定义事件，非常灵活和方便。那么接下来我们从源码角度来看看它的实现原理。 1. 编译 最后按照 name 对事件做归类，并把回调函数的字符串保留到对应的事件中。 对于有 modifiers 的情况，则对各种不同…

编译的最后一步就是把优化后的 AST 树转换成可执行的代码，这部分内容也比较多，了解整体流程即可。部分细节我们会在之后的章节配合一个具体 case 去详细讲。 这里的 _c 函数定义在 src/core/instance/render.js 中。 顾名思义，_c 就是执行 cr…

当我们的模板 template 经过 parse 过程后，会输出生成 AST 树，那么接下来我们需要对这颗树做优化。 为什么要有优化过程，因为我们知道 Vue 是数据驱动，是响应式的，但是我们的模板并不是所有数据都是响应式的，也有很多数据是首次渲染后就永远不会变化的，那么这部分…

编译过程首先就是对模板做解析，生成 AST，它是一种抽象语法树，是对源代码的抽象语法结构的树状表现形式。在很多编译技术中，如 babel 编译 ES6 的代码都会先生成 AST。 parse 函数的代码很长，主要执行了 parseHTML 函数，目的是解析 HTML 模板。 1…

compile 函数在执行 createCompileToFunctionFn 的时候作为参数传入，它是 createCompiler 函数中定义的 compile 函数。 那么接下来的章节会去逐步分析这几个过程。 编译入口逻辑之所以这么绕，是因为 Vue.js 在不同的平台下…

我们在《响应式对象》一章简单介绍了 initProps 会调用 defineReactive 来设置响应式对象。本章来深入介绍 props 相关概念~ 1. 规范化 合并配置我们在组件化章节讲过，它主要就是处理我们定义组件的对象 option，然后挂载到组件的实例 this.$…

1. 介绍 当数据发生变化的时候，会触发 渲染watcher 的回调函数，进而执行组件的更新过程。 对于异步组件，则判断 asyncFactory 是否相同。 所以根据新旧 vnode 是否为 sameVnode，会走到不同的更新逻辑，我们先来说一下不同的情况。 2. 新旧vn…