[JavaScript知识库]vue 源码理解分解之 mixins

在Vue 2.x 中会使用 mxins 对 Vue 构造函数进行原型链上的方法或属性的定义

stateMixin(Vue) 混入状态相关的属性

dataDef.get = function (this: Component) { return this._data };
propsDef.get = function (this: Component) { return this._props };

Object.defineProperty(Vue.prototype, '$data', dataDef);
Object.defineProperty(Vue.prototype, '$props', propsDef);

// 对应 Observer 中的 set , del
Vue.prototype.$set = set;
Vue.prototype.$delete = del;

// 针对当前 vm 创建一个 Watcher , 并对 cb 参数进行 对象兼容
Vue.prototype.$watch = function (
    expOrFn: string | Function,
    cb: any,
    options?: WatcherOption
  ): unwatch{}

eventsMixin(Vue) 混入事件相关方法

// 对 vm 中的 _events 进行修改
Vue.prototype.$on
Vue.prototype.$once
Vue.prototype.$off

//以当前vm 为上下文触发vm._events[event];
Vue.prototype.$emit

lifecycleMixin(Vue) 混入生命周期的属性

// 调用__patch__
Vue.prototype._update = function (vnode: VNodeInstance, hydrating?: boolean) {}
// 强制调用 vm._watcher.update() 更新视图
Vue.prototype.$forceUpdate = function () { }
// 1. 触发beforeDestroy , 改变 _isBeingDestroyed
// 2. 删除 $children，vm._watcher.teardown()， vm._watchers[i].teardown() 清空 watcher
// 3. 递减 data.ob => vm._data.__ob__.vmCount--  , _isDestroyed 
// 4. vm.__patch__(vm._vnode, null) , 触发 destroyed
// 5. vm.$off(), vm.$el.__vue__ = null, vm.$vnode.parent = null
 remove(parent.$children, vm)
Vue.prototype.$destroy = function () { }

renderMixin(Vue) 混入渲染相关的属性

Vue.prototype.$nextTick()
// 根据 $options._parentVnode 生成 vm.$scopedSlots
// vm.$vnode = _parentVnode
// 根据 $options.render 生成当前 vnode
// vnode.parent = _parentVnode
Vue.prototype._render = function (): VNodeInstance {}