目的
最近断断续续在看Vuejs源码,版本是 V1.0,因为最开始看的时候vue还没出v2正式版 =。=
作者的代码功力很深厚,整个代码看起来非常优雅,对模块的组织和依赖的处理非常值得学习。在看的过程中觉得自己实现一个迷你版的vue应该不难,最近三天抽出时间一些时间就实现了一个,但实际上全部时间加起来大概就一整天。
代码地址:https://github.com/lihongxun945/tiny-vue
虽然是mini版,但是实现的功能并当然不是一篇博客能说清楚的,这里打算分六篇来详细讲解实现的过程。对于比较资深的工程师,完全可以直接看我的源码,如果有不理解的再回头看博客。对于新手,建议跟着博客一步步来。
tinyvue 虽然是绝大部分代码是完全重新写的,但是无论是文件、模块还是命名等都和原版的几乎一样,而代码量却减少了90%以上,看懂tinyvue之后再去看vue原版代码会很容易上手。
动手造轮子要比光看的理解会深入的多。
要实现的功能
我们希望最终实现的效果是这样的:
<div id="a">
<input v-model="message" />
<button v-on:click="increase">Increase</button>
<p v-text="message"></p>
</div>
<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
后面几篇会从从如下几个方面来详细讲解:
vuejs 架构
实现数据响应化
实现Directive
实现Watcher 和 Dep
实现几个内置的directive