• Home
  • 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

    收藏
    上一篇：vue项目sass文件找不到css背景图片：weppack报路径出错
    下一篇：vue keep-alive(1)：vue router如何保证页面回退页面不刷新？
    延伸阅读：