浅谈vue的第一个commit分析

 ├── build │  └── build.js        // `rollup` 打包配置 ├── dist │  └── vue.js ├── package.json ├── src            // vue源码目录 │  ├── compiler        // 将vue-template转化为render函数 │  │  ├── codegen.js     // 递归ast提取指令，分类attr，style，class，并生成render函数 │  │  ├── html-parser.js   // 通过正则匹配将html字符串转化为ast │  │  ├── index.js      // compile主入口 │  │  └── text-parser.js   // 编译{{}} │  ├── config.js       // 对于vue的全局配置文件 │  ├── index.js        // 主入口 │  ├── index.umd.js      // 未知（应该是umd格式的主入口） │  ├── instance        // vue实例函数 │  │  └── index.js      // 包含了vue实例的初始化，compile，data代理，methods代理，watch数据，执行渲染 │  ├── observer        // 数据订阅发布的实现 │  │  ├── array.js      // 实现array变异方法，$set $remove 实现 │  │  ├── batcher.js     // watch执行队列的收集，执行 │  │  ├── dep.js       // 订阅中心实现 │  │  ├── index.js      // 数据劫持的实现，收集订阅者 │  │  └── watcher.js     // watch实现，订阅者 │  ├── util          // 工具函数 │  │  ├── component.js │  │  ├── debug.js │  │  ├── dom.js │  │  ├── env.js       // nexttick实现 │  │  ├── index.js │  │  ├── lang.js │  │  └── options.js │  └── vdom │    ├── dom.js       // dom操作的封装 │    ├── h.js        // 节点数据分析（元素节点，文本节点） │    ├── index.js      // vdom主入口 │    ├── modules      // 不同属性处理函数 │    │  ├── attrs.js    // 普通attr属性处理 │    │  ├── class.js    // class处理 │    │  ├── events.js   // event处理 │    │  ├── props.js    // props处理 │    │  └── style.js    // style处理 │    ├── patch.js      // node树的渲染，包括节点的加减更新处理，及对应attr的处理 │    └── vnode.js      // 返回最终的节点数据 └── webpack.config.js     // webpack配置 

 constructor (options) { // options就是我们对于vue的配置 this.$options = options this._data = options.data // 获取元素html，即template const el = this._el = document.querySelector(options.el) // 编译模板 -> render函数 const render = compile(getOuterHTML(el)) this._el.innerHTML = '' // 实例代理data数据 Object.keys(options.data).forEach(key => this._proxy(key)) // 将method的this指向实例 if (options.methods) { Object.keys(options.methods).forEach(key => { this[key] = options.methods[key].bind(this) }) } // 数据观察 this._ob = observe(options.data) this._watchers = [] // watch数据及更新 this._watcher = new Watcher(this, render, this._update) // 渲染函数 this._update(this._watcher.value) } 

 const render = compile(getOuterHTML(el)) 

 export function compile (html) { html = html.trim() // 对编译结果缓存 const hit = cache[html] // parse函数在parse-html中定义，其作用是把我们获取的html字符串通过正则匹配转化为ast，输出如下 {tag: 'div', attrs: {}, children: []} return hit || (cache[html] = generate(parse(html))) } 

 // 生成节点主函数 export function generate (ast) { const code = genElement(ast) // 执行code代码，并将this作为code的global对象。所以我们在template中的变量将指向为实例的属性 {{name}} -> this.name return new Function (`with (this) { return $[code]}`) } // 解析单个节点 -> genData function genElement (el, key) { let exp // 指令的实现，实际就是在模板编译时实现的 if (exp = getAttr(el, 'v-for')) { return genFor(el, exp) } else if (exp = getAttr(el, 'v-if')) { return genIf(el, exp) } else if (el.tag === 'template') { return genChildren(el) } else { // 分别为 tag 自身属性 子节点数据 return `__h__('${ el.tag }', ${ genData(el, key) }, ${ genChildren(el) })` } } 

 function genData (el, key) { // 没有属性返回空对象 if (!el.attrs.length) { return '{}' } // key let data = key ? `{key:${ key },` : `{` // class处理 if (el.attrsMap[':class'] || el.attrsMap['class']) { data += `class: _renderClass(${ el.attrsMap[':class'] }, "${ el.attrsMap['class'] || '' }"),` } // attrs let attrs = `attrs:{` let props = `props:{` let hasAttrs = false let hasProps = false for (let i = 0, l = el.attrs.length; i 

 // 遍历子节点 -> genNode function genChildren (el) { if (!el.children.length) { return 'undefined' } // 对children扁平化处理 return '__flatten__([' + el.children.map(genNode).join(',') + '])' } function genNode (node) { if (node.tag) { return genElement(node) } else { return genText(node) } } // 解析{{}} function genText (text) { if (text === ' ') { return '" "' } else { const exp = parseText(text) if (exp) { return 'String(' + escapeNewlines(exp) + ')' } else { return escapeNewlines(JSON.stringify(text)) } } } 

 // h 函数利用上面得到的节点数据得到 vNode对象 => 虚拟dom export default function h (tag, b, c) { var data = {}, children, text, i if (arguments.length === 3) { data = b if (isArray(c)) { children = c } else if (isPrimitive(c)) { text = c } } else if (arguments.length === 2) { if (isArray(b)) { children = b } else if (isPrimitive(b)) { text = b } else { data = b } } if (isArray(children)) { // 子节点递归处理 for (i = 0; i 

 // 实例代理data数据 Object.keys(options.data).forEach(key => this._proxy(key)) // 将method的this指向实例 if (options.methods) { Object.keys(options.methods).forEach(key => { this[key] = options.methods[key].bind(this) }) } 

 _proxy (key) { if (!isReserved(key)) { // need to store ref to self here // because these getter/setters might // be called by child scopes via // prototype inheritance. var self = this Object.defineProperty(self, key, { configurable: true, enumerable: true, get: function proxyGetter () { return self._data[key] }, set: function proxySetter (val) { self._data[key] = val } }) } } 

 function observe(data, callback) { if (!data || typeof data !== 'object') { return } // 遍历key Object.keys(data).forEach((key) => { let value = data[key]; // 递归遍历监听深度变化 observe(value, callback); // 监听单个可以的变化 Object.defineProperty(data, key, { configurable: true, enumerable: true, get() { return value; }, set(val) { if (val === value) { return } value = val; // 监听新的数据 observe(value, callback); // 数据改变的回调 callback(); } }); }); } // 使用observe函数监听data const data = {}; observe(data, () => { console.log('data修改'); }) 

 // 首先是订阅中心 class Dep { constructor() { this.subs = []; // 订阅者数组 } addSub(sub) { // 添加订阅者 this.subs.push(sub); } notify() { // 发布通知 this.subs.forEach((sub) => { sub.update(); }); } } // 当前订阅者，在getter中标记 Dep.target = null; // 订阅者 class Watch { constructor(express, cb) { this.cb = cb; if (typeof express === 'function') { this.expressFn = express; } else { this.expressFn = () => { return new Function(express)(); } } this.get(); } get() { // 利用Dep.target存当前订阅者 Dep.target = this; // 执行表达式 -> 触发getter -> 在getter中添加订阅者 this.expressFn(); // 及时置空 Dep.taget = null; } update() { // 更新 this.cb(); } addDep(dep) { // 添加订阅 dep.addSub(this); } } // 观察者 建立观察 class Observe { constructor(data) { if (!data || typeof data !== 'object') { return } // 遍历key Object.keys(data).forEach((key) => { // key => dep 对应 const dep = new Dep(); let value = data[key]; // 递归遍历监听深度变化 const observe = new Observe(value); // 监听单个可以的变化 Object.defineProperty(data, key, { configurable: true, enumerable: true, get() { if (Dep.target) { const watch = Dep.target; watch.addDep(dep); } return value; }, set(val) { if (val === value) { return } value = val; // 监听新的数据 new Observe(value); // 数据改变的回调 dep.notify(); } }); }); } } // 监听数据中某个key的更改 const data = { name: 'xiaoming', age: 26 }; const observe = new Observe(data); const watch = new Watch('data.age', () => { console.log('age update'); }); data.age = 22

 // ... // 为数据建立数据观察 this._ob = observe(options.data) this._watchers = [] // 添加订阅者 执行render 会触发 getter 订阅者订阅更新，数据改变触发 setter 订阅中心通知订阅者执行 update this._watcher = new Watcher(this, render, this._update) // ... 

 // observe函数 export function observe (value, vm) { if (!value || typeof value !== 'object') { return } if ( hasOwn(value, '__ob__') && value.__ob__ instanceof Observer ) { ob = value.__ob__ } else if ( shouldConvert && (isArray(value) || isPlainObject(value)) && Object.isExtensible(value) && !value._isVue ) { // 为数据建立观察者 ob = new Observer(value) } // 存储关联的vm if (ob && vm) { ob.addVm(vm) } return ob } // => Observe 函数 export function Observer (value) { this.value = value // 在数组变异方法中有用 this.dep = new Dep() // observer实例存在__ob__中 def(value, '__ob__', this) if (isArray(value)) { var augment = hasProto ? protoAugment : copyAugment // 数组遍历，添加变异的数组方法 augment(value, arrayMethods, arrayKeys) // 对数组的每个选项调用observe函数 this.observeArray(value) } else { // walk -> convert -> defineReactive -> setter/getter this.walk(value) } } // => walk Observer.prototype.walk = function (obj) { var keys = Object.keys(obj) for (var i = 0, l = keys.length; i  convert Observer.prototype.convert = function (key, val) { defineReactive(this.value, key, val) } // 重点看看defineReactive export function defineReactive (obj, key, val) { // key对应的的订阅中心 var dep = new Dep() var property = Object.getOwnPropertyDescriptor(obj, key) if (property && property.configurable === false) { return } // 兼容原有setter/getter // cater for pre-defined getter/setters var getter = property && property.get var setter = property && property.set // 实现递归监听属性 val = obj[key] // 深度优先遍历 先为子属性设置 reactive var childOb = observe(val) // 设置 getter/setter Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { var value = getter ? getter.call(obj) : val // Dep.target 为当前 watch 实例 if (Dep.target) { // dep 为 obj[key] 对应的调度中心 dep.depend 将当前 wtcher 实例添加到调度中心 dep.depend() if (childOb) { // childOb.dep 为 obj[key] 值 val 对应的 observer 实例的 dep // 实现array的变异方法和$set方法订阅 childOb.dep.depend() } // TODO: 此处作用未知？ if (isArray(value)) { for (var e, i = 0, l = value.length; i 

 let uid = 0 export default function Dep () { this.id = uid++ // 订阅调度中心的watch数组 this.subs = [] } // 当前watch实例 Dep.target = null // 添加订阅者 Dep.prototype.addSub = function (sub) { this.subs.push(sub) } // 移除订阅者 Dep.prototype.removeSub = function (sub) { this.subs.$remove(sub) } // 订阅 Dep.prototype.depend = function () { // Dep.target.addDep(this) => this.addSub(Dep.target) => this.subs.push(Dep.target) Dep.target.addDep(this) } // 通知更新 Dep.prototype.notify = function () { // stablize the subscriber list first var subs = this.subs.slice() for (var i = 0, l = subs.length; i  watch.update() subs[i].update() } }

 export default function Watcher (vm, expOrFn, cb, options) { // mix in options if (options) { extend(this, options) } var isFn = typeof expOrFn === 'function' this.vm = vm // vm 的 _watchers 包含了所有 watch vm._watchers.push(this) this.expression = expOrFn this.cb = cb this.id = ++uid // uid for batching this.active = true this.dirty = this.lazy // for lazy watchers // deps 一个 watch 实例可以对应多个 dep this.deps = [] this.newDeps = [] this.depIds = Object.create(null) this.newDepIds = null this.prevError = null // for async error stacks // parse expression for getter/setter if (isFn) { this.getter = expOrFn this.setter = undefined } else { warn('vue-lite only supports watching functions.') } this.value = this.lazy ? undefined : this.get() this.queued = this.shallow = false } Watcher.prototype.get = function () { this.beforeGet() var scope = this.scope || this.vm var value try { // 执行 expOrFn，此时会触发 getter => dep.depend() 将watch实例添加到对应 obj[key] 的 dep value = this.getter.call(scope, scope) } if (this.deep) { // 深度watch // 触发每个key的getter watch实例将对应多个dep traverse(value) } // ... this.afterGet() return value } // 触发getter，实现订阅 Watcher.prototype.beforeGet = function () { Dep.target = this this.newDepIds = Object.create(null) this.newDeps.length = 0 } // 添加订阅 Watcher.prototype.addDep = function (dep) { var id = dep.id if (!this.newDepIds[id]) { // 将新出现的dep添加到newDeps中 this.newDepIds[id] = true this.newDeps.push(dep) // 如果已在调度中心，不再重复添加 if (!this.depIds[id]) { // 将watch添加到调度中心的数组中 dep.addSub(this) } } } Watcher.prototype.afterGet = function () { // 切除key的getter联系 Dep.target = null var i = this.deps.length while (i--) { var dep = this.deps[i] if (!this.newDepIds[dep.id]) { // 移除不在expOrFn表达式中关联的dep中watch的订阅 dep.removeSub(this) } } this.depIds = this.newDepIds var tmp = this.deps this.deps = this.newDeps // TODO: 既然newDeps最终会被置空，这边赋值的意义在于? this.newDeps = tmp } // 订阅中心通知消息更新 Watcher.prototype.update = function (shallow) { if (this.lazy) { this.dirty = true } else if (this.sync || !config.async) { this.run() } else { // if queued, only overwrite shallow with non-shallow, // but not the other way around. this.shallow = this.queued ? shallow ? this.shallow : false : !!shallow this.queued = true // record before-push error stack in debug mode /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.debug) { this.prevError = new Error('[vue] async stack trace') } // 添加到待执行池 pushWatcher(this) } } // 执行更新回调 Watcher.prototype.run = function () { if (this.active) { var value = this.get() if ( ((isObject(value) || this.deep) && !this.shallow) ) { // set new value var oldValue = this.value this.value = value var prevError = this.prevError // ... this.cb.call(this.vm, value, oldValue) } this.queued = this.shallow = false } } Watcher.prototype.depend = function () { var i = this.deps.length while (i--) { this.deps[i].depend() } }

 // batch.js var queueIndex var queue = [] var userQueue = [] var has = {} var circular = {} var waiting = false var internalQueueDepleted = false // 重置执行池 function resetBatcherState () { queue = [] userQueue = [] // has 避免重复 has = {} circular = {} waiting = internalQueueDepleted = false } // 执行执行队列 function flushBatcherQueue () { runBatcherQueue(queue) internalQueueDepleted = true runBatcherQueue(userQueue) resetBatcherState() } // 批量执行 function runBatcherQueue (queue) { for (queueIndex = 0; queueIndex  config._maxUpdateCount) { warn( 'You may have an infinite update loop for watcher ' + 'with expression "' + watcher.expression + '"', watcher.vm ) break } } } } // 添加到执行池 export function pushWatcher (watcher) { var id = watcher.id if (has[id] == null) { if (internalQueueDepleted && !watcher.user) { // an internal watcher triggered by a user watcher... // let's run it immediately after current user watcher is done. userQueue.splice(queueIndex + 1, 0, watcher) } else { // push watcher into appropriate queue var q = watcher.user ? userQueue : queue has[id] = q.length q.push(watcher) // queue the flush if (!waiting) { waiting = true // 在nextick中执行 nextTick(flushBatcherQueue) } } } }

 // _update => createPatchFunction => patch => patchVnode => (dom api) // vtree是通过compile函数编译的render函数执行的结果，返回了当前表示当前dom结构的对象（虚拟节点树） _update (vtree) { if (!this._tree) { // 第一次渲染 patch(this._el, vtree) } else { patch(this._tree, vtree) } this._tree = vtree } // 在处理节点时，需要针对class，props，style，attrs，events做不同处理 // 在这里注入针对不同属性的处理函数 const patch = createPatchFunction([ _class, // makes it easy to toggle classes props, style, attrs, events ]) // => createPatchFunction返回patch函数，patch函数通过对比虚拟节点的差异，对节点进行增删更新 // 最后调用原生的dom api更新html return function patch (oldVnode, vnode) { var i, elm, parent var insertedVnodeQueue = [] // pre hook for (i = 0; i