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

31. Vue Router 动态路由匹配

错误示例： 动态路由配置不当，导致参数无法正确传递或解析。

解决方案： 确保正确配置动态路由，并在组件中使用 $route.params 来访问参数。

// router/index.js
const routes = [
  { path: '/user/:id', component: User },
];

// 在 User.vue 中访问 id 参数
<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
console.log(route.params.id);
</script>

32. Vuex 或 Pinia 模块化状态管理

错误示例： 状态管理模块配置不当，导致数据共享和更新出现问题。

解决方案： 确保正确拆分并注册模块，并在需要的地方引入和使用这些模块。

// store/modules/user.js
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
  }),
  actions: {
    setName(name) {
      this.name = name;
    },
  },
});

// main.js
import { createPinia } from 'pinia';
import { useUserStore } from './store/modules/user';

const pinia = createPinia();
app.use(pinia);

// 在组件中使用
const userStore = useUserStore();
userStore.setName('John Doe');

33. 服务端渲染（SSR）兼容性问题

错误示例： 代码未考虑 SSR 环境，导致运行时错误。

解决方案： 确保代码在客户端和服务端都能正常运行，避免直接访问 window 或 document。

if (typeof window !== 'undefined') {
  // 客户端特定代码
}

34. 第三方 API 请求中的取消机制

错误示例： 没有处理取消请求的情况，导致资源浪费或内存泄漏。

解决方案： 使用 Axios 的取消令牌或其他库提供的取消机制来管理请求。

import axios from 'axios';
import { ref, onBeforeUnmount } from 'vue';

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

const fetchData = async () => {
  try {
    const response = await axios.get('/api/data', {
      cancelToken: source.token,
    });
    console.log(response.data);
  } catch (thrown) {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      // 处理其他错误
    }
  }
};

onBeforeUnmount(() => {
  source.cancel('Component is being destroyed');
});

35. 全局样式和组件样式的冲突

错误示例： 全局样式和组件局部样式冲突，导致样式应用不一致。

解决方案： 使用 scoped 样式、CSS Modules 或者通过 BEM 命名规范来避免冲突

<style scoped>
.button {
  background-color: blue;
}
</style>

<!-- 或者使用 CSS Modules -->
<style module>
.button {
  background-color: blue;
}
</style>

36. 国际化多语言切换时页面闪烁

错误示例： 多语言切换时，页面内容短暂显示为默认语言，造成闪烁。

解决方案： 确保在应用初始化时加载正确的语言包，并在切换语言时使用异步组件或懒加载技术。

// 在初始化时加载语言包
i18n.locale = localStorage.getItem('locale') || 'en';

// 使用异步组件
const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  delay: 200,
});

37. 性能优化：图片懒加载

错误示例： 大量图片一次性加载，导致页面加载速度慢。

解决方案： 使用懒加载技术，只有当图片进入视口时才加载。

<img v-lazy="imageUrl" alt="Lazy-loaded image">

38. 长列表渲染性能优化

错误示例： 长列表一次性渲染，导致页面卡顿。

解决方案： 使用虚拟滚动库如 vue-virtual-scroll-list 来优化长列表渲染。

import VirtualList from 'vue-virtual-scroll-list';

export default {
  components: {
    VirtualList,
  },
};

39. Web Worker 使用不当

错误示例： Web Worker 配置不当，导致主线程阻塞或通信失败。

解决方案： 确保 Web Worker 正确创建和销毁，并通过 postMessage 和 onmessage 进行双向通信。

// worker.js
self.onmessage = function(e) {
  const result = e.data * 2;
  self.postMessage(result);
};

// main.js
const worker = new Worker(new URL('./worker.js', import.meta.url));
worker.postMessage(42);
worker.onmessage = function(e) {
  console.log('Result:', e.data);
};

40. 开发环境热重载（HMR）配置错误

错误示例： 热重载配置不当，导致开发过程中页面不能及时更新。

解决方案： 确保 Vite 或 Webpack 配置正确支持 HMR，并检查是否有缓存问题。

// vite.config.js
export default defineConfig({
  server: {
    hmr: true,
  },
});

4.0 - 完