vue可复用性 & 组合

前言

俗话说「懒是程序员的美德」。

在越来越注重前端工程化的今天，「Ctrl+C」、「Ctrl+V」的代码，虽然用起来一时爽，一旦需要修改就如同面临火葬场。如何「懒」出效率，是值得思考的问题。

减少代码的拷贝，增加封装复用能力，实现可维护、可复用的代码，无疑是我所认为的「懒」的高级境界。

react的高阶组件、自定义hooks等等来实现组件复用。当然vue也有对应的方案

所以就借此机会，谈谈 Vue 中各种基于组件的复用与实现方式

继承

继承是vue2提供的一个特性，vue3中已经给移除了。

通过关键字extends,我们可以让允许声明扩展另一个组件

var CompA = { ... }
var CompB = {
  extends: CompA,
  data(){return{...}}
}

如上 CompB组件便可以直接访问CompA组件的属性和方法，非常的方便

Vue.extend 和这个原理一样，不过Vue.extend主要是用于编写全局插件用，如Toast

如果看过vue源码，就能知道extend的方法实现其实就是js组合式继承方案

混淆

目前vue2和vue3均支持

// 定义一个混淆对象
const myMixin = {
    created: function () {
        this.hello()
    },
    methods: {
        hello: function () {
            console.log('hello from mixin!')
        }
    }
}

// 组件局部混入
export default {
    mixins: [myMixin],
    data() { return {...} },
}

在vue3中之所以依然保留，是因为vue3推崇的混合式函数继承方案（不懂得下边有说明），无法做到混入复用钩子函数。

混合式函数

此方案只能用在vue3的混合式api的组件中

此方案解决最大的问题就是 响应式数据（状态）的复用。

在次之前，普通方法复用我可以提取出去一个js文件，钩子复用我可以用mixins，唯独状态复用只能extends或 mixins。

extends是基于js继承方案之组合式继承，它的弊端大家都知道

mixins弊端，在vue3文档有说明

在 Vue 2 中，mixin 是将部分组件逻辑抽象成可重用块的主要工具。但是，他们有几个问题：

Mixin 很容易发生冲突：因为每个 mixin 的 property 都被合并到同一个组件中，所以为了避免 property 名冲突，你仍然需要了解其他每个特性。

可重用性是有限的：我们不能向 mixin 传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑方面的灵活性。

为了解决这些问题，我们添加了一种通过逻辑关注点组织代码的新方法：组合式 API。

/src/composables/use-student.js

import axios from "axios";
import { ref } from "vue";

const useStudent = () => {
  const student = ref([]);
  const syncStudent = async () => {
    const res = await axios.get("/getStudent");
    student.value = res.data.list;
  };
  return { student, syncStudent };
};

export default useStudent;

/src/App.vue

<script setup>
import useStudent from '../composables/use-student';
const { student, syncStudent } = useStudent();
</script>
<template>
  <div id="app">
    {{ JSON.stringify(student) }}
    <button @click="syncStudent">测试</button>
  </div>
</template>

附赠一个上边例子的mock

Mock.mock("/getStudent",options=>{
  return Mock.mock({
    "list|2":[{
      id:()=>Random.guid(),
      name: ()=>Random.cname(),
      age:()=>Random.integer(1,100)
    }]
  })
})

其它

extends和mixins都可以用来复用状态，

但是后来被混合式函数继承给取代来，

混合式函数继承写起来更加通俗易懂和没有副作用，

因mixins可以混入钩子，而混合式函数继承却不可以，故而mixins被保留了下来（类似于达到react的高阶组件能力）

除了以上说的3种方案可以到达组合&可复用外，提取组件本身就是所谓组合的一种体现，当然还有以下

• 指令
• 插件
• teleport & render