前言
俗话说「懒是程序员的美德」。
在越来越注重前端工程化的今天,「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)
}]
})
})