言川的博客

目的最近断断续续在看Vuejs源码，版本是 V1.0，因为最开始看的时候vue还没出v2正式版 =。=作者的代码功力很深厚，整个代码看起来非常优雅，对模块的组织和依赖的处理非常值得学习。在看的过程中觉得自己实现一个迷你版的vue应该不难，最近三天抽出时间一些时间就实现了一个，但实际上全部时间加起来大概就一整天。代码地址：https://github.com/lihongxun945/tiny-vue

这一篇，我们要实现一个事件绑定的功能：<div @click=“sayHello”></div>那么为了实现这个功能，我们需要三步： 1. 实现 compileDirectives 方法, 可以从attrs中读取directive的配置，这里称之为 descriptor 2. 实现Directive类 3. 实现一个自定指令： v-on以 v-on 为例，如果碰到这样一个属性 v-on:cli

再贴一下之前的一张图： 我们已经实现了 Observer 和 Directive，并且自己实现了一个 v-on 的指令，那么再实现 Dep 和 Watcher 就完整了。这里的 dep.js 其实就是一个记录依赖关系的，他有一个内部的数组 subs 会把所有依赖的 watcher 记录在里面，然后 observer 在观察到数据改变的时候，就告诉dep，它会负责遍历 subs 并调用他们的 upd

我们来实现一个 v-text 指令，其实非常简单，只要在 update 的时候把获取的值写到 innerHTML 中就行了。export default { bind () { }, update (value) { const el = this.descriptor.el el.innerHTML = value } }是不是很简单。再实现一个 v-model 指

看代码就像看电影一样，不懂的时候觉得到处都是迷，觉得主角周围发生的事都好不可思议，看懂了之后就能发现一根清晰的主线剧情，或是亲情，或是爱情，或是复仇，或是为名为財。所有之前那些迷都豁然开朗。vuejs源码看下来也是，从3年前接触到vuejs开始，一直断断续续看了一些关于实现原理的文章，初看一堆概念：parser,compiler, observer, watcher 等等。每一部分都有复杂的细节实现

上一篇我们比较overview的讲了vuejs 的架构，从这一篇开始我们来自己动手实现一个vuejs。首先我们实现数据响应化，数据响应化的意思就是我们要能监听到任何数据变动。比如执行了 this.name = “Yao Ming” 之后，我们要能监听到这个改动。那么怎么实现呢？我们需要借助 ES5 提供的新特性 getter/setter。构造函数 和 初始化首先我们需要写一个 Vue 的构造函数，

什么是vuejs这里更多指的是 原版的vuejs的架构，当然tinyvue也是一样的。 我个人对vuejs的定义是：通过 directives 实现 data 和 DOM 的关联的一个框架。如果用一张图来定义大概是这样 更复杂点是这样的： 当然这里的data是广义的，包括初始化组件时传入的 data, props methods, computed 等一系列的方法和属性，把这些东西和D