Vue源码剖析01
Vue 源码地址
文件结构
源码目录
调试
环境搭建
安装依赖：npm i
安装 rollup：npm i -g rollup
修改 dev 脚本，添加 sourcemap，package.json
// 加 sourceMap 调试的时候可以看到源码结构
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-
full-dev",
运行开发命令：npm run dev
引入前面创建的 vue.js，samples/commits/index.html
术语解释：
runtime：仅包含运行时，不包含编译器，体积较小，适合 Webpack 环境，平时开发时一般使用的是此版本
common：cjs规范，用于 Webpack1
esm：ES模块，用于 Webpack2+
umd: universal module definition，兼容cjs和amd，用于浏览器（今天使用的版本）
【注】：
整个路径下不要出现中文路径
安装依赖时，在下载 phantomjs 时会很慢，可以直接终止掉，不影响后面调试
入口
dev 脚本中 -c scripts/config.js 指明配置文件所在
参数 TARGET:web-full-dev 指明输出文件配置项，line:123
// Runtime+compiler development build (Browser)
{
'web-full-dev': {
entry: resolve('web/entry-runtime-with-compiler.js'), // 入口
dest: resolve('dist/vue.js'),// 目标文件
format: 'umd', // 输出规范
env: 'development',
alias: { he: './entity-decoder' },
banner,
},
}
初始化流程
整体流程
-
new Vue()
- _init()
-
$mount()
-
mountComponent()
-
updateComponent()
render()
update()
new Watcher()
-
-
生命周期图示
测试用例：01-init.html
入口 platforms/web/entry-runtime-with-compiler.js
扩展默认 $mount 方法
处理 template 或 el 选项
遇到测试代码直接折起来跳过即可
src/platforms/web/runtime/index.js
安装 Web 平台特有指令和组件
定义patch：补丁函数，执行 patching 算法进行更新
定义 $mount：挂载 Vue 实例到指定宿主元素（获得 dom 并替换宿主元素）
core/index.js
初始化全局api
具体如下：
Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick
initUse(Vue) // 实现Vue.use函数
initMixin(Vue) // 实现Vue.mixin函数
initExtend(Vue) // 实现Vue.extend函数
initAssetRegisters(Vue) // 注册实现Vue.component/directive/filter
core/instance/index.js
Vue 构造函数定义
定义 Vue 实例 API
function Vue (options) {
// 构造函数仅执行了_init
this._init(options)
}
initMixin(Vue) // 实现init函数
stateMixin(Vue) // 状态相关api $data,$props,$set,$delete,$watch
eventsMixin(Vue)// 事件相关api $on,$once,$off,$emit
lifecycleMixin(Vue) // 生命周期api _update,$forceUpdate,$destroy
renderMixin(Vue)// 渲染api _render,$nextTick
core/instance/init.js
创建组件实例，初始化其数据、属性、事件等
initLifecycle(vm) // $parent,$root,$children,$refs
initEvents(vm) // 处理父组件传递的事件和回调
initRender(vm) // $slots,$scopedSlots,_c,$createElement
callHook(vm, 'beforeCreate')
initInjections(vm) // 获取注入数据
initState(vm) // 初始化props，methods，data，computed，watch
initProvide(vm) // 提供数据注入
callHook(vm, 'created')
$mount
- mountComponent
执行挂载，获取vdom并转换为dom
- new Watcher()
创建组件渲染 watcher
- updateComponent()
执行初始化或更新
- update()
初始化或更新，将传入vdom转换为dom，初始化时执行的是dom创建操作
- render() src\core\instance\render.js
渲染组件，获取vdom
测试代码：examples\test\01-init.html
整体流程捋一捋
new Vue() => _init() => $mount() => mountComponent() =>
updateComponent() => new Watcher() => render() => _update()
思考一道相关面试题：谈谈vue生命周期?
概念：组件创建、更新和销毁过程
用途：生命周期钩子使我们可以在合适的时间做合适的事情
分类列举：
初始化阶段：beforeCreate、created、beforeMount、mounted
更新阶段：beforeUpdate、updated
销毁阶段：beforeDestroy、destroyed
应用：
created 时，所有数据准备就绪，适合做数据获取、赋值等数据操作
mounted时，$el 已生成，可以获取 dom；子组件也已挂载，可以访问它们
updated 时，数值变化已作用于 dom，可以获取 dom 最新状态
destroyed 时，组件实例已销毁，适合取消定时器等操作
数据响应式
数据响应式是 MVVM 框架的一大特点，通过某种策略可以感知数据的变化。Vue 中利用了 JS 语言特性 Object.defineProperty()，通过定义对象属性 getter/setter 拦截对属性的访问。
具体实现是在 Vue 初始化时，会调用 initState，它会初始化 data，props 等，这里着重关注 data 初始化
整体流程
initState (vm: Component) src\core\instance\state.js
初始化数据，包括 props、methods、data、computed 和 watch
initData 核心代码是将 data 数据响应化
function initData (vm: Component) {
// 执行数据响应化
observe(data, true /* asRootData */)
}
core/observer/index.js
observe 方法返回一个 Observer 实例
core/observer/index.js
Observer 对象根据数据类型执行对应的响应化操作
defineReactive 定义对象属性的 getter/setter，getter 负责添加依赖，setter 负责通知更新
core/observer/dep.js
Dep 负责管理一组 Watcher，包括 watcher 实例的增删及通知更新
Watcher
Watcher 解析一个表达式并收集依赖，当数值变化时触发回调函数，常用于 $watch API 和指令中。
每个组件也会有对应的 Watcher，数值变化会触发其 update 函数导致重新渲染
export default class Watcher {
constructor () {}
get () {}
addDep (dep: Dep) {}
update () {}
}
相关API： $watcher
测试代码 examples\test\02-1-reactive.html
数组响应化
数组数据变化的侦测跟对象不同，我们操作数组通常使用 push、pop、splice 等方法，此时没有办法得知数据变化。所以vue中采取的策略是拦截这些方法并通知 dep。
src\core\observer\array.js
为数组原型中的7个可以改变内容的方法定义拦截器 Observer 中覆盖数组原型
if (Array.isArray(value)) {
// 替换数组原型
protoAugment(value, arrayMethods) // value.__proto__ = arrayMethods
this.observeArray(value)
}
测试代码 examples\test\02-2-reactive-arr.html
相关API： Vue.set()/delete()
data: {
arr: []
}
arr.length = 0
arr[index] = xxx
Vue.set()
Vue.del()
总结
Vue 源码剖析的部分可能会比较乱，因为看源码太过于细枝末节的话，大概率会迷失在里面。尽量看其中的思想，以及某些可以借鉴的代码，比如最基本的响应式的 Object.defineProperty、编译时用到的 fragment 等等，项目中如果有需要了，恰好可以借鉴到，我觉得这才是学习源码正确的姿势。毕竟鲁迅曾经说过：不会应用的学习都是在耍流氓。
鲁迅说：我没说过。
最后附上我对这部分内容学习的一个简单的导图：