<script lang="ts"> import { h, toRefs } from "vue"; export default { props: ["title", "icon"], setup(props) { const { title, icon } = props; if (props.icon) { if (icon.includes("el-icon")) { h("i", { class: `${[icon, "sub-el-icon"]}`, }); } else if (icon.includes("fa-")) { h("i", { class: `${["fa " + icon, "sub-el-icon"]}`, }); } else { h("svg-icon", { iconClass: `${icon}`, }); } } if (props.title) { return () => h("div", title); } }, }; </script>这段代码如何优化

这段代码可以进行如下优化：

1. 使用 `toRefs` 将 props 解构为响应式属性，使得 props 中的属性变化能够被自动响应更新。

2. 使用 `render()` 函数替代 `setup()` 函数，并将内部的 `if...else...` 分支语句转化为函数返回值，减少冗余代码并提高可读性。

3. 将子组件的渲染方式封装成单独的函数，以便重复利用。

改写后的代码如下所示：

<template>
  <div>
    {{ renderIcon }}
    {{ title }}
  </div>
</template>

<script lang="ts">
import { defineComponent, h, toRefs } from "vue";

export default defineComponent({
  props: {
    title: String,
    icon: String,
  },
  setup(props) {
    const { title, icon } = toRefs(props);

    const renderIcon = () => {
      if (icon.value?.includes("el-icon")) {
        return (
          <i class={[icon.value, "sub-el-icon"]}></i>
        );
      } else if (icon.value?.includes("fa-")) {
        return (
          <i class={[`fa ${icon.value}`, "sub-el-icon"]}></i>
        );
      } else if (icon.value) {
        return (
          <svg-icon iconClass={icon.value}></svg-icon>
        );
      }
    };

    return {
      title,
      icon,
      renderIcon,
    };
  },
});
</script>