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>