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
