04Vue源码剖析01

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

鲁迅说:我没说过。

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

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339