• home > webfront > ECMAS > vue >

    vue mixins混合使用Vue.extend()

    Author:zhoulujun Date:

    mixins也相当于封装,提取公共部分,但不像类的继承,会完全覆盖父类,这里面的混合,有点绕人。值为对象的选项,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。值为函数的选项,会混合一起(都会执

    面向对象有类、接口继承,react里面有高阶组件,vue 里面还有slot,plugin

    mixins也相当于封装,提取公共部分,但不像类的继承,会完全覆盖父类,这里面的混合,有点绕人。

    Mixins在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。

    混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。

    混合规则

    • 值为对象的选项,将被混合为同一个对象两个对象键名冲突时,取组件对象的键值对

      例如 methods, components 和 directives,会被组件对应变量、方法覆盖

    • 值为函数的选项,会混合一起(都会执行函数里面的内容)混合对象的 钩子将在组件自身钩子 之前

      例如:vue生命周期函数,会被合并调用,mixins里面的先执行。

    • 自定义选项合并策略, Vue.config.optionMergeStrategies 

      Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {// return mergedVal }

    包含异步请求函数,不要返回结果而是直接返回异步函数

    export default {
      methods: {
        async fun_demo () {
          return new Promise(resolve => {
            setTimeout(() => resolve(1), 0)
          })
        }
      }
    }

    规律就是:对象像Object.assign,函数就合并执行

    混合权重

    类似css权重规则(其实没有权重这个东西,但是结果是一样的,只是觉得这样好理解而已)

    *、全局 选项

    1、......省略无数可能存在的嵌套 mixin

    10、组件 - mixin - mixin

    100、组件 - mixin

    1000、组件选项

    规律就是:对象权重高的会覆盖权重低的,函数是权重高的函数先执行,生命周期函数,权重小的先执行watch监听回调,权重小的 先执行

    mixins合并总结:

    • 覆盖的:data,props,methods,computed,inject

    • 直接替换:el,template,propData

    • 合并的:

      • methods,权重高的函数先执行

      • 生命周期函数,watch监听回调函数,权重小的 先执行



    参考文章:

    vue中mixins的使用方法和注意点 https://www.cnblogs.com/Ivy-s/p/10022636.html

    【Vue原理】Mixin - 白话版 https://zhuanlan.zhihu.com/p/53491958



    转载本站文章《vue mixins混合使用Vue.extend() 》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8235.html