项目地址文档数据双向绑定Vue主流程走向组件nextTick异步更新MVVM先来科普一下MVVM的概念及原理配套插件mini-vuex实现一个迷你版的vue实现的功能全局方法// 继承MiniVue 产生一个新的子类构造函数MiniVue.extend// 在实例化过程完成后运行MiniVue.nextTick// 注册自定义指令MiniVue.directive// 过滤器MiniVue.filter // 组件 包括slot propsMiniVue.component// 插件MiniVue.use// 混入MiniVue.mixinmixin filter component也可以局部注册 在new一个实例时提供以下选项即可filterscomponentsmixin实例方法vm.$watchvm.$setvm.$deletevm.$onvm.$oncevm.$offvm.$emitvm.$nextTick指令v-textv-htmlv-showv-ifv-elsev-forv-onv-bindv-model计算属性计算属性用法也和Vue一样生命周期initcreatedbeforeCompiledcompileddestroyed以上实现的功能用法和Vue一模一样如何阅读源码阅读源码要带有目的去看 不能毫无目的的去看源码 以免掉进无尽的细节陷阱中而出不来Vue源码要怎么看呢建议从一个Vue实例化的过程开始 一直跟踪这条主线 直到结尾为止(一定要打断点 debugger 我打了100多个断点才看懂主流程) 各种分枝暂时不要管 等把主线理解清楚了 细枝末节自然不在话下Vue1.0模块在Vue主线里和数据双向绑定有关的有以下几个模块Vue构造函数观察者observer观察者watcher指令系统 directive类和directives指令函数集合DOM解析compilewatcher与observer之间的联系者dep我们来看看他们之间的关系如果不是想自己实现一个mvvm框架 Vue的源码不用细读 只要明白主线的运行过程就行了 想要熟练使用Vue看官方文档即可想了解主线流程的 可以看看我的v0.1版本 300行代码 完整的实现了双向数据绑定的流程 还有3条指令的实现过程 其实其他的指令即使没实现 也没什么关系 主流程明白即可MiniVue v0.1学习Vue源码推荐看这篇文章