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)
    }]
  })
})

vue中实现组件复用

上一篇:在浏览器中输入URL并回车后都发生了什么?


下一篇:centos8编译安装php8