13518219792
这篇文章将为大家详细讲解有关vue源码架构的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联-专业网站定制、快速模板网站建设、高性价比高淳网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式高淳网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖高淳地区。费用合理售后完善，10余年实体公司更值得信赖。
下载
去github上下载Vue https://github.com/vuejs/vue
npm install npm run dev
运行起来
rollup + flow
vue使用使用rollup打包，flow规范数据类型
rollup可以先用webpack套用，读起来差不多，时间有限，毕竟只有5分钟，这个就不用去看rollup文档了
入口
打开package.json
我们看scripts配置
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev", "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev",
找到scripts/config.js
打开
根据配置TARGET的不同会选择不同的config
同时在这里配置了process.env.NODE_ENV 环境
TARGET有CommonJS，ES Modules，UMD关于js引入类型的
还有weex，ssr
'web-runtime-cjs-dev': {
entry: resolve('web/entry-runtime.js'),
dest: resolve('dist/vue.runtime.common.dev.js'),
format: 'cjs',
env: 'development',
banner
}在alias.js下设置了别名路径
我们先介绍src/platforms
里面有web和weex 分别的web和weex入口
在web文件下是CommonJS，ES Modules，UMD关于js引入类型，server的打包入口
打开web/entry-runtime.js
引入
import Vue from './runtime/index' export default Vue
打开./runtime/index
import Vue from 'core/index'
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}
export default Vue在vue原型上添加了mount方法
处理了devtools，没有安装提醒安装devtools
给了这句提示dev环境提示
You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html
platforms目录夹讲解完毕
core目录
打开core/instance/index
映入眼前的是
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._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
export default Vue先执行的是initMixin(Vue)
打开init
export function initMixin (Vue) {
Vue.prototype._init = function (options?: Object) {
const vm = this
// a uid
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
vm._isVue = true
// 处理传入的options
// merge 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 {
// 传入的options,默认的options一起合并挂载到vm.$options上
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
// 代理
initProxy(vm)
} else {
vm._renderProxy = vm
}
// 生命周期
initLifecycle(vm)
// emit on 事件
initEvents(vm)
// 处理render vdom
initRender(vm)
callHook(vm, 'beforeCreate')
// 处理Injections
initInjections(vm) // resolve injections before data/props
// 双向数据绑定，监听订阅
initState(vm)
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)
}
// 渲染到dom
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
}lifecycle
打开 lifecycle
export function callHook (vm: Component, hook: string) {
// disable dep collection when invoking lifecycle hooks
pushTarget()
//执行对象的周期函数，周期函数最后被处理成数组
const handlers = vm.$options[hook]
const info = `${hook} hook`
if (handlers) {
for (let i = 0, j = handlers.length; i < j; i++) {
invokeWithErrorHandling(handlers[i], vm, null, vm, info)
}
}
if (vm._hasHookEvent) {
vm.$emit('hook:' + hook)
}
popTarget()callHook 的时候，是执行相应周期，开发者在周期函数里所写的
Events
initEvents实现了 emit on 等方法，请参考监听者订阅者模式，这里不详解
render
renderMixin函数
添加了 $nextTick _render 原型对象
$nextTick会在dom跟新后立即调用
nextTick(fn, this)是一个自执行函数
_render返回的是node的js数据，还不是dom
做了Vdom
initRender函数
给vm添加了_c和 $createElement用来渲染的方法
state
if (!(key in vm)) {
proxy(vm, `_props`, key)
}给vue属性做代理，访问this.a可以得到this.data.a 的值
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}给数据做监听
stateMixin函数
添加原型对象
Vue.prototype.$set = set Vue.prototype.$delete = del
其他
src/compiler 做了编译处理
core/componetd 做了keep-alive
core/util 封装了通用方法
core/vdom vdom算法
以上整体架构分析完毕
关于“vue源码架构的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
