vue操作數(shù)據(jù)改變更新視圖

new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */)

Vue.prototype.$mount = function (
 el?: string | Element,
 hydrating?: boolean
): Component {
 el = el && inBrowser ? query(el) : undefined
 return mountComponent(this, el, hydrating)
}

export function mountComponent (
 vm: Component,
 el: ?Element,
 hydrating?: boolean
): Component {
 vm.$el = el // 放一份el到自己的屬性里
 if (!vm.$options.render) { // render應(yīng)該經(jīng)過處理了, 因?yàn)槲覀兘?jīng)常都是用template或者vue文件
 // 判斷是否存在render函數(shù), 如果沒有就把render函數(shù)寫成空VNode來避免紅錯(cuò), 并報(bào)出黃錯(cuò)
 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) {
 // 不看這里的代碼了, 直接看else里的, 行為是一樣的
 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
 // 注冊一個(gè)Watcher
 new Watcher(vm, updateComponent, noop, null, 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
}

if (isRenderWatcher) {
 vm._watcher = this
 }

updateComponent = () => {
 vm._update(vm._render(), hydrating)
 }

Vue.prototype._render = function (): VNode {
 const vm: Component = this
 const { render, _parentVnode } = vm.$options // todo: render和_parentVnode的由來
 // 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) {
 // catch其實(shí)不需要看了, 都是做異常處理, _vnode是在vm._update的時(shí)候保存的, 也就是上次的狀態(tài)或是null(init的時(shí)候給的)
 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
 }
}

vnode = render.call(vm._renderProxy, vm.$createElement)

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
 const vm: Component = this
 if (vm._isMounted) {
 callHook(vm, 'beforeUpdate')
 }
 // 記錄update之前的狀態(tài)
 const prevEl = vm.$el
 const prevVnode = vm._vnode
 const prevActiveInstance = activeInstance
 activeInstance = vm
 vm._vnode = vnode
 // Vue.prototype.patch is injected in entry points
 // based on the rendering backend used.
 if (!prevVnode) { // 初次加載, 只有_update方法更新vm._vnode, 初始化是null
 // initial render
 vm.$el = vm.patch( // patch創(chuàng)建新dom
 vm.$el, vnode, hydrating, false /* removeOnly */,
 vm.$options._parentElm,
 vm.$options._refElm
 )
 // no need for the ref nodes after initial patch
 // this prevents keeping a detached DOM tree in memory (#5851)
 vm.$options._parentElm = vm.$options._refElm = null
 } else {
 // updates
 vm.$el = vm.patch(prevVnode, vnode) // patch更新dom
 }
 activeInstance = prevActiveInstance
 // 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.
 }