Vue3重构案例（使用vue3的语法重构element的button组件）

这篇文章紧接的上一篇文章，上篇文章是对给element的button组件写了一个单元测试，这篇文章是使用vue3的语法进行重构，这里说一下单元测试和重构的联系，当你给组件写了单元测试之后，重构会减少你很多的debug时间，磨刀不误砍柴工，这里推荐大家先从上一篇文章看起：https://www.jianshu.com/p/01d2860607c1

vue3.0发布，大家是不是很兴奋呢！又可以拿头发换钱了，唉！命苦。

人如其名，本文的主题就是使用vue3的语法重构element的button组件

上才艺！

先来看一下element的button.vue本身是什么样子

<template>
  <button
    class="el-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle,
      },
    ]"
  >
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
export default {
  name: 'ElButton',

  inject: {
    elForm: {
      default: '',
    },
    elFormItem: {
      default: '',
    },
  },

  props: {
    type: {
      type: String,
      default: 'default',
    },
    size: String,
    icon: {
      type: String,
      default: '',
    },
    nativeType: {
      type: String,
      default: 'button',
    },
    loading: Boolean,
    disabled: Boolean,
    plain: Boolean,
    autofocus: Boolean,
    round: Boolean,
    circle: Boolean,
  },

  computed: {
    _elFormItemSize() {
      return (this.elFormItem || {}).elFormItemSize;
    },
    buttonSize() {
      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
    },
    buttonDisabled() {
      return this.disabled || (this.elForm || {}).disabled;
    },
  },

  methods: {
    handleClick(evt) {
      this.$emit('clicked', evt);
    },
  },
};
</script>

重构思路：我们先一步步把每个方法、每个属性分解开，先挑软柿子捏，一步步的把他按照vue3的Composition API手法进行重构。

重构handleClick方法

重构前

<script>
export default{
   methods: {
    handleClick(evt) {
      this.$emit('clicked', evt);
    },
  },
}
</script>

重构后

<script>
export default{
  setup(props, {emit}) {
    const handleClick = (evt) => {
      emit('clicked', evt);
    };
    return {
      handleClick,
    };
  },
}
</script>
重构buttonDisabled属性

重构前

<script>
export default{
   computed: {
    buttonDisabled() {
      return this.disabled || (this.elForm || {}).disabled;
    },
  },
}
</script>

重构后

<script>
const usebuttonDisabled = (disabled) => {
  const elForm = inject('elForm', {});
  const buttonDisabled = computed(() => {
    return disabled.value || elForm.disabled;
  });
  return buttonDisabled;
};
export default{
  setup(props, {emit}) {
    const {disabled} = toRefs(props);
    const buttonDisabled = usebuttonDisabled(disabled);
    return {
      buttonDisabled,
    };
  },
}
</script>

这边说一下重构buttonDisabled这个属性的时候，遇到的一些坑。

1.解构props里面的值的时候，会使这个属性失去响应式，从而导致页面报错。
如果我在解构props的disabled属性的时候这样写

 const {disabled} = props;

那么就会报如下错误：


image.png

大概翻译下就是 ：
从' setup() '根作用域中的' props '获取值将导致该值失去反应性。

所以需要我们用一个toRefs()这样一个api来解决这个问题

 const {disabled} = toRefs(props);

toRefs()这个方法可以使一个对象变成响应式对象

重构buttonSize属性

重构前

<script>
export default{
   computed: {
    buttonSize() {
      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
    },
  },
}
</script>

重构后

<script>
const useButtonSize = (size) => {
  const elFormItem = inject('elFormItem', {});
  const _elFormItemSize = computed(() => {
    return elFormItem.elFormItemSize;
  });
  const buttonSize = computed(() => {
    return (
      size.value ||
      _elFormItemSize.value ||
      (getCurrentInstance().ctx || {})._elFormItemSize
    );
  });
  return buttonSize;
};

setup(props, {emit}) {
   const {size} = toRefs(props);
   const buttonSize = useButtonSize(size)
   return {
     buttonSize
   };
},
</script>

注意：
computed返回的是一个ref对象，所以在使用的时候要用.value

遇到的坑：
当props中，如果某个属性没被给默认值也就是没有分配内存空间，就转换不成ref对象

如果我的props的值是这样，因为解构会使props值失去响应式，所以我想用toRefs()，转化成响应式对象，

<script>
  props:{
    size:String
}

setup(props){
  const {size} = toRefs(props);
  console.log('-----------------',size)
}
</script>

当我们输出size一看，发现是undefined，what？

image.png

当我们给size设置一个默认值""

<script>
  props:{
    size:{
      type:String,
      default:''
  }
}

setup(props){
  const {size} = toRefs(props);
  console.log('-----------------',size)
}
</script>

输出size的时候，就是一个ref对象


image.png

如此，全部重构完毕；
贴一份重构完成的代码：

<template>
  <button
    class="el-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle,
      },
    ]"
  >
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
import {computed, getCurrentInstance, inject, toRefs, unref} from 'vue';
const usebuttonSize = (size) => {
  const elFormItem = inject('elFormItem', {});

  const _elFormItemSize = computed(() => {
    return unref(elFormItem.elFormItemSize);
  });
  const buttonSize = computed(() => {
    return (
      size.value ||
      _elFormItemSize.value ||
      getCurrentInstance().ctx._elFormItemSize
    );
  });
  return buttonSize;
};
const userButtonDisabled = (disabled) => {
  const elForm = inject('elForm', {});

  const buttonDisabled = computed(() => {
    return disabled.value || elForm.disabled;
  });
  return buttonDisabled;
};
export default {
  name: 'ElButton',

  inject: {
    elForm: {
      default: '',
    },
    elFormItem: {
      default: '',
    },
  },

  props: {
    type: {
      type: String,
      default: 'default',
    },
    size: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    nativeType: {
      type: String,
      default: 'button',
    },
    loading: Boolean,
    disabled: Boolean,
    plain: Boolean,
    autofocus: Boolean,
    round: Boolean,
    circle: Boolean,
  },

  computed: {
    _elFormItemSize() {
      return (this.elFormItem || {}).elFormItemSize;
    },
    // buttonSize() {
    //   return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
    // },
    // buttonDisabled() {
    //   return this.disabled || (this.elForm || {}).disabled;
    // },
  },

  methods: {
    // handleClick(evt) {
    //   this.$emit('clicked', evt);
    // },
  },
  setup(props, {emit}) {
    const handleClick = (evt) => {
      emit('clicked', evt);
    };
    const {disabled, size} = toRefs(props);
    // 重构butonDisabled属性
    const buttonDisabled = userButtonDisabled(disabled);

    // 重构buttonSize属性

    const buttonSize = usebuttonSize(size);
    return {
      handleClick,
      buttonDisabled,
      buttonSize,
    };
  },
};
</script>
© 著作权归作者所有,转载或内容合作请联系作者


喜欢的朋友记得点赞、收藏、关注哦！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/774668.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Transformer和Mamba强强结合！最新混合架构全面开源，推理速度狂飙8倍

Transformer和Mamba强强结合！最新混合架构全面开源，推理速度狂飙8倍

最近发现&#xff0c;将Mamba和Transformer模块混合使用&#xff0c;效果会比单独使用好很多&#xff0c;这是因为该方法结合了Mamba的长序列处理能力和Transformer的建模能力&#xff0c;可以显著提升计算效率和模型性能。 典型案例如大名鼎鼎的Jamba&#xff1a;Jamba利用Tr…
阅读更多...
【Unity小知识】UnityEngine.UI程序集丢失的问题

【Unity小知识】UnityEngine.UI程序集丢失的问题

问题表现 先来说一下问题的表现&#xff0c;今天在开发的时候工程突然出现了报错&#xff0c;编辑器提示UnityEngine.UI缺少程序集引用。 问题分析与解决&#xff08;一&#xff09; 既然是程序集缺失&#xff0c;我们首先查看一下工程项目是否引用了程序集。在项目引用中查找一…
阅读更多...
自定义流程表单开发优势体现在什么地方？

自定义流程表单开发优势体现在什么地方？

提质、增效、降本&#xff0c;应该是很多职场办公需要实现的发展目标。那么&#xff0c;应用什么样的软件平台可以实现&#xff1f;低代码技术平台、自定义流程表单开发是目前流行于职场行业中的软件产品&#xff0c;可视化操作界面、够灵活、易维护等优势特点明显&#xff0c;…
阅读更多...
java项目总结4

java项目总结4

1.正则表达式 用于验证字符串是否满足自己所需要的规则。方法&#xff1a;matches 注意&#xff1a;\在Java中有特殊涵义&#xff0c;是将其它的意思本来化&#xff0c;假设"是用来引用字符串的&#xff0c;但是你如果想要输出它&#xff0c;那是不是就变成了System.out…
阅读更多...
气压传感器在自动驾驶汽车还有哪些应用场景

气压传感器在自动驾驶汽车还有哪些应用场景

气压传感器在近年来被广泛应用于各种新兴领域&#xff0c;以下是其中几个最新的应用&#xff1a; 1、自动驾驶汽车&#xff1a;自动驾驶汽车需要精确的气压传感器来监测道路上的气压变化&#xff0c;帮助车辆进行准确的定位和导航。气压传感器可以提供高精度、可靠的气压数据&…
阅读更多...
利用git将Qt代码托管到U盘或者网盘

利用git将Qt代码托管到U盘或者网盘

文章目录 1.前言2.解决方案3.操作步骤3.1.软件安装3.2.在U盘创建裸仓库3.3.创建Qt程序并将代码上传至U盘3.4.版本标记及切换3.4.在别的电脑上clone代码出来 4.其他5.结语 1.前言 我们在开发项目时&#xff0c;随着项目需求的增加以及bug的修复&#xff0c;肯定会涉及到版本管理…
阅读更多...
【山东大学】web数据管理——复习笔记

【山东大学】web数据管理——复习笔记

写在前面 若有图片加载失败&#xff0c;请科学上网 。本文为对软件学院连老师的PPT课件总结所得的复习笔记&#xff0c;仅供参考。不保证对考点的全覆盖&#xff0c;以PPT为主。对往年考过的题相关知识点前面都标注了“考过”&#xff0c;并高亮&#xff0c;供参考。写的比较匆…
阅读更多...
智能插座搭配BIOS唤醒功能实现远程定时开关机

智能插座搭配BIOS唤醒功能实现远程定时开关机

智能插座 智能插座凭借其强大的联网能力&#xff0c;不仅能够实现远程操控开关电源&#xff0c;部分高端型号更是集成了电量统计与自动化操作功能&#xff0c;为用户带来了前所未有的便捷体验。以下是我对几款体验过的智能插座的简要评价&#xff0c;因版本差异可能有所不同。…
阅读更多...
分享6个自己每天都会打开的网站

分享6个自己每天都会打开的网站

分享6个自己每天都会打开的网站&#xff0c;有实用办公网站&#xff0c;也有休闲摸鱼网站&#xff0c;链接直达&#xff0c;速看~ 1、鸠摩搜索 https://www2.jiumodiary.com/ 一个免费的电子书下载网站&#xff0c;页面干净无广告&#xff0c;只有一个搜索框&#xff0c;输入…
阅读更多...
Playwright之录制脚本转Page Object类

Playwright之录制脚本转Page Object类

Playwright之录制脚本转Page Object类 设计思路 &#xff1a; 我们今天UI自动化设计的时候&#xff0c;通常会遵循一些设计模式&#xff0c;例如Page Object模式。但是自己找元素再去填写有一些麻烦&#xff0c;所以我们可以通过拆解录制的脚本&#xff0c;将其中的元素提取出来…
阅读更多...
vue3中pinia使用持久化管理

vue3中pinia使用持久化管理

安装插件 npm install pinia pinia-plugin-persistpinia进行注册 创建index.ts import { createPinia } from pinia; //对外暴露大仓库 export default createPinia(); 在mian.ts //引入pinpa import { createApp } from vue //引入根组件 import App from ./App.vue const…
阅读更多...
class类和style内联样式的绑定

class类和style内联样式的绑定

这里的绑定其实就是v-bind的绑定&#xff0c;如代码所示&#xff0c;div后面的引号就是v-bind绑定&#xff0c;然后大括号将整个对象括起来&#xff0c;对象内先是属性&#xff0c;属性后接的是变量&#xff0c;这个变量是定义在script中的&#xff0c;后通过这个变量&#xff…
阅读更多...
CAN转PN网关模块连接激光切割机的配置方法

CAN转PN网关模块连接激光切割机的配置方法

激光切割机在工业生产中被广泛应用&#xff0c;而激光发射器与控制设备常以不同的协议存在两者之间&#xff0c;CAN总线和Profinet以各自的特点被广泛用于设备当中。本文将介绍介绍兴达易控CAN转Profinet网关模块&#xff08;XD-PN_CAN20&#xff09;连接 CAN 激光切割机的使用…
阅读更多...
【算法 - 哈希表】两数之和

【算法 - 哈希表】两数之和

这里写自定义目录标题 两数之和题目解析思路解法一 &#xff1a;暴力枚举 依次遍历解法二 &#xff1a;使用哈希表来做优化 核心逻辑为什么之前的暴力枚举策略不太好用了&#xff1f;所以&#xff0c;这就是 这道题选择 固定一个数&#xff0c;再与其前面的数逐一对比完后&…
阅读更多...
如何在 Ubuntu上搭建 LAMP

如何在 Ubuntu上搭建 LAMP

远程登录 Ubuntu系统环境 ssh (User)(IP) # 比如&#xff1a;ssh lennlouis192.168.207.128 为安全起见&#xff0c;建议你使用 root 登录 VPS 后创建一个具有 sudo 权限的帐号。 安装和配置 Apache 2 Apache Http Server 是一个开源的&#xff0c;非常流行&#xff0c;使用…
阅读更多...
RAG 为什么需要文本分割（Chunking）

RAG 为什么需要文本分割（Chunking）

Picone上的一个博客&#xff0c;翻译过来学习一下&#xff0c;其中加入了一些个人的理解和调整&#xff0c;有兴趣更深入研究的可以看一下文章的原文。 为什么需要文本分割&#xff08;Chunking&#xff09; 在构建与LLM相关的应用程序时&#xff0c;Chunking是将大量文本分解…
阅读更多...
anaconda命令大全

anaconda命令大全

目录 查看所有虚拟环境查看某虚拟环境安装的包创建虚拟环境激活创建好的虚拟环境回到之前的环境删除创建的虚拟环境查看conda所在的位置、虚拟环境位置等信息conda修改虚拟环境所在的位置 查看所有虚拟环境 conda env list查看某虚拟环境安装的包 激活要查看的虚拟环境之后&a…
阅读更多...
【黑马头条】 article微服务编译失败，包com.heima.model.common.article.dtos 不存在

【黑马头条】 article微服务编译失败，包com.heima.model.common.article.dtos 不存在

解决办法&#xff0c; 将 model微服务重新打包编译下载 然后在service的pom文件里面加上版本号 这样编译就不会找不到啦
阅读更多...
SQL注入【1】——通用漏洞/SQL注入/mysql跨库/ACCESS偏移

SQL注入【1】——通用漏洞/SQL注入/mysql跨库/ACCESS偏移

一、知识点: 1、脚本代码与数据库前置知识 2、Access数据库注入-简易&偏移 3、MYSQL数据库注入-简易:权限跨库 二、前置知识: &#xff08;一&#xff09;SQL注入漏洞产生原理分析 SQL注入产生条件&#xff1a;根本条件&#xff1a;可控变量、特定函数。 脚本代码在实现…
阅读更多...
数学建模MATLAB绘图大全

数学建模MATLAB绘图大全

最近快要开始一年一度的数学建模竞赛啦&#xff0c;接下来争取每天更一篇数学建模算法&#xff01;&#xff08;当然这是理想状态下&#xff09;&#xff0c;今天就先更一些MATLAB常用的绘图吧&#xff0c;论文赏心悦目的关键就在于丰富多彩的图&#xff0c;好看的图一定会成为…
阅读更多...
最新文章

Copyright @ 2022~2023