vue 使用技巧总结 19.01

组件中箭头函数的使用

• 不要使用箭头来定义任意生命周期钩子函数；
• 不要使用箭头来定义一个 methods 函数；
• 不要使用箭头来定义 computed 里的函数；
• 不要使用箭头定义 watch 里的函数；
• 不要对 data 属性/函数 使用箭头；

　　上面的函数中使用箭头，会导致 this 捕获不到 Vue 实例。各位道友切记切记...

 

路由的懒加载

　　目前通常使用的方式是：

?

1 2 3 4

{     path: '/login',     component: () => import('@/views/login/index') }

　　然后在查资料的时候翻到了一个统一管理的方式：

?

1 2 3 4 5 6 7 8

// asyncComponent.js 文件   export const component01 = () => import('@/views/...') export const component02 = () => import('@/views/...') export const component03 = () => import('@/views/...')     .     .     .

　　这样的好处是当组件多了之后管理起来方便。实际生产中使用哪种方式，各位道友自行决定...

　　同时，我们亦可以通过这样的方式异步加载组件。（不过异步加载的组件建议是小巧的，避免过长等待时间），下面是一个示例：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<template>   <div>     <!-- ... -->   </div> </template>   <script> export default {   components: {     Message: () => import('./views/...')   },   // ... } </script>   <style scoped> /* ... */ </style>