优化Vue组件的2个小技巧

组件大家在开发工作中都做过，最近有时间回头看了看自己以前写过的一些组件，感觉有很多需要优化的东西，说真的我还不太喜欢自己回头翻自己的代码，除非是有bug......，但是回头想想这也是每个程序员必然经历的过程，大多数时间不是在看别人的代码就是在翻自己的代码，真正写新代码的时间好像不多，为了能让自己的代码给别人少一些困惑咱们还是有时间优化优化自己的代码吧，防止屎山的出现。下面总结了一些优化的方法。

自文档化代码

组件封装前大家肯定都已经想好了自己想要的功能，也就是意图，这也是创建新组件最重要的原因之一——这样你就可以用描述代码功能的语句来替换一段代码

<template>
 <div>
  <p>{{ user.name }} ({{ user.age }})</p>
 </div>
</template>

<script setup>
import { ref } from 'vue';

const user = ref({
  name: 'John Doe',
  age: 28,
});
</script>

这段代码展示了用户信息，我们可以把它提取到一个 UserInfo 组件中，这样代码就更加清晰易懂了：

<template>
 <div>
  <UserInfo :user="user" />
 </div>
</template>

<script setup>
import { ref } from 'vue';
import UserInfo from './UserInfo.vue';

const user = ref({
  name: 'John Doe',
  age: 28,
});
</script>

当然，为了创建这个组件，我们需要添加一些额外的代码：

<template>
 <p>{{ user.name }} ({{ user.age }})</p>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  user: Object,
});
</script>

现在，代码更加模块化，也更容易阅读。

上面只是一个简单的例子，好处可能还不明显。但对于更长、更复杂的组件来说，这种方式带来的好处就更加明显了。

拆分大的组件

我们应该尽量让每一个组件都简短一些，这样可以提高代码的可读性和可重用性还有可测试性。

比如一个简化版的页面

<template>
 <div>
  <h1>{{ title }}</h1>
  <p>{{ description }}</p>
  <ul class="nav">
   <li v-for="item in navlist" :key="item.id">
    {{ item.name }}
   </li>
  </ul>
  <div>
   <h2>content</h2>
   <ul>
    <li v-for="item in cart" :key="item.id">
     {{ item.name }} - {{ item.price }}
     <button @click="removeFromCart(item)">Remove</button>
    </li>
   </ul>
   <p>Total: {{ totalPrice }}</p>
  </div>
 </div>
</template>
<script setup>
...省略几百行
</script>

省略样式几百行

这样一个页面可能要近千行代码了，这种情况下我们可以抽离出来大致三个组件导航栏、标题、和内容列表，整理后内容模块可能就是这样

<template>
 <div>
  <headerTit :title="title"  />
  <nav :items="items" @toPath="toPath" />
  <cont :cart="cart"  />
 </div>
</template>
<script setup>
import { ref } from 'vue';
import headerTit  from './headerTit.vue';
import nav from './nav.vue';
import cont from './cont.vue';
</script>

我们把一个复杂的组件分解成多个简单的组件。这样一来，代码量可能略有增加，但代码更容易理解，也更容易维护和修改。