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 (){}
})