Vue2 中的 extends 和 mixins

前言

这篇文章虽然说的是 Vue 中的 mixins 和 extends 的,但可以通过它们来学会实战中的代码组织方式。

mixins 组件中共用的代码抽离出来,放到一个 mixin.js 文件中,然后在组件中通过 mixins 属性混入mxin.js 文件(简单的理解就是),从而得到一些预先定义好的属性、方法。

extends :对某个组件进行扩展,也就是在原有组件的基础之上编写代码。

通过它们我们可以更好地组织代码。让代码得到更好的复用。从而提高开发效率。

本文主要想记录下它们使用过程中的执行顺序,因为这个很重要。

官方解说:

  1. 数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
  2. 同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
  3. 值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。

我想这已经说得很明白了,贴出来只是方便日后查看。

extends 也使用同样的策略进行合并。现在问题来了,那么如果一个组件同时使用 mixins 和 扩展会怎么样呢?是 mixins 中的钩子函数优先还是扩展基类中的钩子函数优先呢?

extends 优先,然后 mixin 最后才是组件本身。

题外话:

在平时的开发当中 minins 用得比较多一些, extends 用得相对来会比较少。下面有一个场景你可以考虑使用 extends 。比如:使用第三方 UI 库的时候遇到了一个库中的某个组件实现有问题,此时你就可以对这个组件进行二次封装,通过 extends 继承这个组件然后在自己的组件当中重写第三方库组件中的某个方法。不难想像,既然可以通过这种方式来修复 bug,你当然也可以通过 extends 来扩展它。