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 - 完
