• home > webfront > ECMAS > vue >

    vue mixins、Vue.extend() 、extends使用注意事项笔记

    Author:zhoulujun Date:

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


    mixins

    官方对mixin的定义:mixin(混入),提供了一种非常灵活的方式,来分发vue组件中的可复用功能

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

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

    mixins应用场景:

    在项目中,如果我们需要提取公用的数据或者通用的方法,并且这些数据与方法不需要组件间进行维护,就可以使用mixins。

    Mixin是面向对象程序设计语言中的类,提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类(Vue.extend({}))。

    Mixin类通常作为功能模块使用,在需要该功能时“混入”,有利于代码复用又避免了多继承的复杂,。

    混合对象可以包含任意组件选项——其本质就是一个js对象,可以包含我们组件想要复用的任意功能和生命周期,如:data、created、methods、computed等等。

    以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。

    混合规则

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

      例如 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监听回调函数,权重小的 先执行

    mixins与extent区别:

    • mixin:是对Vue类的options进行混入。所有Vue的实例对象都会具备混入进来的配置行为。

    • extend:是产生一个继承自Vue类的子类,只会影响这个子类的实例对象,不会对Vue类本身以及Vue类的实例对象产生

    extends

    mixins 类似,当主要是为了便于扩展单文件组——mixins可以混入多个mixin,extends只能继承一个。

    mixins类似于面向切面的编程(AOP),extends类似于面向对象的编程

    extend,extends和mixins三种方式接收的options,最终都是通过mergeOptions进行合并的.差异只是官方文档中提到的优先级不同extend > extends > mixins. 所以,如果是简单的扩展组件功能,三个方式都可以达到目的。

    其实这种方式,我是极力去避免这种实现方式的。作为一个曾经的java程序员,个人还是喜欢ES6 class ,OPP真香!

    参考文章:

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

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

    vue中mixins、extends、extend使用及区别 https://blog.csdn.net/qq_26443535/article/details/107803358

    你对vue的mixin的理解,有哪些应用场景 https://www.jianshu.com/p/a91d40214604





    转载本站文章《vue mixins、Vue.extend() 、extends使用注意事项笔记》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8235.html

    延伸阅读: