在Vue 2.x 中会使用 mxins 对 Vue 构造函数进行原型链上的方法或属性的定义
方法 | 作用 |
---|---|
initMixin(Vue) | 混入 vm._init |
stateMixin(Vue) | 新建空对象并与vm.$data,vm.$props(对应 this._data,this._props)相关联(同时修改defData 和 defProps 的 get,set,不允许任意新增值); 新增$set,$delete,$watch |
eventsMixin(Vue) | $on,$once,$off,$emit |
lifecycleMixin(Vue) | _update,$forceUpdate,$destroy |
renderMixin(Vue) | $nextTick,_render, |
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 {}