共计 3204 个字符,预计需要花费 9 分钟才能阅读完成。
vue 源码剖析(一)- 源码入口
vue 提供不同的平台和版本,浏览器环境版本包含:Runtime only 版本和 Runtime + compiler 版本。Runtime + compiler 版本:new Vue({template: ‘<div>{{ hi}}</div>’}), 须要将 template 中的字符串编译成 render 函数,须要用到 compiler,具体在 scripts\config.js
const builds = { | |
'web-runtime-cjs-dev': {entry: resolve('web/entry-runtime.js'), | |
dest: resolve('dist/vue.runtime.common.dev.js'), | |
format: 'cjs', | |
env: 'development', | |
banner | |
}, | |
... | |
'web-full-cjs-dev': {entry: resolve('web/entry-runtime-with-compiler.js'), | |
dest: resolve('dist/vue.common.dev.js'), | |
format: 'cjs', | |
env: 'development', | |
alias: {he: './entity-decoder'}, | |
banner | |
}, | |
... | |
} |
本文剖析 runtime + complier 版本,entry 属性值就是 Vue 源码入口,接下来查看 web/entry-runtime-with-compiler.js
import Vue from './runtime/index' | |
... | |
// 将 runtime/index.js 中定义的 mount 办法缓存 | |
const mount = Vue.prototype.$mount | |
// 重写 $mount | |
// runtime + compiler 版本的 mount | |
Vue.prototype.$mount = function ( | |
el?: string | Element, | |
hydrating?: boolean // 和服务器渲染无关 | |
): Component {el = el && query(el) | |
/* istanbul ignore if */ | |
// el 不能时 body 和 html | |
if (el === document.body || el === document.documentElement) { | |
process.env.NODE_ENV !== 'production' && warn(`Do not mount Vue to <html> or <body> - mount to normal elements instead.`) | |
return this | |
} | |
const options = this.$options | |
// resolve template/el and convert to render function | |
// 如果没有定义 render 办法,则会把 el 或者 template 字符串转换成 render 办法 | |
if (!options.render) { | |
let template = options.template | |
// 获取 template | |
if (template) {if (typeof template === 'string') {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) {template = template.innerHTML} else {if (process.env.NODE_ENV !== 'production') {warn('invalid template option:' + template, this) | |
} | |
return this | |
} | |
} else if (el) {template = getOuterHTML(el) | |
} | |
if (template) { | |
/* istanbul ignore if */ | |
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {mark('compile') | |
} | |
// 将 template 转换成 render 函数 compileToFunctions | |
const {render, staticRenderFns} = compileToFunctions(template, { | |
outputSourceRange: process.env.NODE_ENV !== 'production', | |
shouldDecodeNewlines, | |
shouldDecodeNewlinesForHref, | |
delimiters: options.delimiters, | |
comments: options.comments | |
}, this) | |
options.render = render | |
options.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') | |
} | |
} | |
} | |
// 这里调用的 mount 是下面被缓存的 mount | |
return mount.call(this, el, hydrating) | |
} |
这里的 Vue 还是通过 import 引入,一路向上找,最终找到 src\core\instance\index.js
// Vue 构造函数 | |
function Vue (options) { | |
if (process.env.NODE_ENV !== 'production' && | |
!(this instanceof Vue) | |
) {warn('Vue is a constructor and should be called with the `new` keyword') | |
} | |
// this 是什么 | |
// initMixin 给 Vue 增加此办法 | |
this._init(options) | |
} | |
// 初始化 | |
// if (vm.$option.el) { | |
// $mount 负责挂载 | |
// vm.$mount(vm.$option.el) | |
// } | |
initMixin(Vue) | |
// 初始化 state | |
// Vue.prototype.$set = set | |
// Vue.prototype.$delete = del | |
// Vue.prototype.$watch = function | |
stateMixin(Vue) | |
// 事件 | |
// $on,$emit,$once,$off 和本人写的 class bus 没有太大区别 | |
// $emit 触发以后组件的事件 | |
eventsMixin(Vue) | |
// _update !!!!!!!!!!!!!!!! | |
// forceUpdate,destroy | |
lifecycleMixin(Vue) | |
// 渲染 | |
// nextTick | |
// _render !!!!!!!!!!!! | |
renderMixin(Vue) | |
export default Vue |
能够看到 Vue 的实质是一个 function,之所以用 function 而没有用 es6 的 class,是因为在后续会在 Vue 函数原型上挂载了很多 api 绝对于 class 更不便,Vue 是通过 xxxMixin 调用不同目录下的办法组装成残缺 Vue
总结
- package.json 中的 script 标签中的 build 命令查找我的项目源码入口,实用于其余源码浏览入口
- vue 的底层是一个构造函数,没有应用 es 的 class 不便原型挂载 api 扩大各个模块内容
正文完