Vue源码剖析01

Vue 源码地址

文件结构

总体

源码目录

image.png

调试

环境搭建

• 安装依赖：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

<script src="../../dist/vue.js"></script>

术语解释：
runtime：仅包含运行时，不包含编译器，体积较小，适合 Webpack 环境，平时开发时一般使用的是此版本
common：cjs规范，用于 Webpack1
esm：ES模块，用于 Webpack2+
umd: universal module definition，兼容cjs和amd，用于浏览器（今天使用的版本）

【注】：

1. 整个路径下不要出现中文路径

2. 安装依赖时，在下载 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()

image.png

生命周期图示

测试用例：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生命周期?

概念：组件创建、更新和销毁过程

用途：生命周期钩子使我们可以在合适的时间做合适的事情

分类列举：

1. 初始化阶段：beforeCreate、created、beforeMount、mounted

2. 更新阶段：beforeUpdate、updated

3. 销毁阶段：beforeDestroy、destroyed

应用：

1. created 时，所有数据准备就绪，适合做数据获取、赋值等数据操作

2. mounted时，$el 已生成，可以获取 dom；子组件也已挂载，可以访问它们

3. updated 时，数值变化已作用于 dom，可以获取 dom 最新状态

4. 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 等等，项目中如果有需要了，恰好可以借鉴到，我觉得这才是学习源码正确的姿势。毕竟鲁迅曾经说过：不会应用的学习都是在耍流氓。

鲁迅说：我没说过。

最后附上我对这部分内容学习的一个简单的导图：

Vue源码剖析.png