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