搭建环境

获取地址：GitHub - vuejs/vue: This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

安装依赖：npm i

安装 rollup：

npm i -g -rollup

修改dev脚本：添加 --sourcemap

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",

执行dev脚本：npm run dev

此处使用vue的版本是2.6

目录：

dist 发布目录 

examples 范例

flow 试代码 

node_modules

scripts 构建脚本

src 源码

  compiler 编译器相关

  core 核心代码

    components 通用组件如keep-alive

    global-api 全局api

    instance 构造函数等

    observer 响应式相关

    util 

    vdom 虚拟DOM相关

......

术语解释：

runtime 仅包含运行时，不包含编译器

common cjs规范，适用于webpack1

esm es模块，用于webpack2+

umd universal module definition，兼容cjs和amd，用于浏览器，一般使用的都是这个版本。

入口文件

-c scripts/config.js //配置文件所在

TARGET:web-full-dev" //指明输出文件配置项

能够通过config.js找到对应的entry入口文件

// 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},

所以默认是web开头的路径

const aliases = require('./alias')
const resolve = p => {const base = p.split('/')[0]if (aliases[base]) {return path.resolve(aliases[base], p.slice(base.length + 1))} else {return path.resolve(__dirname, '../', p)}
}

进入alias

module.exports = {vue: resolve('src/platforms/web/entry-runtime-with-compiler'),compiler: resolve('src/compiler'),core: resolve('src/core'),shared: resolve('src/shared'),web: resolve('src/platforms/web'),weex: resolve('src/platforms/weex'),server: resolve('src/server'),sfc: resolve('src/sfc')
}

找到了最终的路径

/Users/jerrychen/Desktop/vue-2.6/src/platforms/web/entry-runtime-with-compiler.js

//扩展$mount:解析模版
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (el?: string | Element, //宿主元素hydrating?: boolean
): Component {el = el && query(el) //获取真实dom......
}

 解析模版相关选项，首先判断是否有render函数，所以render的优先级很高，再看template，最后是el。如果写了el，则可以省略$mount。template或者render需要加上$mount。

//检测render函数
if (!options.render) {//再看templatelet template = options.template//解析templateif (template) {if (typeof template === 'string') {  //template:'#app' 选择器if (template.charAt(0) === '#') {template = idToTemplate(template)/* istanbul ignore if */if (process.env.NODE_ENV !== 'production' && !template) {warn(`Template element not found or is empty: ${options.template}`,this)}}} else if (template.nodeType) { //dom节点template = template.innerHTML} else {if (process.env.NODE_ENV !== 'production') {warn('invalid template option:' + template, this)}return this}} else if (el) { //最后一种情况查看el选项template = getOuterHTML(el)}//如何处理模版，编译渲染if (template) {/* istanbul ignore if */if (process.env.NODE_ENV !== 'production' && config.performance && mark) {mark('compile')}const { render, staticRenderFns } = compileToFunctions(template, {outputSourceRange: process.env.NODE_ENV !== 'production',shouldDecodeNewlines,shouldDecodeNewlinesForHref,delimiters: options.delimiters,comments: options.comments}, this)//重新赋值给我们的选项options.render = renderoptions.staticRenderFns = staticRenderFns/* istanbul ignore if */if (process.env.NODE_ENV !== 'production' && config.performance && mark) {mark('compile end')measure(`vue ${this._name} compile`, 'compile', 'compile end')}}}

Vue的路径

/Users/jerrychen/Desktop/vue-2.6/src/platforms/web/runtime/index.js

 安装平台patch函数，实现跨平台操作

实现$mount('#app')=>mountComponent 在内部render()=>vdom => patch()将虚拟dom转为真实dom=>dom，最后追加到宿主元素#app上。

// install platform patch function
//安装平台特有的补丁函数：用来做初始化和更新的
Vue.prototype.__patch__ = inBrowser ? patch : noop// public mount method
//实现 $mount：初始化的挂载
Vue.prototype.$mount = function (el?: string | Element,hydrating?: boolean
): Component {el = el && inBrowser ? query(el) : undefinedreturn mountComponent(this, el, hydrating)
}

/Users/jerrychen/Desktop/vue-2.6/src/core/index.js

初始化全局api

/Users/jerrychen/Desktop/vue-2.6/src/core/instance/index.js

vue构建函数，声明实例属性和方法

/Users/jerrychen/Desktop/vue-2.6/src/core/instance/init.js

//合并选项：new Vue时传入的是用户配置选项，他们要和系统配置合并if (options && options._isComponent) {// optimize internal component instantiation// since dynamic options merging is pretty slow, and none of the// internal component options needs special treatment.initInternalComponent(vm, options)} else {vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor),options || {},vm)}/* istanbul ignore else */if (process.env.NODE_ENV !== 'production') {initProxy(vm)} else {vm._renderProxy = vm}// expose real selfvm._self = vminitLifecycle(vm) //示例属性 $parent,$root,$chiltren $refsinitEvents(vm) //自定义事件的处理initRender(vm) //插槽，createElement函数callHook(vm, 'beforeCreate')//组件状态相关的数据操作initInjections(vm) // resolve injections before data/propsinitState(vm) //数据响应式 props，methods data copmputed watchinitProvide(vm) // resolve provide after data/propscallHook(vm, 'created')/* istanbul ignore if */if (process.env.NODE_ENV !== 'production' && config.performance && mark) {vm._name = formatComponentName(vm, false)mark(endTag)measure(`vue ${vm._name} init`, startTag, endTag)}//如果设置了el，则自动执行$mount()if (vm.$options.el) {vm.$mount(vm.$options.el)}

 初始化

/Users/jerrychen/Desktop/vue-2.6/src/core/instance/lifecycle.js

mountComponent()=>updateComponent()=>new Watcher()=>updateComponent()=>render()=>update()=>patch()

数据响应式

/Users/jerrychen/Desktop/vue-2.6/src/core/instance/state.js

 defineReactive

/Users/jerrychen/Desktop/vue-2.6/src/core/observer/index.js

export function defineReactive (obj: Object,key: string,val: any,customSetter?: ?Function,shallow?: boolean
) {//每个key对应一个depconst dep = new Dep()const property = Object.getOwnPropertyDescriptor(obj, key)if (property && property.configurable === false) {return}// cater for pre-defined getter/settersconst getter = property && property.getconst setter = property && property.setif ((!getter || setter) && arguments.length === 2) {val = obj[key]}let childOb = !shallow && observe(val)Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter () {const value = getter ? getter.call(obj) : valif (Dep.target) {//依赖收集：vue2中一个组件对应一个watcher//dep和watcher是n=>1的关系//如果用户自己手动创建watcher，比如使用watch选项或者this.$watch(key,cb)// dep 1=>ndep.depend()if (childOb) {//子ob也要做依赖收集childOb.dep.depend()if (Array.isArray(value)) {dependArray(value)}}}return value},set: function reactiveSetter (newVal) {const value = getter ? getter.call(obj) : val/* eslint-disable no-self-compare */if (newVal === value || (newVal !== newVal && value !== value)) {return}/* eslint-enable no-self-compare */if (process.env.NODE_ENV !== 'production' && customSetter) {customSetter()}// #7981: for accessor properties without setterif (getter && !setter) returnif (setter) {setter.call(obj, newVal)} else {val = newVal}childOb = !shallow && observe(newVal)dep.notify()}})
}

在收集依赖的过程中，使用depend方法

/Users/jerrychen/Desktop/vue-2.6/src/core/observer/dep.js

export default class Dep {static target: ?Watcher;id: number;subs: Array<Watcher>;constructor () {this.id = uid++this.subs = []}addSub (sub: Watcher) {this.subs.push(sub)}removeSub (sub: Watcher) {remove(this.subs, sub)}depend () {if (Dep.target) {//watcher的addDepDep.target.addDep(this)}}notify () {// stabilize the subscriber list firstconst subs = this.subs.slice()if (process.env.NODE_ENV !== 'production' && !config.async) {// subs aren't sorted in scheduler if not running async// we need to sort them now to make sure they fire in correct// ordersubs.sort((a, b) => a.id - b.id)}for (let i = 0, l = subs.length; i < l; i++) {subs[i].update()}}
}

同时也会出现多个watcher对应多个dep的情况，所以互相添加引用

/Users/jerrychen/Desktop/vue-2.6/src/core/observer/watcher.js

  addDep (dep: Dep) {const id = dep.id//相互添加引用if (!this.newDepIds.has(id)) {//watcher添加depthis.newDepIds.add(id)this.newDeps.push(dep)if (!this.depIds.has(id)) {// dep添加watcherdep.addSub(this)}}}

以此来达到相互更新通知