vue3开发中常见的代码错误或者其他相关问题小文章2.0

11. 条件渲染和列表渲染中的性能问题

错误示例： 使用 v-if 和 v-for 在同一元素上可能导致性能问题。

<!-- 不推荐 -->
<div v-for="item in items" v-if="item.isVisible">
  {{ item.name }}
</div>

解决方案： 尽量避免在同一元素上同时使用 v-if 和 v-for。如果需要过滤数据，可以在计算属性或方法中处理。

<!-- 推荐 -->
<div v-for="item in visibleItems">
  {{ item.name }}
</div>

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

const visibleItems = computed(() => items.filter(item => item.isVisible));
</script>

12. 全局注册组件与局部注册组件混淆

错误示例： 全局和局部组件注册混淆导致组件无法正确显示。

解决方案： 明确区分全局和局部组件注册，并确保在合适的地方注册组件。

// 全局注册
app.component('MyComponent', MyComponent);

// 局部注册
export default {
  components: {
    MyComponent,
  },
};

13. 事件总线（Event Bus）替代方案

错误示例： 使用过时的事件总线模式进行组件间通信。

解决方案： 在 Vue 3 中，推荐使用状态管理库如 Pinia 或 Vuex，或者通过父组件传递 props 和事件来实现组件间的通信。

// 使用 Pinia
import { useStore } from '@/store';
const store = useStore();
store.commit('updateState', payload);

14. 双向绑定（v-model）使用不当

错误示例： 不正确地使用 v-model 导致数据同步问题。

解决方案： 确保 v-model 的值是响应式的，并理解 v-model 在不同组件中的用法。

<!-- 简单输入框 -->
<input v-model="message">

<!-- 自定义组件 -->
<CustomInput v-model="message">

15. Teleport 组件使用不当

错误示例： Teleport 组件配置错误，导致内容未正确渲染到目标位置。

解决方案： 确保 Teleport 组件的目标选择器存在且路径正确。

<teleport to="#modal-container">
  <div id="modal">Modal content</div>
</teleport>

16. Suspense 组件使用不当

错误示例： Suspense 组件配置错误，导致异步组件加载失败。

解决方案： 确保 Suspense 组件内包含异步组件，并正确处理默认插槽和 fallback 插槽。

<suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</suspense>

17. 类型声明和 TypeScript 集成问题

错误示例： TypeScript 类型声明不正确，导致编译错误或运行时错误。

解决方案： 确保正确设置 TypeScript 类型声明，并使用 Vue 3 提供的类型工具。

<script lang="ts" setup>
import { ref, defineProps } from 'vue';

interface Props {
  message: string;
}

const props = defineProps<Props>();
</script>

18. 动态组件（<component>）使用不当

错误示例： 动态组件配置错误，导致组件切换时出现问题。

解决方案： 确保动态组件的 is 属性指向正确的组件，并考虑使用 keep-alive 来缓存组件状态。

<component :is="currentComponent"></component>
<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

19. 样式冲突和 CSS 变量使用不当

错误示例： CSS 样式冲突或 CSS 变量未正确应用。

解决方案： 使用 scoped 样式、CSS Modules 或者 CSS 变量来避免样式冲突，并确保变量定义和使用正确。

<style scoped>
:root {
  --primary-color: #42b983;
}
.button {
  background-color: var(--primary-color);
}
</style>

20. 第三方库集成问题

错误示例： 第三方库集成不当，导致功能失效或样式错乱。

解决方案： 确保第三方库正确安装并引入，并检查其文档以了解兼容性和配置要求。

import SomeLibrary from 'some-library';
import 'some-library/dist/style.css';

// 初始化库
SomeLibrary.init();

2.0-完。