vue 使用技巧总结 19.01
组件中箭头函数的使用
- 不要使用箭头来定义任意生命周期钩子函数;
- 不要使用箭头来定义一个 methods 函数;
- 不要使用箭头来定义 computed 里的函数;
- 不要使用箭头定义 watch 里的函数;
- 不要对 data 属性/函数 使用箭头;
上面的函数中使用箭头,会导致 this 捕获不到 Vue 实例。各位道友切记切记...
路由的懒加载
目前通常使用的方式是:
{ path: '/login', component: () => import('@/views/login/index') }
然后在查资料的时候翻到了一个统一管理的方式:
// asyncComponent.js 文件 export const component01 = () => import('@/views/...') export const component02 = () => import('@/views/...') export const component03 = () => import('@/views/...') . . .
这样的好处是当组件多了之后管理起来方便。实际生产中使用哪种方式,各位道友自行决定...
同时,我们亦可以通过这样的方式异步加载组件。(不过异步加载的组件建议是小巧的,避免过长等待时间),下面是一个示例:
<template> <div> <!-- ... --> </div> </template> <script> export default { components: { Message: () => import('./views/...') }, // ... } </script> <style scoped> /* ... */ </style>