Vue响应式原理--初始化过程
目标
Vue.js静态成员和实例成员的初始化过程（vue.set、vue.get、vue.extend等）
首次渲染的过程
数据响应式的原理
准备
源码地址： https://github.com/vuejs/vue
结构
dist：存放打包后文件
examples：存放示例文件，例如表格的使用等
src：compile/模板编译
core:vue核心
components：存放组件，例如keep-live
global-api：存放use、mixin、extends等
instance：存放vue实例，vue生命周期，初始化等
observer：实现响应式机制
util：存放公共成员位置
vdom：vue虚拟DOM，vue增强了，可以存放组件相关
platforms：存放平台相关内容，例如web，weex
sfc：单文件组件，把组件转换成js对象
了解Flow
vue源码使用了flow声明类型，并且每个文件开头都有flow标记
官网：https://flow.org/
JS的静态类型检查器
Flow的静态类型检查错误是通过静态类型腿短实现的
· 文件开头通过 // @flow 或者 /@flow/ 声明
调试
打包工具Rollup
Vue.js源码打包使用的是Rollup，比webpack轻量
webpack将所有文件当成模块，rollup只处理js文件，更适合vue这种类库的使用
Rollup打包不会生成冗余代码
安装
npm install
设置sourcemap
package.json中的dev添加参数 --sourcemap
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",
执行dev
npm run dev 执行打包，使用rollup，-w 参数是监听文件的变化，文件变化自动重新打包
Vue的不同构建版本
使用 npm run build 重新打包所有文件，可以在dist下查看
完整版：同时包含编译器和运行时的版本
编译器：用来将模板字符串编译成JS渲染函数的代码体积大，效率低
运行时：创建Vue实例，渲染Vnode等代码，体积小，效率高，基本就是编译的代码
UMD: 通用的模块版本，支持多种模块方式。Vue默认文件是运行时 + 编译器的UMD版本
CommonJS：用来配合老的打包工具Browserify 或 webpack1.0
ES Module：2.6之后提供两个ES Module构建文件，提供现代打包提供版本
ESM格式设计为可以被静态分析，所以攻击可以利用这点来进行“tree-shaking”，排除无用代码
Vue脚手架对webpack进行深度封装，可以通过命令行工具查看vue的配置
vue inspect
vue inspect > output.js 将vue配置输出到output.js中
查看resolve可以看到vue运行时使用的是vue.runtaime.esm.js
是运行时版本，且使用esm的方式
开发项目时会有很多单文件组件，浏览器是不支持这种方式，
vue会将单文件转换为JS对象，转换过程中会将模板转换成render函数，所以运行时不需要编译器
入口文件
查看dist/vue.js的构建过程
先执行构建 npm run dev
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",
script/config.js的执行过程
作用：生成rollup构建的配置文件
使用环境变量TARGET = web-full-dev
找到
'web-full-dev': {
entry: resolve('web/entry-runtime-with-compiler.js'), //入口
dest: resolve('dist/vue.js'), //生成文件
format: 'umd', //模块化方式
env: 'development', //模式，开发模式
alias: {
he: './entity-decoder' },
banner // 生成每一个文件头的注释内容
},
src/platform/web/entry-runtime-with-compiler.js
// 如果同时设置template 和 render此时会渲染什么？
// 如果有render。不会执行template，如果有render，直接调用组件的mount渲染render函数
const vm = new Vue({
el: "#app",
template:"hello tempalte
",
render(h){
return h("h1","hello Render")
}
})
vue 执行过程 vue-》init -》mount
Vue.prototype.$mount 执行到mount
el不能是body 或者 html
如果没有render，将template转换成render函数
如果有render函数，直接调用mount挂载DOM
const idToTemplate = cached(id => {
const el = query(id)
return el && el.innerHTML
})
// 保留 Vue 实例的$mount 方法
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
el?: string | Element,
// 非ssr情况下为false，ssr时候为true
hydrating?: boolean
): Component {
// 获取 el 对象
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 or - mount to normal elements instead.`
)
return this
}
const options = this.$options
// resolve template/el and convert to render function
// 把 template/el 转换成render函数
if (!options.render) {
let template = options.template
// 如果模板存在
if (template) {
if (typeof template === 'string') {
// 如果模板是 id 选择器
if (template.charAt(0) === '#') {
// 获取对应节点的 innerHTML
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')
}
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方法，渲染DOM
return mount.call(this, el, hydrating)
}
初始化
过程
platfroms/web 存放平台相关代码
entry-runtime-with-compiler.js 打包完整版vue入口文件
entry-runtime.js 运行时版本文件
platfroms/web/runtime/index.js 存放平台相关，运行时相关指令，注册patch以及mount方法
core/index.js initGlobalAPI挂载静态方法
core/instance/index.js 存放vue的静态函数，判断是否是vue的实例
import {
initMixin } from './init'
import {
stateMixin } from './state'
import {
renderMixin } from './render'
import {
eventsMixin } from './events'
import {
lifecycleMixin } from './lifecycle'
import {
warn } from '../util/index'
// 此处不使用 class 原因是方便后续给 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')
}
// 调用init 方法
this._init(options)
}
// 注册vm 的init方法，初始化vm
initMixin(Vue)
// 注册cm的￥data/$props/$set/$delete/$watch
stateMixin(Vue)
//初始化事件相关方法
// $on/$once/$off/$emit
eventsMixin(Vue)
// 初始化生命周期相关的混入方法
// _update/$forceUpdate/$destroy
lifecycleMixin(Vue)
// 混入render
// $nextTick/_render
renderMixin(Vue)
export default Vue
四个导出Vue 的模块
src/platforms/web/entry-runtime-with-compiler.js
web平台相关的入口
重写了平台相关的$mount
注册了Vue.compile()方法，传递一个HTML字符串返回 render函数
如果同时传入template,render，会执行render函数，没有render会将template编译成render
/* @flow */
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 {
compileToFunctions } from './compiler/index'
import {
shouldDecodeNewlines, shouldDecodeNewlinesForHref } from './util/compat'
const idToTemplate = cached(id => {
const el = query(id)
return el && el.innerHTML
})
// 保留 Vue 实例的$mount 方法
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
el?: string | Element,
// 非ssr情况下为false，ssr时候为true
hydrating?: boolean
): Component {
// 获取 el 对象
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 or - mount to normal elements instead.`
)
return this
}
const options = this.$options
// resolve template/el and convert to render function
// 把 template/el 转换成render函数
if (!options.render) {
let template = options.template
// 如果模板存在
if (template) {
if (typeof template === 'string') {
// 如果模板是 id 选择器
if (template.charAt(0) === '#') {
// 获取对应节点的 innerHTML
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')
}
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方法，渲染DOM
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
src/platforms/web/runtime/index.js
web平台相关
注册和平台相关的全局指令：v-model、v-show
注册和平台相关的全局组件：v-transtion、v-transition-group
全局方法：patch:把虚拟DOM转换成真实DOM、 $mount:挂载方法
/* @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
// extend是负责对象成员的功能
// 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
src/core/index.js
与平台无关
设置了Vue的静态方法，initGlobalAPI(Vue)，设置了vue的一些set方法，delete，nextTick
import Vue from './instance/index'
import {
initGlobalAPI } from './global-api/index'
import {
isServerRendering } from 'core/util/env'
import {
FunctionalRenderContext } from 'core/vdom/create-functional-component'
initGlobalAPI(Vue) //给vue挂载静态函数
Object.defineProperty(Vue.prototype, '$isServer', {
get: isServerRendering
})
Object.defineProperty(Vue.prototype, '$ssrContext', {
get () {
/* istanbul ignore next */
return this.$vnode && this.$vnode.ssrContext
}
})
// expose FunctionalRenderContext for ssr runtime helper installation
Object.defineProperty(Vue, 'FunctionalRenderContext', {
value: FunctionalRenderContext
})
Vue.version = '__VERSION__'
export default Vue
src/core/instance/index.js
与平台无关
定义了构造函数Vue，调用了this._init(options)方法
给Vue 中混入了常用的实例成员
import {
initMixin } from './init'
import {
stateMixin } from './state'
import {
renderMixin } from './render'
import {
eventsMixin } from './events'
import {
lifecycleMixin } from './lifecycle'
import {
warn } from '../util/index'
// 此处不使用 class 原因是方便后续给 Vue实例混入实例成员
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue) //判断是否是Vue的实例，如果不是，不是通过new调用，抛出警告
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
// 调用init 方法
this._init(options)
}
// 注册vm 的init方法，初始化vm
initMixin(Vue)
// 注册cm的$data/$props/$set/$delete/$watch
stateMixin(Vue)
//初始化事件相关方法
// $on/$once/$off/$emit
eventsMixin(Vue)
// 初始化生命周期相关的混入方法
// _update/$forceUpdate/$destroy
lifecycleMixin(Vue)
// 混入render
// $nextTick/_render
renderMixin(Vue)
export default Vue
全局的vue组件都存放在Vue.options.components中
全局环境存放在inBrowser中，在until/env中
Vue 初始化静态成员
vue官网的 全局API 设置的就是此处
vue-dev\src\core\global-api\index.js
初始化设置vue.config
设置Vue.util
设置静态方法 set,del,nextTick
设置Vue.options
注册component，directive，fiffifter
设置keep-live 注册use 注册Vue.mixin()
vue源码实现 directive 、component 、filter
/* @flow */
import {
ASSET_TYPES } from 'shared/constants'
import {
isPlainObject, validateComponentName } from '../util/index'
export function initAssetRegisters (Vue: GlobalAPI) {
/**
* Create asset registration methods.
*/
// 遍历ASSET_TYPES数组 ，为Vue 定义相应方法
// ASSET_TYPES包含 directive 、 filter 、 component
ASSET_TYPES.forEach(type => {
Vue[type] = function (
id: string,
definition: Function | Object
): Function | Object | void {
if (!definition) {
// 如果未定义 就在Vue.options上查找
return this.options[type + 's'][id]
} else {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && type === 'component') {
validateComponentName(id)
}
// Vue.component('textCom':"")
if (type === 'component' && isPlainObject(definition)) {
definition.name = definition.name || id
// 把组件配置转换为组件的构造函数
definition = this.options._base.extend(definition)
}
if (type === 'directive' && typeof definition === 'function') {
definition = {
bind: definition, update: definition }
}
// 全局注册，存储并赋值
// this.options['components']['textCom'] = definition
this.options[type + 's'][id] = definition
return definition
}
}
})
}
Vue 初始化实例成员
src/core/instance/index.js
调用了initMixin， 注册vm 的init方法，初始化vm
调用stateMixin，设置了 $data, $props , $ watch， d e l e t e / delete/ delete/watch
eventsMixin，通过订阅发布 模式，Vue挂载了on，once，off，emit
lifecycleMixin，初始化生命周期的混入_update/$ forceUpdate/$ destroy
renderMixin ，混入了render 和 nextTick
整体是在Vue或原型上挂载对应的方法
import {
initMixin } from './init'
import {
stateMixin } from './state'
import {
renderMixin } from './render'
import {
eventsMixin } from './events'
import {
lifecycleMixin } from './lifecycle'
import {
warn } from '../util/index'
// 此处不使用 class 原因是方便后续给 Vue实例混入实例成员
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue) //判断是否是Vue的实例，如果不是，不是通过new调用，抛出警告
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
// 调用init 方法
this._init(options)
}
// 注册vm 的init方法，初始化vm
initMixin(Vue)
// 注册cm的￥data/$props/$set/$delete/$watch
stateMixin(Vue)
//初始化事件相关方法
// $on/$once/$off/$emit
eventsMixin(Vue)
// 初始化生命周期相关的混入方法
// _update/$forceUpdate/$destroy
lifecycleMixin(Vue)
// 混入render
// $nextTick/_render
renderMixin(Vue)
export default Vue
init的实现
src/core/instance/init.js
export function initMixin (Vue: Class<Component>) {
// 给Vue 实例增加了 _init() 方法
// 合并 options / 初始化操作
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
vm._uid = 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
// 如果是vue实例不需要observe
vm._isVue = true
// merge options
// 合并 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 {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {
},
vm
)
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
// expose real self
vm._self = vm
// vm 的生命周期相关变量初始化
// $children / $parent / $root / $refs
initLifecycle(vm)
// vm 的事件监听变化，父组件绑定在当前组件上的事情
initEvents(vm)
// vm的编译 render初始化
// $slots /$scopedSlots / _c /$createElemt / $attrs / $listeners
initRender(vm)
// beforeCreate 的回调
callHook(vm, 'beforeCreate')
// 将inject 的成员注入到vm上
initInjections(vm) // resolve injections before data/props
// 初始化 vm 的_props/methods/_data/computed/watch
initState(vm)
// 初始化 provide
initProvide(vm) // resolve provide after data/props
// create 生命钩子的回调
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)
}
if (vm.$options.el) {
vm.$mount(vm.$options.el) // 调用mount 挂载
}
}
}
initState 的实现
src\core\instance\state.js
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props) // 初始化props，并且通过defineReactive函数将值转换为set，get
if (opts.methods) initMethods(vm, opts.methods) // 将选项中的methods注入到vue实例，
if (opts.data) {
initData(vm) //
} else {
observe(vm._data = {
}, true /* asRootData */) //转换成响应式数据
}
if (opts.computed) initComputed(vm, opts.computed) // 初始化computed
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch) // 初始化watch
}
}
首次渲染过程
