Vue 2.0 源码分析

微信扫一扫,分享到朋友圈

Vue 2.0 源码分析

注意: 我们这里说的版本,不是 Vue 发布的版本,而是 Vue 的打包编译之后的版本。我们都知道 Vue 2+ 是使用 rollup 打包的,Vue 是分为:

  • 能编译模板的版本 entry-runtime-with-compiler
  • 只有运行时的版本 entry-runtime

为什么选用 运行时版本

entry-runtime-with-compiler 内部重写挂载函数 $mount
, 原因是 compiler 版本是针对 Vue options
中含有 template
字段进行单独处理的。含有 template
字段就需要单独的用 Vue compiler 进行编译。我们一般在单文件内部写 template 不会使用 option 的 template 选项,所以直接使用运行时版本即可

暴露的 Vue 函数

从源码看 Vue 本身是一个 函数
, 它在 vue/src/core/instance/index.js
目录下

// code
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)
}
// code
export default Vue
复制代码

定义了 Vue构造函数(即:ES5 中的类) 之后,执行混入:

  • 初始化
  • 状态混入
  • 事件混入
  • 生命周期混入
  • 渲染函数混入

导入 Vue

导入 Vue 后,JS 就开始创建 Vue 的运行时:

  • 定义一个构造函数 Vue(类)
  • 创建 Vue 总的运行时

运行时:initMixin

创建了 Vue.prototype._init
方法, 这方法将在 Vue 实例化后运行的,也就是说运行时是以 new Vue 实例为界限,我们写代码其实是 Vue 内部的,不是 Vue 外部的。Vue 外部的是 new Vue创建的实例。这是典型的面向对象编程思想。

initEvents 中 target.$on(event, fn)
为什么能访问 $on
?

initEvents 重要是初始化的是:listeners, 此时 实例上还没有 $on
,但也不会影响运行,因为这些时间不会被触发。

这里可以很好的理解 $listeners
api 的使用方法.

运行时:initRender

在 vm 实例上:

  • _vnode
  • _staticTrees
  • $slots
  • $scopedSlots
  • _c
  • $createElement

重要点就是创建以上的 vm 实例方法和属性, 其中 $createElement
是创建元素和组件,它的返回值是创建的 vnode 节点,到从位置,我们接触到的还都是 vnode

运行时:callHook, beforeCreate

vm._hasHookEvent = false, vm.$emit 没有定义,这个明显不会触发

pushTarget() 没有传入 target, 这里要补充 Class 的 target 属性

运行时:initInjections

defineReactive 的处理 inject 选项

运行时:initState

  • initProps
  • initMethods
  • initData/ observe(data ={})
  • initComputed
  • initWatch

$mount

挂载函数 Vue.prototype.$mount
在, /vue@2.6.9/src/platforms/web/runtime/index.js
中定义

/* @flow */
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 } 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'
// install platform specific utils
Vue.config.mustUseProp = mustUseProp
Vue.config.isReservedTag = isReservedTag
Vue.config.isReservedAttr = isReservedAttr
Vue.config.getTagNamespace = getTagNamespace
Vue.config.isUnknownElement = isUnknownElement
// install platform runtime directives & components
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)
}
// devtools global hook
/* istanbul ignore next */
if (inBrowser) {
setTimeout(() => {
if (config.devtools) {
if (devtools) {
devtools.emit('init', Vue)
} else if (
process.env.NODE_ENV !== 'production' &&
process.env.NODE_ENV !== 'test'
) {
console[console.info ? 'info' : 'log'](
'Download the Vue Devtools extension for a better development experience:n' +
'https://github.com/vuejs/vue-devtools'
)
}
}
if (process.env.NODE_ENV !== 'production' &&
process.env.NODE_ENV !== 'test' &&
config.productionTip !== false &&
typeof console !== 'undefined'
) {
console[console.info ? 'info' : 'log'](
`You are running Vue in development mode.n` +
`Make sure to turn on production mode when deploying for production.n` +
`See more tips at https://vuejs.org/guide/deployment.html`
)
}
}, 0)
}
export default Vue
复制代码
  • mountedComponent
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
vm.$el = el
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode
// coes
}
callHook(vm, 'beforeMount')
let updateComponent
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
// codes
} else {
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
}
// we set this to vm._watcher inside the watcher's constructor
// since the watcher's initial patch may call $forceUpdate (e.g. inside child
// component's mounted hook), which relies on vm._watcher being already defined
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
hydrating = false
// manually mounted instance, call mounted on self
// mounted is called for render-created child components in its inserted hook
if (vm.$vnode == null) {
vm._isMounted = true
callHook(vm, 'mounted')
}
return vm
}
复制代码
  • _update
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
const vm: Component = this
const prevEl = vm.$el
const prevVnode = vm._vnode
const restoreActiveInstance = setActiveInstance(vm)
vm._vnode = vnode
// Vue.prototype.__patch__ is injected in entry points
// based on the rendering backend used.
if (!prevVnode) {
// initial render
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
} else {
// updates
vm.$el = vm.__patch__(prevVnode, vnode)
}
restoreActiveInstance()
// update __vue__ reference
if (prevEl) {
prevEl.__vue__ = null
}
if (vm.$el) {
vm.$el.__vue__ = vm
}
// if parent is an HOC, update its $el as well
if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
vm.$parent.$el = vm.$el
}
// updated hook is called by the scheduler to ensure that children are
// updated in a parent's updated hook.
}
复制代码

本质上是调用了 __patch__
方法

Vue.prototype.__patch__ = inBrowser ? patch : noop
// path
export const patch: Function = createPatchFunction({ nodeOps, modules })
复制代码
  • createPatchFunction 返回一个 patch 函数,createPatchFunction 本身是一个极为复杂的函数,设计到虚拟dom,diff 算法等等。。

微信扫一扫,分享到朋友圈

Vue 2.0 源码分析

亨利·卡维尔商谈再次出演超人 但是只会进行客串

上一篇

脱毛非凡新体验,日本品牌KNO脱毛仪登陆中国即…

下一篇

你也可能喜欢

Vue 2.0 源码分析

长按储存图像,分享给朋友