day100-vuejs源码-VNode笔记

前言

vuejs中的VirtualDOM(VNode)在重新渲染ViewModel时非常重要。
什么时候调用?

数据变化 -> set监测到 ->
dep.notify()通知Watcher ->
Watcher调用其get()监测新值之后update()
??还是直接通过get方法执行vm._update(vm._render(), hydrating)


_update方法

Vue.prototype._update = function (vnode: VNode, hydrating?: Boolean) {
const vm: Component = this
if (vm._isMounted) {
callHook(vm, 'beforeUpdate')
}
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.
// _patch_被用作一个入口
if (!prevVnode) {
// initial render,新老vnode节点相比较
vm.$el = vm.__patch__(
vm.$el, vnode, hydrating, false,
vm.$options._parentElm,
vm.$options._refElm
)
} else {
// updates
vm.$el = vm.__patch__(prevVnode, vnode)
}
activeInstance = prevActiveInstance
// update __vue__ reference
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.
}

参考

  1. VirtualDOM与diff(Vue实现).MarkDown
文章作者: lmislm
文章链接: http://lmislm.com/2019/04/22/2019-04-22/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog