vue实战中的一些小技巧

能让你首次加载更快的路由懒加载，怎么能忘？

路由懒加载可以让我们的包不需要一次把所有的页面的加载进来，只加载当前页面的路由组件就行。

举个🌰，如果这样写，加载的时候会全部都加载进来。

const router = new VueRouter({
   
  routes:[
    {
   
      path: '/',
      name: 'Home',
      component: Home
    },
    {
   
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

所以，应该避免上面的写法，尽量使用懒加载

懒加载写法,结合webpack的import食用

const router = new VueRouter({
   
  routes:[
    {
   
      path: '/',
      name: 'Home',
      component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
    },
    {
   
      path: '/about',
      name: 'About',
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

你是否还记得有一个叫Object.freeze的方法？

应该所有同学都知道，vue初始化的时候会将data里面的数据都搞成响应式数据吧。但是，我们在写业务逻辑的时候会有些数据一初始化就永远不会改变，它根本就不需要被vue做成响应式数据，因此我们应该将这些不用改变的数据通过Object.freeze方法冻结它，避免vue初始化的时候，做一些无用的操作。

🌰

export default {
   
  data:()=>({
   
    list:Object.freeze([{
   title:'我永远不需要改变，我不需要响应式'}])
  })
}
1
2
3
4
5
6
7
8

异步组件那么强，你是不是没用过？

异步组件可以让我们在需要一些组件时才将它加载进来，而不是一初始化就加载进来，这跟路由懒加载时一个概念。

🌰

export default {
   
  components:{
   
    AsyncComponent:()=>import(/* webpackChunkName: "AsyncComponent" */ './Async')
  }
}
1
2
3
4
5
6
7

首次加载的包是不包含改组件代码的

参考vue实战视频讲解：进入学习

当点击触发某种行为引进的包是这样的

异步组件还有一种比较完善的写法

🌰

export default {
   
  components:{
   
    AsyncComponent:()=>({
   
      component:import(/* webpackChunkName: "AsyncComponent" */ './Async'),
      delay:200, // 延迟几毫秒，默认200
      timeout:3000, // 加载几毫米之后就超时，触发error组件
      loading:LoadingComponent, // 组件未加载回来前显示
      error:ErrorComponent // 组件超时时显示
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

你是不是还在computed中使用this？

我猜还有很多同学，在computed属性中通过this.xxx去拿data里面的数据，和methods里面的方法吧，或许还会通过this.