python什么是入口文件_vue源码分析系列之入口文件分析

入口寻找

入口platforms/web/entry-runtime-with-compiler中import了./runtime/index导出的vue。

./runtime/index中引入了core/index中的vue.

core/index中引入了instance/index中的vue

instance/index中，定义了vue的构造函数

instance/index中的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._init(options)

}

// 原型上挂载了init方法，用来做初始化

initMixin(Vue)

// 原型上挂载$data的属性描述符getter，返回this._data

// 原型上挂载$props的属性描述符getter, 返回this._props

// 原型上挂载$set与$delete方法，用来为对象新增/删除响应式属性

// 原型上挂载$watch方法

stateMixin(Vue)

// 原型上挂载事件相关的方法, $on、$once、$off、$emit。

eventsMixin(Vue)

// 原型上挂载_update、$destroy与$forceUpdate方法，与组件更新有关。

lifecycleMixin(Vue)

// 原型挂载组件渲染相关方法，_render方法(用来返回vnode,即虚拟dom)

renderMixin(Vue)

export default Vue

core/index中的vue

index

import Vue from './instance/index'

import { initGlobalAPI } from './global-api/index'

import { isServerRendering } from 'core/util/env'

// 初始化一些全局API

initGlobalAPI(Vue)

// 是否是服务端渲染

Object.defineProperty(Vue.prototype, '$isServer', {

get: isServerRendering // global['process'].env.VUE_ENV === 'server'

})

// ssr相关

Object.defineProperty(Vue.prototype, '$ssrContext', {

get () {

/* istanbul ignore next */

return this.$vnode && this.$vnode.ssrContext

}

})

Vue.version = '__VERSION__'

export default Vue

initGlobalAPI

// 定义vue配置对象，配置对象详情见 import config from '../config'中的备注

const configDef = {}

configDef.get = () => config

Object.defineProperty(Vue, 'config', configDef)

// 定义一些内部公用方法

Vue.util = {

warn, // ⚠️警告打印相关

extend, // 浅拷贝函数

mergeOptions, // 配置合并，用到的时候细看

defineReactive // 定义响应式属性的方法。

}

// 静态方法，同$set、$delete、$nextTick

Vue.set = set

Vue.delete = del

Vue.nextTick = nextTick

Vue.options = Object.create(null)

ASSET_TYPES.forEach(type => {

Vue.options[type + 's'] = Object.create(null)

})

// Vue.options => {"components":{},"directives":{},"filters":{}}

// 跟Weex's multi-instance scenarios多场景有关

Vue.options._base = Vue;

//将内置组件塞进来

extend(Vue.options.components, builtInComponents)

// 定义Vue.use，主要在应用在插件系统中

initUse(Vue)

// 定义Vue.mixin, 就一句this.options = mergeOptions(this.options, mixin)

initMixin(Vue)

// 定义Vue.extend, 用作原型继承，通过它，可以创建子组件的构造函数

initExtend(Vue)

// 扩展Vue.component,Vue.directive,Vue.filter方法

initAssetRegisters(Vue)

runtime/index中的vue

import Vue from 'core/index'

import config from 'core/config'

import { extend, noop } from 'shared/util'

import { mountComponent } from 'core/instance/lifecycle'

import { devtools, inBrowser, isChrome } from 'core/util/index'

import {

query,

mustUseProp,

isReservedTag,

isReservedAttr,

getTagNamespace,

isUnknownElement

} from 'web/util/index'

import { patch } from './patch'

import platformDirectives from './directives/index'

import platformComponents from './components/index'

// 一些标签检查类的方法。平台相关

Vue.config.mustUseProp = mustUseProp

Vue.config.isReservedTag = isReservedTag

Vue.config.isReservedAttr = isReservedAttr

Vue.config.getTagNamespace = getTagNamespace

Vue.config.isUnknownElement = isUnknownElement

// 平台相关指令组件

// 指令有model与show

// 组件有Transition与TransitionGroup

extend(Vue.options.directives, platformDirectives)

extend(Vue.options.components, platformComponents)

// install platform patch function

Vue.prototype.__patch__ = inBrowser ? patch : noop

// public mount method

Vue.prototype.$mount = function (

el?: string | Element,

hydrating?: boolean

): Component {

el = el && inBrowser ? query(el) : undefined

return mountComponent(this, el, hydrating)

}

entry-runtime-with-compiler中的vue

import config from 'core/config'

import { warn, cached } from 'core/util/index'

import { mark, measure } from 'core/util/perf'

import Vue from './runtime/index'

import { query } from './util/index'

import { shouldDecodeNewlines } from './util/compat'

import { compileToFunctions } from './compiler/index'

// 根据id返回dom内容

const idToTemplate = cached(id => {

const el = query(id)

return el && el.innerHTML

})

// 重写$mount方法

const mount = Vue.prototype.$mount

Vue.prototype.$mount = function (

el?: string | Element,

hydrating?: boolean

): Component {

el = el && query(el)

/* 将vue绑定到body或者html元素上的错误提示 */

if (el === document.body || el === document.documentElement) {

process.env.NODE_ENV !== 'production' && warn(

`Do not mount Vue to or

- mount to normal elements instead.`

)

return this

}

const options = this.$options

// 解析template或者el属性，将其转化为render函数

if (!options.render) {

let template = options.template

// 获得模板字符串

if (template) {

if (typeof template === 'string') {

if (template.charAt(0) === '#') {

template = idToTemplate(template)

}

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

}

// 获得模板字符串后，编译模板为render函数

if (template) {

/* istanbul ignore if */

if (process.env.NODE_ENV !== 'production' && config.performance && mark) {

mark('compile')

}

const { render, staticRenderFns } = compileToFunctions(template, {

shouldDecodeNewlines,

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')

}

}

}

return mount.call(this, el, hydrating)

}

/**

* Get outerHTML of elements, taking care

* of SVG elements in IE as well.

*/

function getOuterHTML (el: Element): string {

if (el.outerHTML) {

return el.outerHTML

} else {

const container = document.createElement('div')

container.appendChild(el.cloneNode(true))

return container.innerHTML

}

}

Vue.compile = compileToFunctions

export default Vue

文章链接