8 小时实现迷你版 vuejs

[lihongxun945]

最近断断续续在看 Vuejs 源码，版本是 V1.0，因为最开始看的时候 vue 还没出 v2 正式版 =。=

作者的代码功力很深厚，整个代码看起来非常优雅，对模块的组织和依赖的处理非常值得学习。在看的过程中觉得自己实现一个迷你版的 vue 应该不难，最近三天抽出时间一些时间就实现了一个，但实际上全部时间加起来大概就一整天。

代码地址： https://github.com/lihongxun945/tiny-vue

虽然是 mini 版，但是实现的功能并当然不是一篇博客能说清楚的，这里打算分六篇来详细讲解实现的过程。对于比较资深的工程师，完全可以直接看我的源码，如果有不理解的再回头看博客。对于新手，建议跟着博客一步步来。

tinyvue 虽然是绝大部分代码是完全重新写的，但是无论是文件、模块还是命名等都和原版的几乎一样，而代码量却减少了 90%以上，看懂 tinyvue 之后再去看 vue 原版代码会很容易上手。

动手造轮子要比光看的理解会深入的多。

要实现的功能

我们希望最终实现的效果是这样的：

<input v-model="message"/> <button v-on:click="increase">Increase</button>

<script> new Vue({ el: "#a", data: { message: 1 }, methods: { increase () { this.message += 1 } } }) </script>

明确一下我们要实现的功能，这也是 vuejs 最核心的两个功能：

1. 双向数据绑定，或者叫数据响应化
2. 指令的支持，以及常用的 v-on, v-model, v-text 等内建的指令

具体点来说，双向数据绑定其实需要实现如下几部分：

state observer directive 会复杂些，需要实现如下几个类：

1. Directive
2. Compile
3. Dep
4. Watcher
5. v-text, v-on, v-model 等几个内置的 directive

完整的代码参见： https://github.com/lihongxun945/tiny-vue 另外有非常详细的文章手把手教学： http://blog.csdn.net/lihongxun945/article/category/7259172