Vue源码浅析01

Vue源码大致可以理解分为：初始化属性、方法（Vue.use、***等等）和实例化（new Vue）执行的一些方法两大部分。

此系列文章主要是学习记录的笔记和大家分享，如果有不对的地方请及时指出。当然也存在很多没有搞明白的地方会先选择跳过后续补上。

大家首先可以去github上下载最新的vue源码，github地址：https://github.com/vuejs/vue

我们可以通过运行cnpm run dev来生成测试包。这样子大家在调试的时候如果有不懂的地方也方便打印log来调试查看。打包好的文件会保存在dist/vue.js。

本文还是主要介绍源码，这些准备工作就不再细化了。

这里整理的一份Vue的构造函数和原型上挂载的一些方法和属性：

//@instance/index.js
function Vue(){};
//instance/init.js
Vue.prototype._init = function(){}
//instance/state.js
const dataDef = {}
dataDef.get = function () { return this._data }
const propsDef = {}
propsDef.get = function () { return this._props }
Object.defineProperty(Vue.prototype, '$data', dataDef)
Object.defineProperty(Vue.prototype, '$props', propsDef)
Vue.prototype.$set = set
Vue.prototype.$delete = del
Vue.prototype.$watch = function (){}
//instance/events.js
Vue.prototype.$on = function (){}
Vue.prototype.$once = function (){}
Vue.prototype.$off = function (){}
Vue.prototype.$emit = function (){}
//instance/lifecycle.js
Vue.prototype._update = function (){}
Vue.prototype.$forceUpdate = function () {}
Vue.prototype.$destroy = function () {}
//instance/render.js
Vue.prototype.$nextTick = function () {}
Vue.prototype._render = function (){}

//@global-api/index.js
const configDef = {}
configDef.get = () => config
Object.defineProperty(Vue, 'config', configDef)
Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
}
Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick
Vue.options = Object.create(null)
['component', 'directive', 'filter'].forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
})
Vue.options._base = Vue
extend(Vue.options.components, builtInComponents)
Object.defineProperty(Vue.prototype, '$isServer', {
  get: isServerRendering
})
Object.defineProperty(Vue.prototype, '$ssrContext', {
  get () {
    return this.$vnode && this.$vnode.ssrContext
  }
})
Object.defineProperty(Vue, 'FunctionalRenderContext', {
  value: FunctionalRenderContext
})
Vue.version = '__VERSION__'
//global-api/use.js
Vue.use = function(){}
//global-api/mixin.js
Vue.mixin = function(){}
//global-api/extend.js
Vue.extend = function(){}
//global-api/assets.js
['component', 'directive', 'filter'].forEach(type => {
    Vue[type] = function (){}
})