Vue.js的核心思想是数据驱动，就是指视图是由数据驱动生成的，我们对视图的修改，并不会直接去操作DOM,而是通过修改数据。 下面从源码角度来分析Vue是如何实现的。
1-new Vue做了哪些操作
首先我们可以看到vue的源码在github上有，大家可以克隆下来。 git地址 我们主要看src下的内容。
var app = new Vue({
el: '#app',
mounted:{
console.log(this.message)
}
data: {
message: 'Hello Vue!'
}
})
我们都知道new关键字在js中代表实例化一个对象，而vue实际上是一个类，类在js中是用Function来实现的，在源码的src/core/instance/index.js中
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'
// 声明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)
}
// 将Vue类传入各种初始化方法
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
export default Vue
可以看到vue只能通过new关键字初始化，然后会调用this._init方法，同时把options参数传入，_init是vue原型上的一个方法。那么接下来我们看下_init方法做了些什么。在initMixin中定义了_init方法。src/core/instance/init.js中
Vue.prototype._init = function (options?: Object) {
// this指向Vue的实例，所以这里是将Vue的实例缓存给vm变量
const vm: Component = this
//定义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
// 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
initLifecycle(vm)//初始化生命周期
initEvents(vm)//初始化事件中心
initRender(vm)//初始化渲染
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm) // 初始化state
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)
}
if (vm.$options.el) {
vm.$mount(vm.$options.el)// 调用vm上的$mount方法去挂载
}
}
Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。
当我们在chrome的console中可以看到打印出来的data.message的值。试想一下，为什么我们能够输出这个值呢？带着这个问题我们来看看initState在src/core/instance/state.js
export function initState (vm: Component) {
vm._watchers = []
//如果定义了options，则始初化options,
const opts = vm.$options
if (opts.props) initProps(vm, opts.props) //如果有props，则初始化initProps
if (opts.methods) initMethods(vm, opts.methods)//如果有methods，则初始化initMethods
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)
}
}
我们具体看下初始化的initData.
function initData (vm: Component) {
let data = vm.$options.data
data = vm._data = typeof data === 'function' //判断data类型是否是一个function，并赋值给vm._data
? getData(data, vm)
: data || {}
if (!isPlainObject(data)) { //判断data是否是一个对象，如果不是，报一堆警告
data = {}
process.env.NODE_ENV !== 'production' && warn(
'data functions should return an object:\n' +
'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
vm
)
}
// 拿到对象的keys,props,methods
const keys = Object.keys(data)
const props = vm.$options.props
const methods = vm.$options.methods
let i = keys.length
while (i--) {
const key = keys[i]
if (process.env.NODE_ENV !== 'production') {
if (methods && hasOwn(methods, key)) {
warn(
`Method "${key}" has already been defined as a data property.`,
vm
)
}
}
if (props && hasOwn(props, key)) {
process.env.NODE_ENV !== 'production' && warn(
`The data property "${key}" is already declared as a prop. ` +
`Use prop default value instead.`,
vm
)
} else if (!isReserved(key)) {
proxy(vm, `_data`, key)
}
}
// observe data
observe(data, true /* asRootData */)
}
当我们的data是一个函数的时候，会去调用getData,然后在getData中返回data。
export function getData (data: Function, vm: Component): any {
pushTarget()
try {
return data.call(vm, vm)
} catch (e) {
handleError(e, vm, `data()`)
return {}
} finally {
popTarget()
}
}
我们拿到对象的keys,props,methods时进行一个循环判断,我们在data上定义的属性值有没有在props中也被定义，如果有，则报警告，这是因为我们定义的所有值最终都会绑定到vm上，通过proxy实现，调用proxy,将_data作为sourceKey传入。
export function proxy (target: Object, sourceKey: string, key: string) {
sharedPropertyDefinition.get = function proxyGetter () {
return this[sourceKey][key] //vm._data.key会访问这
}
sharedPropertyDefinition.set = function proxySetter (val) {
this[sourceKey][key] = val
}
Object.defineProperty(target, key, sharedPropertyDefinition)
}
通过这个对象定义了一个get,set。当我们访问this.message时也就是访问了this._data.message。所以我们能获取到this.message的值。
2-Vue实例挂载的实现
Vue中我们是通过$mount实例如方法去挂载vm的，我们来看下$mount的源码，我们来分析compiler版本的$mount，在src/platform/web/entry-runtime-with-compiler.js。
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && query(el)
/* istanbul ignore if */
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
if (!options.render) {
let template = options.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')
}
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')
}
}
}
return mount.call(this, el, hydrating)
}
最开始先获取Vue原型上的$mount方法并进行缓存，然后重新定义了原型上的$mount方法。然后对el的类型进行了控制，el字符串，也可以是一个Element,然后调用了query方法，query方法呢实际上是在util/index.js中有定义，如果你是一个字符串就调用了原生的api->querySelector，如果说找不到的话，就会报一个错误，然后返回一个空的div，如果有的话就直接返回。如果不是字符串，代表着就已经是一个Dom对象，那么就直接return。然后我们拿到了el，这个时候el已经被转化成了dom对象。
紧接着对el进行了一个判断，是否是body或者doucmentElment，如果是的话那么就报错，提示你的vue不可以直接挂载在html和body上，它会将整个body覆盖。这就是我们在使用的时候一开始都会用一个
<div id="#app"></div>
然后拿到了$options,会判断有没有定义render方法，如果没有定义render方法，则会把el或template字符串转换成render方法。所有Vue的组件渲染最终都需要render方法，无论我们是单文件.vue方式开发组件，还是写了el或template属性，最终都会转换成render方法，这个过程是Vue的一个编译过程，通过compileToFunctions生成render,staticRenderFns,然后分别赋值给options.render,options.staticRenderFns。
然后就是如果没有template就会去调用getOuterHTML方法。
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
}
}
如果dom对象的outerHtml存在就直接返回，如果不存在，就直接在外面包一层，返回他的innerHTML。
原型上的$mount方法在src/platform/web/runtime/index.js中定义，这样设计完是为了复用，因为它可以被runtime only版本的Vue直接使用。
// public mount method
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}
$mount方法支持传入2个参数，第一个是el,它表示挂载的元素，第二个是和服务器渲染相关，在浏览器环境下我们不需要传第二个参数。 $mount 会去调用mountComponent方法。在src/core/instance/core/instance/lifecycle.js文件中。
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
vm.$el = el
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode
if (process.env.NODE_ENV !== 'production') {
/* istanbul ignore if */
if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
vm.$options.el || el) {
warn(
'You are using the runtime-only build of Vue where the template ' +
'compiler is not available. Either pre-compile the templates into ' +
'render functions, or use the compiler-included build.',
vm
)
} else {
warn(
'Failed to mount component: template or render function not defined.',
vm
)
}
}
}
callHook(vm, 'beforeMount')
let updateComponent
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
updateComponent = () => {
const name = vm._name
const id = vm._uid
const startTag = `vue-perf-start:${id}`
const endTag = `vue-perf-end:${id}`
mark(startTag)
const vnode = vm._render()
mark(endTag)
measure(`vue ${name} render`, startTag, endTag)
mark(startTag)
vm._update(vnode, hydrating)
mark(endTag)
measure(`vue ${name} patch`, startTag, endTag)
}
} 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
}
从上面代码我们可以看到，mountComponent核心就是先调用vm.render方法先生成虚拟Node,下面是来猜测你是出现哪里错误，还提示一些警告，然后再实例化一个渲染watcher，在它的回调函数中会高用updateComponent方法，最终调用vm._update更新DOM。 Watcher在这里起到两个作用，一个是初始化的时候会执行回调函数，另一个是当vm实例中的监测的数据发生变化时候执行回调函数。 函数最后判断为根节点的时候设置vm.isMounted为true,表示这个实例已经挂载了，同时执行mounted钩子函数。这里注意vm.$vnode表示VUE实例的父虚拟Node,所以它为Null则表示当前是根Vue的实例。
$mount实现呢还是比较清晰的，如果是在compiler版本的话，实际上是先对el做一些处理，然后尝试如果没有定义render函数的时候我们尝试去获取一下render函数，也就是把我们的template通过一系列的逻辑判断通过编译的方法去转换成render函数。
下面我们来分析下updateComponent方法里的render的源码实现。
3-render方法实现
Vue的_render方法是实例的私有方法，它用来把实例渲染成一个虚拟Node。在src/core/instance/render.js文件中：
Vue.prototype._render = function (): VNode {
const vm: Component = this
const { render, _parentVnode } = vm.$options
// reset _rendered flag on slots for duplicate slot check
if (process.env.NODE_ENV !== 'production') {
for (const key in vm.$slots) {
// $flow-disable-line
vm.$slots[key]._rendered = false
}
}
if (_parentVnode) {
vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject
}
// set parent vnode. this allows render functions to have access
// to the data on the placeholder node.
vm.$vnode = _parentVnode
// render self
let vnode
try {
vnode = render.call(vm._renderProxy, vm.$createElement)
} catch (e) {
handleError(e, vm, `render`)
// return error render result,
// or previous vnode to prevent render error causing blank component
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
if (vm.$options.renderError) {
try {
vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
} catch (e) {
handleError(e, vm, `renderError`)
vnode = vm._vnode
}
} else {
vnode = vm._vnode
}
} else {
vnode = vm._vnode
}
}
// return empty vnode in case the render function errored out
if (!(vnode instanceof VNode)) {
if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
warn(
'Multiple root nodes returned from render function. Render function ' +
'should return a single root node.',
vm
)
}
vnode = createEmptyVNode()
}
// set parent
vnode.parent = _parentVnode
return vnode
}
这里在原型上定义了一个_render,从$options中拿到这个render函数，我们了解到这个render函数可以是编译生成的也可以是用户自己写的，在这里通过render.call方法传入两个参数，一个是vm._renderProxy,一个是vm.$createElement，vm._renderProxy在生产环境下其实就是vm,vm.$createElement是在initRender函数中定义的，initRender是在init过程中执行initRender方法。如图
export function initRender (vm: Component) {
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
// normalization is always applied for the public version, used in
// user-written render functions.
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
// $attrs & $listeners are exposed for easier HOC creation.
// they need to be reactive so that HOCs using them are always updated
const parentData = parentVnode && parentVnode.data
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
!isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
}, true)
defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {
!isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)
}, true)
} else {
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)
defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)
}
}
我们看到在initRender函数中有vm._c和vm.createElement是给手写render函数创建Vnode方法。
_renderProxy的定义也是在init.js中
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
如果是生产环境，直接把vm赋值给vm._renderProxy，如果是在开发环境，调用initProxy，在src/core/instance/proxy.js中，
initProxy = function initProxy (vm) {
if (hasProxy) {
// determine which proxy handler to use
const options = vm.$options
const handlers = options.render && options.render._withStripped
? getHandler
: hasHandler
vm._renderProxy = new Proxy(vm, handlers)
} else {
vm._renderProxy = vm
}
}
可以看到这里先是去判断hasProxy，
const hasProxy =
typeof Proxy !== 'undefined' && isNative(Proxy)
hasProxy实际上就是判断我们的浏览器是否支持proxy,proxy是es6提供的api,对对象访问做一个劫持。
我们再回来看下我们的render方法，render方法实际会生成一个vnode，我们拿到这个vnode之后会判断是否是VNode的instance,如果不是的情况下是否是一个数组，如果是一个数组的话证明我们的模板有多个根节点，会返回多个vnode,这时候会报出一个警告，
'Multiple root nodes returned from render function. Render function ' +
'should return a single root node.',
所以说根节点只能有一个vnode。
4-Virtual DOM与createElement实现
Virtual Dom 它产生的前提是浏览器中的DOM是很复杂的，为了更直观的感受，我们来打印一下，
浏览器的标准就是把dom设计得很庞大，当我们频繁去更新DOM的时候，会产生一定的性能问题。 而Virtual Dom 就是利用原生的js对象去描述一个DOM节点，在vue.js中，Virtual Dom是在src/core/vdom/vnode.js中。Virtual Dom 除了它的数据结构的定义，映射到真实的DOM实际上要经历VNode的create、diff、patch等过程，在Vue.js中，VNode的create是通过之前提到的createElement方法创建的,在src/core/vdom/create-element.js
export function createElement (
context: Component,
tag: any,
data: any,
children: any,
normalizationType: any,
alwaysNormalize: boolean
): VNode | Array<VNode> {
if (Array.isArray(data) || isPrimitive(data)) {
normalizationType = children
children = data
data = undefined
}
if (isTrue(alwaysNormalize)) {
normalizationType = ALWAYS_NORMALIZE
}
return _createElement(context, tag, data, children, normalizationType)
}
它定义了6个参数，第一个是vnode的实例，第二个tag是一个标签，第三个data是跟vnode相关的一些数据，children是它的一些子节点，可以构造vnode tree完美的映射我们的dom tree,下面是对于参数个数不一致的处理，也就是data这个值可以没有，其他的参数位置向上移一个，再往下是判断alwaysNormalize,给normalizationType赋上值，然后createELement最终调用的是_createElement这个函数，createElement其实是对参数做一次封装，封装好了然后去调用_createElement去处理这个vnode。 我们来看_createElement这个函数，它会data进行了一次校验，这个data不能是响应式的，然后去调用createEmptyVNode，
export const createEmptyVNode = (text: string = '') => {
const node = new VNode()
node.text = text
node.isComment = true
return node
}
创建一个VNode实例，没有任何参数，然后把text赋值，isComment为true。然后再继续看，然后再判断了data.is，如果不是一个true的话就去返回一个空的注释节点。我们再往下看到，createElement对children做了normalize,主要是在helpers/normalize-children.js当中,simpleNormalizeChildren是对我们的children做了遍历，如果每一个元素也是一个数组的话，调用Array.prototype.concat.apply([].children)给降维成一维数组。然后再看normalizeChildren，最终也是要返回一个一维数组，数组每一个都是一个VNode，先判断children是否是基础类型，如果是直接返回一维数组，否则如果是一个数组，调用normalizeArrayChildren方法，否则就返回undefined。我们看下normalizeArrayChidlren，
function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNode> {
const res = []
let i, c, lastIndex, last
for (i = 0; i < children.length; i++) {
c = children[i]
if (isUndef(c) || typeof c === 'boolean') continue
lastIndex = res.length - 1
last = res[lastIndex]
// nested
if (Array.isArray(c)) {
if (c.length > 0) {
c = normalizeArrayChildren(c, `${nestedIndex || ''}_${i}`)
// merge adjacent text nodes
if (isTextNode(c[0]) && isTextNode(last)) {
res[lastIndex] = createTextVNode(last.text + (c[0]: any).text)
c.shift()
}
res.push.apply(res, c)
}
} else if (isPrimitive(c)) {
if (isTextNode(last)) {
// merge adjacent text nodes
// this is necessary for SSR hydration because text nodes are
// essentially merged when rendered to HTML strings
res[lastIndex] = createTextVNode(last.text + c)
} else if (c !== '') {
// convert primitive to vnode
res.push(createTextVNode(c))
}
} else {
if (isTextNode(c) && isTextNode(last)) {
// merge adjacent text nodes
res[lastIndex] = createTextVNode(last.text + c.text)
} else {
// default key for nested array children (likely generated by v-for)
if (isTrue(children._isVList) &&
isDef(c.tag) &&
isUndef(c.key) &&
isDef(nestedIndex)) {
c.key = `__vlist${nestedIndex}_${i}__`
}
res.push(c)
}
}
}
return res
}
首选定义了下最后要返回的res是一个数组，然后它遍历了这个children,如果发现某个子节点又是一个Array,就会递归调用normalizeArrayChildren把结果赋值给c,然后有一个小优化就是，开头和最后处理的节点都是文本的话，将这两个合并成为一个，然后进行push。否则如果这个children是一个基础类型，又是一个文本节点的话，就去createTextVNode方法转换成VNode类型最后呢就是把结果push，返回一个res。 经过对children的规范化，chidlren变成了一个类型为VNode的Array。
然后我们再回到createElement函数，规范化children后，接下来会去创建一个VNode的实例：
let vnode, ns
if (typeof tag === 'string') {
let Ctor
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) {
// platform built-in elements
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
)
} else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
// component
vnode = createComponent(Ctor, data, context, children, tag)
} else {
// unknown or unlisted namespaced elements
// check at runtime because it may get assigned a namespace when its
// parent normalizes children
vnode = new VNode(
tag, data, children,
undefined, undefined, context
)
}
} else {
// direct component options / constructor
vnode = createComponent(tag, data, context, children)
}
这里呢先对tag做了判断，如果是string类型，则接着判断如果是内置的一些节点，则直接创建一个普通VNode,如果是为已注册的组件名，则通过createComponent创建一个组件类型的VNode，否则创建一个未知的标签的VNode。如果是tag一个component类型，则直接调用createComponent创建一个组件类型的VNode节点。 以上呢我们大致了解了虚拟dom 和createElement,每一个VNode有children,children每个元素也是一个VNode，这样就形成了一个VNodeTree，它很好的描述了我们的DOM Tree。 再回到mountComponent函数的过程，我们已经知道vm._render是如何创建了一个VNode，接下来就是要把这个VNode渲染成一个真实的DOM并渲染出来，这个过得是通过vm._update完成的。
5-update
_update是实例的一个私有方法，主要将VNode渲染成真实的DOM,在src/core/instance/lifecycle.js中
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.
}
update调用的时机有两个，一个是在首次渲染的时候,调用update，将VNode映射成真实的DOM,还有一个是在我们改变数据的时候，数据改变也会驱动视图的变化，同样也会调update方法。然后我们往下看，定义了一些个常量，这些个是在数据改变的时候用到的，然后往下当条件判断成立的时候，会走vm.patch这个方法，
// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop
判断是否在浏览器环境，如果在有patch方法否则是一个空函数，这是因为在服务端是不可能触碰到dom的。patch方法是在patch.js文件中定义的，
export const patch: Function = createPatchFunction({ nodeOps, modules })
patch方法调用了createPatchFunction,然后返回一个函数，传入了两个值，一个是nodeOps,一个是modules,nodeOps实际是一些操作dom的方法，modules定义了一些模块的钩子函数的实现，我们来看下createPatchFunction的实现，在src/core/vdom/patch.js中，
const hooks = ['create', 'activate', 'update', 'remove', 'destroy']
export function createPatchFunction (backend) {
let i, j
const cbs = {}
const { modules, nodeOps } = backend
for (i = 0; i < hooks.length; ++i) {
cbs[hooks[i]] = []
for (j = 0; j < modules.length; ++j) {
if (isDef(modules[j][hooks[i]])) {
cbs[hooks[i]].push(modules[j][hooks[i]])
}
}
}
...
return function patch (oldVnode, vnode, hydrating, removeOnly) {
if (isUndef(vnode)) {
if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
return
}
let isInitialPatch = false
const insertedVnodeQueue = []
if (isUndef(oldVnode)) {
// empty mount (likely as component), create new root element
isInitialPatch = true
createElm(vnode, insertedVnodeQueue)
} else {
const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(oldVnode, vnode)) {
// patch existing root node
patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
} else {
if (isRealElement) {
// mounting to a real element
// check if this is server-rendered content and if we can perform
// a successful hydration.
if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
oldVnode.removeAttribute(SSR_ATTR)
hydrating = true
}
if (isTrue(hydrating)) {
if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
invokeInsertHook(vnode, insertedVnodeQueue, true)
return oldVnode
} else if (process.env.NODE_ENV !== 'production') {
warn(
'The client-side rendered virtual DOM tree is not matching ' +
'server-rendered content. This is likely caused by incorrect ' +
'HTML markup, for example nesting block-level elements inside ' +
'<p>, or missing <tbody>. Bailing hydration and performing ' +
'full client-side render.'
)
}
}
// either not server-rendered, or hydration failed.
// create an empty node and replace it
oldVnode = emptyNodeAt(oldVnode)
}
// replacing existing element
const oldElm = oldVnode.elm
const parentElm = nodeOps.parentNode(oldElm)
// create new node
createElm(
vnode,
insertedVnodeQueue,
// extremely rare edge case: do not insert if old element is in a
// leaving transition. Only happens when combining transition +
// keep-alive + HOCs. (#4590)
oldElm._leaveCb ? null : parentElm,
nodeOps.nextSibling(oldElm)
)
// update parent placeholder node element, recursively
if (isDef(vnode.parent)) {
let ancestor = vnode.parent
const patchable = isPatchable(vnode)
while (ancestor) {
for (let i = 0; i < cbs.destroy.length; ++i) {
cbs.destroy[i](ancestor)
}
ancestor.elm = vnode.elm
if (patchable) {
for (let i = 0; i < cbs.create.length; ++i) {
cbs.create[i](emptyNode, ancestor)
}
// #6513
// invoke insert hooks that may have been merged by create hooks.
// e.g. for directives that uses the "inserted" hook.
const insert = ancestor.data.hook.insert
if (insert.merged) {
// start at index 1 to avoid re-invoking component mounted hook
for (let i = 1; i < insert.fns.length; i++) {
insert.fns[i]()
}
}
} else {
registerRef(ancestor)
}
ancestor = ancestor.parent
}
}
// destroy old node
if (isDef(parentElm)) {
removeVnodes([oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
invokeDestroyHook(oldVnode)
}
}
}
invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
return vnode.elm
}
}
拿到modules,nodeOps,对hooks执行循环，遍历所有模块。然后定义了很多辅助函数，最后返回一个function patch。
以上是个人通过视频、查看各位大佬的文章总结的，后续还会有其他文章发布，如有不足之处，欢迎大家来讨论。
