初入茅庐，开始我们的 vue 之旅！
刚开始看源码，不要一行一行看，建议新建一 demo debug 慢慢调试，一点一点读，这里采用配合项目的形式，加深我们在项目中对具体方法的认知！
打开 vue 源码项目你会发现有这么几个目录，如下：
# bash . ├── dist // dist ├── src // 源码目录 │ ├── compiler // 编译相关 │ │ ├── codegen │ │ ├── directives │ │ └── parser │ ├── core // 核心 │ │ ├── components │ │ ├── global-api │ │ ├── instance │ │ │ └── render-helpers │ │ ├── observer │ │ ├── util │ │ └── vdom │ │ ├── helpers │ │ └── modules │ ├── platforms // 平台相关 │ │ ├── web │ │ │ ├── compiler │ │ │ │ ├── directives │ │ │ │ └── modules │ │ │ ├── runtime │ │ │ │ ├── components │ │ │ │ ├── directives │ │ │ │ └── modules │ │ │ ├── server │ │ │ │ ├── directives │ │ │ │ └── modules │ │ │ └── util │ │ └── weex │ │ ├── compiler │ │ │ ├── directives │ │ │ └── modules │ │ │ └── recycle-list │ │ ├── runtime │ │ │ ├── components │ │ │ ├── directives │ │ │ ├── modules │ │ │ └── recycle-list │ │ └── util │ ├── server // 服务端渲染 │ │ ├── bundle-renderer │ │ ├── optimizing-compiler │ │ ├── template-renderer │ │ └── webpack-plugin │ ├── sfc │ └── shared // .vue 解析文件 └── types // 测试
compiler: 主要用于编译
core: 这里是核心中的核心，主要是 vnode、核心 api、等一些重要的封装
platforms: 适配多端平台， 比如 native（vexx）、web
server: 服务端渲染
sfc: 这里主要是 webpack 对 vue 代码编译相关
shared: 对 .vue 文件的解析
一、入口文件加载
在我们配置好项目后，debugger，点击进入：
进入断点：
会看到这样两段代码，这里定义了一个 Vue 实例，也就是 new Vue 的出处，
这里执行了 this._init(options)，进而我们看看这个方法做了那些事，
这里直接贴上源码，方便阅读理解：
// 混入方法，接收Vue实例<Component> export function initMixin (Vue: Class<Component>) { Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid // 唯一递增的id vm._uid = uid++ let startTag, endTag /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { startTag = `vue-perf-start:${vm._uid}` endTag = `vue-perf-end:${vm._uid}` mark(startTag) } // a flag to avoid this being observed // 如果是vue实例，则不需要被observe vm._isVue = true // merge options // 第一步： 对options参数进行处理 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 */ // 第二步 renderProxy if (process.env.NODE_ENV !== 'production') { initProxy(vm) } else { vm._renderProxy = vm } // expose real self vm._self = vm // 第三步 vm生命周期钩子 initLifecycle(vm)// 做了一些生命周期的初始化工作，初始化了很多变量，最主要是设置了父子组件的引用关系，也就是设置了 `$parent` 和 `$children`的值 // 第四步 vm 事件初始化监听 initEvents(vm)// 注册事件，注意这里注册的不是自己的，而是父组件的。因为很明显父组件的监听器才会注册到孩子身上。 initRender(vm)// 做一些 render 的准备工作，比如处理父子继承关系等，并没有真的开始 render callHook(vm, 'beforeCreate')// 准备工作完成，接下来进入 `create` 阶段 initInjections(vm) // resolve injections before data/props // 第五步 vm状态初始化 initState(vm)// `data`, `props`, `computed` 等都是在这里初始化的，常见的面试考点比如`Vue是如何实现数据响应化的` 答案就在这个函数中寻找 initProvide(vm) // resolve provide after data/props callHook(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) } // 第六步 render 挂在到 $mount if (vm.$options.el) { vm.$mount(vm.$options.el) // el $mount } } }
debugger 过程图示：
options:
首先 vue 会先对 options 参数进行处理，这里主要是合并 options 参数，具体下面讲.
renderProxy:
这里使用 Proxy 代理，把 render 中的 this 指向 renderProxy,也就是 vm 实例。
initLifecycle:
这里做了一些生命周期的初始化工作，初始化了很多变量，最主要是设置了父子组件的引用关系，也就是设置了 $parent 和 $children 的值。
initEvents:
注册事件，注意这里注册的不是自己的，而是父组件的。因为父组件的监听器才会注册到子组件身上。
源码：
//instance/events.js /* * @Description: In User Settings Edit * @Author: your name * @Date: 2019-08-14 10:42:22 * @LastEditTime: 2019-08-15 16:41:19 * @LastEditors: Please set LastEditors */ /* @flow */ import { tip, toArray, hyphenate, formatComponentName, invokeWithErrorHandling } from '../util/index' import { updateListeners } from '../vdom/helpers/index' // 初始化event事件 export function initEvents (vm: Component) { // 创建一个新对象，并复制给vm._events实例 vm._events = Object.create(null) // bool钩子用于标志位作用，这里没用哈希表查找是否有钩子，可以减少开销、性能优化 vm._hasHookEvent = false // init parent attached events // 初始化父组件attached的事件 const listeners = vm.$options._parentListeners if (listeners) { updateComponentListeners(vm, listeners) } } let target: any function add (event, fn) { target.$on(event, fn) } function remove (event, fn) { target.$off(event, fn) } function createOnceHandler (event, fn) { const _target = target return function onceHandler () { const res = fn.apply(null, arguments) if (res !== null) { _target.$off(event, onceHandler) } } } export function updateComponentListeners ( vm: Component, listeners: Object, oldListeners: ?Object ) { target = vm updateListeners(listeners, oldListeners || {}, add, remove, createOnceHandler, vm) target = undefined } export function eventsMixin (Vue: Class<Component>) { const hookRE = /^hook:/ /** * 绑定一个自定义监听事件 * @event {String|Array<string>} event * @fn {function} function * @returns Component */ Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component { const vm: Component = this // 如果是数组，则递归为每个绑定$on if (Array.isArray(event)) { for (let i = 0, l = event.length; i < l; i++) { vm.$on(event[i], fn) } } else { (vm._events[event] || (vm._events[event] = [])).push(fn) // optimize hook:event cost by using a boolean flag marked at registration // instead of a hash lookup // 改变标识位，这里用bool是为了性能优化 if (hookRE.test(event)) { vm._hasHookEvent = true } } return vm } /** * 监听一个只能监听一次的事件，用完直接被销毁 * @event {String} 事件 * @fn {function} fn 回调函数 * @returns Component */ Vue.prototype.$once = function (event: string, fn: Function): Component { const vm: Component = this function on () { // 在第一执行后直接移除 vm.$off(event, on) // 执行注册方法 fn.apply(vm, arguments) } on.fn = fn vm.$on(event, on) return vm } /** * 销毁事件 * @event {String|Array<string>} event * @fn {function} function * @returns Component */ Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component { const vm: Component = this // all // 如果不传参直接删除所有事件 if (!arguments.length) { vm._events = Object.create(null) return vm } // array of events // 如果传入参数是数组，则递归删除 if (Array.isArray(event)) { for (let i = 0, l = event.length; i < l; i++) { vm.$off(event[i], fn) } return vm } // specific event const cbs = vm._events[event] // 本身不存在直接返回 if (!cbs) { return vm } if (!fn) { vm._events[event] = null return vm } // specific handler // 遍历寻找对应方法并删除 let cb let i = cbs.length while (i--) { cb = cbs[i] if (cb === fn || cb.fn === fn) { cbs.splice(i, 1) break } } return vm } /** * 触发当前实例上的事件。附加参数都会传给监听器回调 * @event {String} event * @returns Component */ Vue.prototype.$emit = function (event: string): Component { const vm: Component = this // 如果是生产环境 dev if (process.env.NODE_ENV !== 'production') { const lowerCaseEvent = event.toLowerCase() if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) { tip( `Event "${lowerCaseEvent}" is emitted in component ` + `${formatComponentName(vm)} but the handler is registered for "${event}". ` + `Note that HTML attributes are case-insensitive and you cannot use ` + `v-on to listen to camelCase events when using in-DOM templates. ` + `You should probably use "${hyphenate(event)}" instead of "${event}".` ) } } let cbs = vm._events[event] if (cbs) { // 将类数组转成数组 cbs = cbs.length > 1 ? toArray(cbs) : cbs const args = toArray(arguments, 1) const info = `event handler for "${event}"` // 遍历执行 for (let i = 0, l = cbs.length; i < l; i++) { invokeWithErrorHandling(cbs[i], vm, args, vm, info) } } return vm } }
initRender:
做一些 render 的准备工作，比如处理父子继承关系等，并没有真的开始 render。
calHook:
准备工作完成，接下来进入 create 阶段。
initInjections:
初始化 data、props 数据
initState:
初始化 data、props、computed、等
initProvider:
加载 provider
最后就是将 render 挂在到 $mount 上
// 挂载$mount到el上 if (vm.$options.el) { vm.$mount(vm.$options.el)// el $mount }
接下来解释每个的主要功能！
在 initState 中做了以下几件事:
function initState (vm) { vm._watchers = []; var opts = vm.$options; // 初始化 props if (opts.props) { initProps(vm, opts.props); } // 初始化 methods if (opts.methods) { initMethods(vm, opts.methods); } if (opts.data) { // 初始化data initData(vm); } else { // 没有data是设置data为一个 {} observe(vm._data = {}, true /* asRootData */); } // 初始化 computed if (opts.computed) { initComputed(vm, opts.computed); } // 初始化 watch if (opts.watch && opts.watch !== nativeWatch) { initWatch(vm, opts.watch); } }
initData:
function initData (vm) { // 拿到data var data = vm.$options.data; // 这里就是为什么我们在跟组件要写data:() 而在其他位置要写成函数的原因 data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {}; // 判断data是否为Object if (!isPlainObject(data)) { data = {}; process.env.NODE_ENV !== 'production' && warn( 'data functions should return an object:\n' + 'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function', vm ); } // proxy data on instance var keys = Object.keys(data); var props = vm.$options.props; var methods = vm.$options.methods; var i = keys.length; // 遍历 while (i--) { var key = keys[i]; if (process.env.NODE_ENV !== 'production') { if (methods && hasOwn(methods, key)) { warn( ("Method \"" + key + "\" has already been defined as a data property."), vm ); } } if (props && hasOwn(props, key)) { process.env.NODE_ENV !== 'production' && warn( "The data property \"" + key + "\" is already declared as a prop. " + "Use prop default value instead.", vm ); } else if (!isReserved(key)) { // 使用代理将data代理到vm实例上 proxy(vm, "_data", key); } } // observe data // 使用observe的方式definProperty数据双向绑定，Object.defineProperty通过setter设置值，通过getter获取值（依赖收集） observe(data, true /* asRootData */); }
使用 Observer 中 definProperty 对数据进行双向绑定，Object.definPropert 实现了 getter、setter 等，使用 getter 进行依赖收集（Dep），setter 设置 data 中的值。
这里是 Dep 依赖收集
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于