03. 认识 Vue 对象(三)

KimYYXIP属地: 江苏
字数 795

接上篇:02. 认识 Vue 对象(二)


今天我们一口气,把剩下的 lifecycleMixin(Vue)renderMixin(Vue) 都解决了💪。

lifecycleMixin(Vue) 新增 3 个方法:

  • Vue.prototype._update
  • Vue.prototype.$forceUpdate
  • Vue.prototype.$destroy

✨ _update

这个方法在源码中没有被直接使用,而是被包裹在一个 updateComponent 方法中,作为第二个参数传给 Watcher 实例。

_update 方法的作用就是更新 Vue 实例的虚拟节点 vnode 和关联的 DOM 对象 $el。在这个方法中有个重要的方法 vm.__patch__,我们在后面碰到的时候再详细说。

✨ $forceUpdate

该方法是强制 Vue 实例重新渲染,实现方法就是调用 vm._watcherupdate() 方法。vm._watcherWatcher 的一个实例,update 的方法调用链其实很长,我下面简单写一下

watcher.update -> watcher.run -> watcher.get -> (watcher.getter = _update)

注意啦!这里的 getter 方法引用的就是上面提到的 _update 方法

✨ $destroy

销毁 Vue 实例,包括该实例绑定的一切对象。大概会经历如下过程:

  1. 调用 beforeDestroy 钩子
  2. 如果有父对象,则从父对象的 parent.$children 中移除自身
  3. 关闭存在的 Watcher 监听:vm._watcher.teardown() & vm._watchers[i].teardown()
  4. 关闭存在于 data 上的 Observer 监听:vm._data.__ob__.vmCount--
  5. 调用 destroyed 钩子
  6. 移除实例上的监听:vm.$off()

上面好些实例上的属性大家可能并不熟悉,别着急,后面看到实例化对象的时候就清楚了。


下面是我们《认识 Vue 对象》的最后一个 Part:renderMixin(Vue),赶紧来看看你这个方法都对我们的 Vue 做了些什么:

首先执行了一个 installRenderHelpers(Vue.prototype) 方法,大家不要小看这一行代码,其实里面大有乾坤,大家看下面的源码自行感受下

// target 就是 Vue.prototype
export function installRenderHelpers (target: any) {
  target._o = markOnce
  target._n = toNumber
  target._s = toString
  target._l = renderList
  target._t = renderSlot
  target._q = looseEqual
  target._i = looseIndexOf
  target._m = renderStatic
  target._f = resolveFilter
  target._k = checkKeyCodes
  target._b = bindObjectProps
  target._v = createTextVNode
  target._e = createEmptyVNode
  target._u = resolveScopedSlots
  target._g = bindObjectListeners
}

这个方法给 Vue 对象赋予了一堆方法的短名称,至于这些方法有什么用,我们后面碰到一个再解释一个吧。

然后是新增 2 个常规方法 Vue.prototype.$nextTickVue.prototype._render

✨ $nextTick

这个方法,涉及 JS 的Event Loop 机制:宏观(macro)事件队列和微观(micro)事件队列,先执行微观任务队列,当微观任务队列清空后,再执行宏观任务。

Vue 默认使用 Promise 将该方法传入的回调方法加入微观队列中,在宿主环境不支持 Promise 的情况下,使用宏观队列。

将回调放入微观事件队列的方法有:

  • Promise

将回调放入宏观事件队列的方法有:

  • setImmediate
  • MessageChannel
  • setTimeout

✨ _render

这是个很关键的方法,用于 vue 实例的渲染。这个方法也不会被直接调用(我们发现 _ 开头的方法一般都不会直接调用),它是在 _update 方法里被调用的(这个方法是不是很熟?往上面翻翻)。这个 _render 方法会执行 vm.$options.render 方法,这个方法可是大有来头,我们后面会看到。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
0人点赞
KimYYX标签:80后奶爸 / 前端码农 / 半吊子全栈<br>坐标:江苏 / 苏州<br>格言:在对的...
总资产45共写了2.1W字获得41个赞共15个粉丝

推荐阅读更多精彩内容

  • 前言 Vue.js 的核心包括一套“响应式系统”。 “响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码...
    NARUTO_86阅读 37,628评论 8 86
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,071评论 4 129
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,072评论 0 29
  • 下面我就来看看Vue的核心构造器以及其实例的属性和方法。 Vue构造器 从 'src/core/index.js'...
    小A家的铭阅读 3,091评论 0 0
  • 本文是lhyt本人原创,希望用通俗易懂的方法来理解一些细节和难点。转载时请注明出处。文章最早出现于本人github...
    lhyt阅读 2,230评论 0 4