美文网首页
简单看一下mixin

简单看一下mixin

作者: HelenYin | 来源:发表于2021-03-29 10:43 被阅读0次

其实mixin的功能就是把传入的option和组件本身的option做merge
这样思考就超简单了,只需要调用mergeOptions就可以了。

mergeOptions(this.options, mixins)

这里说一下mergeOptions。mergeOptions是对传入的option进行合并的方法。
例如: 本来组件里调用了created生命周期,mixin里又传入了created,那么定义的这两个created放入一个队列里,在生命周期执行到created的时候,依次执行这个队列里的方法。
这里我们可以看一下callHook这个函数

export function callHook (vm, hook) {
  // 拿到对应的队列
  const handlers = vm.$options[hook];
  if (handlers) {
    for (const handle of handlers) {
      handle.call(vm);
    }
  }
}

因为目前实现的功能简单,只做生命周期的merge
首先遍历组件本身的option,再遍历mixins传入的对象

function mergeOptions (parent, child) {
  const options = {};

  for (const key in parent) {
    mergeField(key);
  }

  for (const key in child) {
    if (!hasOwnProperty.call(parent, key)) {
      mergeField(key);
    }
  }

  function mergeField (key) {
    const strat = strats[key] || defaultStrat;
    options[key] = strat(parent[key], child[key]);
  }

  return options;
}
function mergeHook (parentVal, childVal) {
  return childVal
    ? parentVal
      ? parentVal.concat(childVal)
      : Array.isArray(childVal)
        ? childVal
        : [childVal]
    : parentVal;
}

LIFECYCLE_HOOKS.forEach((hook) => {
  strats[hook] = mergeHook;
});
export const LIFECYCLE_HOOKS = [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
  'activated',
  'deactivated',
  'errorCaptured'
]

现在看一下到目前为止哪些地方调用了mergeOptions:

  1. Vue.prototype._init 方法中,也就是实例化Vue的时候,也就是第一次调用new Vue()的时候
vm.$options = mergeOptions(vm.constructor.options, options, vm)
  1. Vue.extends 方法中,也就是实例化组件时候
Vue.extend = function (extendOptions) {
  const Super = this;
  Sub.options = mergeOptions(Super.options, extendOptions);
}

这两类都是把类的options属性和传入的options做merge。
这样看来,如果直接调用Vue.mixin()那么后面所有的组件的options中都具备了mixin

相关文章

  • 简单看一下mixin

    其实mixin的功能就是把传入的option和组件本身的option做merge这样思考就超简单了,只需要调用me...

  • mixin、柯里化、高阶函数

    mixin 混入 最基本的 mixin 就是简单地将一个对象的属性复制给另一个对象 为了简化 mixin,ES6 ...

  • 【译文】Mixin Network:最值得开发者关注的顶级项目

    Mixin Network 在定义简单、安全、创新以及2018年区块链的开发方面做得非常出色。Mixin Netw...

  • Dart简介3--mixin

    说明 Dart 是不支持多继承的,但是它支持 mixin,简单来讲 mixin 可以 “组合” 多个类,这样就极大...

  • 对mixin公链上Dapp: mixin msg的疑问

    mixin messenger的简单介绍:是mixin公链上的dapp应用,公链以及此msg,都是李笑来及冯小东投...

  • 【译文】关于Mixin

    文章来源:Mixin 主页https://mixin.one/xin About Mixin Mixin is a...

  • 混合 mixin

    定义mixin 通过@include 名字 调用mixin mixin使用参数

  • mixins理解

    mixin,可以非常简单的理解,他就是把 一个 mixin 对象上的方法都混合到了另一个组件上,和 $.exten...

  • mixin,柯里化

    mixin 最基本的 mixin 其实就是简单地将一个对象的属性复制给另一个对象: 是不是有点像Object.as...

  • MIXIN 白皮书连载之域解读

    Mixin 域 (Mixin Domain)Mixin 域为 Mixin 内核提供资产的分布式账本。这些资产可以是...

网友评论

      本文标题:简单看一下mixin

      本文链接:https://www.haomeiwen.com/subject/aowehltx.html