Vue源码解析

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

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

实现$mount

Vue.prototype.__patch__ = inBrowser ? patch : noop

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

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

全局API定义core/index

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

initLifecycle

vm._events

initEvents

vm._c

vm.$createElement

initRender

beforeCreate

initInjections

initProps

initMethods

initData

initComputed

initWatch

initState

vm._provided

initProvide

created

initMixin实现_initcore/instance/init.js

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

Vue构造函数定义core/instance/index.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

数组响应式

数据响应式

vm._render

vm.__patch__

vm._update

创建updateComponent

创建Watcher

mountComponent

nodeOpts节点操作

modules属性更新

createPatchFunction

同层比较：增、删、改

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

patch

虚拟DOM

'<div></div>'

运行时 runtime

<template></template>

预编译

将template-》render

作用

template -> ast

解析parse

标记静态节点

优化optimize

ast -> render function

生成generate

执行过程

v-if

v-for

v-model

重要内容

编译器

Vue