vue 源码理解分解之 mixins

最新推荐文章于 2024-10-23 18:32:41 发布

of_undefined.

最新推荐文章于 2024-10-23 18:32:41 发布

阅读量326

点赞数

分类专栏： vue 源码

本文链接：https://blog.youkuaiyun.com/u014655053/article/details/118711739

版权

vue 源码专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了Vue2.x中的混入（mixins）机制，包括initMixin、stateMixin、eventsMixin、lifecycleMixin和renderMixin的功能和实现原理。通过混入，可以将通用的方法或属性添加到Vue实例中，如数据响应式、事件处理、生命周期方法和渲染逻辑等，增强了代码复用和组件的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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 {}