前言 此篇主要手写 Vue2.0 源码-组件原理 上一篇咱们主要介绍了 Vue diff 算法原理 是对渲染更新的优化 大家都知道 Vue 的一大特色就是组件化 此篇主要介绍整个组件创建和渲染流程

手写 Vue 2 系列 之 编译器，基于 lyn-vue (Vue1) 直接进行升级，从字符串模版解析开始，到最终得到 `render` 函数。

先正式讲解之前先看一张来自Vue官网的实例生命周期图。 由图中可知，当我们实例化一个Vue对象并完成初始化后，Vue会检查el和template属性，以获取模板字符串。然后将得到的模板编译成render函数。 只有当template未指定时，vue才会以所制定的el元素的out…

先简单介绍一下编译原理的基本知识。众所周知，基本所有的现代编译器，整个编译过程可以分为三个阶段：Parsing(解析)、 Transformation(转换)、Code Generation(代码生成) 简单介绍了编译器的基本知识后，接下来我们编写一个简单的Html字符串模板编…

最近在业务开发过程中，发现了之前使用不是很多的Vue功能-自定义指令，实现了部分元素逻辑的抽象复用。这里对其进行了简单的分析整理。 注意，若Vue.directive第二个参数未传入数据，则根据指令名称返回已注册的指令。 注册完毕后，可以直接在元素上添加v-focus来使用。 …

本文从最短编辑距离问题的动态规划思路出发，通过分治思想理解snabbdom源码中diff实现的原理，此外还简单分析了snabbdom中patch、createElm和updateChildren等方法

然后还要去创建Compiler对象，它的作用是解析指令，差值表达式，在页面首次加载的时候，会调用Compiler中的相关方法去更新视图，同时在Compiler还要去订阅数据的变化，绑定更新函数，当创建一个Watcher对象的时候，需要传递一个回调函数，在这个回调函数中去更新视图…

这个操作看起来很简单，就是过滤要展示的列表，但是官方是不推荐这么写的，官方链接。 官方给出了两点原因： 哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。 通过上文的描述，大概是懂了，嗯。。。但是看完还是不知所以然。 我们可以做…

上面的写法告诉 vue，我需要监听 someProp 属性的变化，于是 vue 在内部就会为我们创建一个 watcher 对象。（限于篇幅，我们不聊 watcher 的具体实现，感兴趣的可以直接看源码 watcher）