Vue源码解析

Vue

初始化流程

入口文件 platforms/web/entry-runtime-with-compiler.js

web运行时代码platforms/web/runtime/index

实现$mount

mountComponent执行首次渲染、更新core/instance/lifecycle.js

Vue.prototype.__patch__ = inBrowser ? patch : noop

全局API定义core/index

全局API实现src\\core\\global-api\\index.js

Vue构造函数定义core/instance/index.js

initMixin实现_initcore/instance/init.js

initLifecycle

vm.$parent/$root/$refs/$children

initEvents

vm._events

initRender

vm._c

vm.$createElement

beforeCreate

initInjections

initState

initProps

initMethods

initData

initComputed

initWatch

initProvide

vm._provided

created

renderMixin定义两个实例方法$nextTick和_rendersrc/core/instance/render.js

数据响应式

observe()返回一个Observer实例core/observer/index.js

Observer对象根据数据类型执行对应的响应化操作core/observer/index.js

defineReactive定义对象属性的getter/settercore/observer/index.js

Dep管理一组Watcher，Dep关联的值更新时通知其管理的Watcher更新core/observer/dep.js

Watcher监控一个表达式或关联一个组件更新函数，数值更新则指定回调或更新函数被调用src\\core\\observer\\watcher.js

数组响应式

数组方法打补丁core\\observer\\array.js

覆盖数组原型core\\observer\\index.js

数组响应式的特殊处理core\\observer\\index.js

依赖收集时特殊处理core\\observer\\index.js

虚拟DOM

mountComponent

创建updateComponent

vm._render

vm._update

vm.__patch__

创建Watcher

createPatchFunction

nodeOpts节点操作

modules属性更新

patch

同层比较：增、删、改

patchVnode：属性更新、文本更新、子节点更新

编译器

作用

运行时 runtime

'<div></div>'

预编译

<template></template>

将template-》render

执行过程

解析parse

template -> ast

优化optimize

标记静态节点

生成generate

ast -> render function

重要内容

v-if

v-for

v-model