Vue extends 属性

引言

最近在看抖音——《小山与 bug》，看到一个很神奇的 Vue 继承组件的方法，后来专门去翻了 element 和 iview 的源码，发现这个属性的用法好像在这些框架里还没有用到过，怀着试一试的态度，我就自己搭建了个测试项目，发现其实还是挺好用的，甚至有望代替目前我们前端框架业务代码混入的底层实现。话不多说，直接上代码：

App.vue

<template>
  <div>
    <Son></Son>
  </div>
</template>
<script>
import Son from "./components/Son";
export default {
  components: {
    Son,
  },
};
</script>
<style scoped></style>

Son.vue

<template>
</template>
<script>
import HelloWorld from "./HelloWorld.vue";
export default {
  extends: HelloWorld,
  data() {
    return {
      aa: 10,
    };
  },
};
</script>

HelloWorld.vue

<template>
  <div>
    <h1>{{ aa }}</h1>
    <h1>{{ bb }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      aa: 0,
      bb: 123,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.aa += 10;
    },
  },
};
</script>
<style scoped></style>

小结

可以看到，Son 组件继承了 HelloWorld 组件，并且修改了 aa 的初始值，运行代码我们可以看到，界面上显示的 aa 变成了 20，不再是 10，那么这个 extends 属性到此其实已经初见端倪——其实 Vue 中所有的组件虽然没有写成 React 那种 class 的形式，但是实际来说也是一个类，这个时候，我们可以用 extends 实现对父组件的继承，同时也支持对这个类进行重写，这也是面向对象最为关键的一步，真没想到作为前端心心念念的面向对象，其实一直都在自己身边，只不过自己没发现。

基于上述情况，我们就可以得出一套 Vue 前端框架实现思路，就是我们先针对标准的业务逻辑开发一套代码，然后作为底层架构，然后我们在关键的地方，比如数据加载前，弹窗打开前等等有可能会编写不同的业务逻辑的地方，封装一些操作前，操作后方法，默认这些方法为空，啥都不干，当我们配置好了框架，针对每个菜单，去编写对应的组件，这些组件都要继承通用的模板，然后可以针对这些操作前，操作后方法进行重写，比如在操作前方法里加个校验，对框架的某个组件进行重写定义等等，这样就可以实现不同的业务场景复用一套代码了。