vue的一些实用小技巧

1、路由懒加载，能让你首次加载更快

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

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

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

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

路由的懒加载可以分为以下三种写法。

• Vue异步组件

• es6的import

• webpack提供的require.ensure()

// 1、Vue异步组件
VueRouter({
  routes:[
    {
      path: '/about',
      name: 'About',
      component: resolve => reqire(['path路径'], resolve)
    }
  ]
})

// 2、es6的import
VueRouter({
  routes:[
    {
      path: '/about',
      name: 'About',
      component: () => import('path路径')
    }
  ]
})

// 3、webpack提供的require.ensure()
VueRouter({
  routes:[
    {
      path: '/about',
      name: 'About',
      component: r => require.ensure([],() =>  r(require('path路径')), 'demo')
    }
  ]
})

2、异步组件

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

以前是这么引入组件的

import BureauDetail from './components/ChildFirst'
import addBureau from './components/ChildSecond'

//在vue的comoinents中
components: {
  ChildFirst,
  ChildSecond 
}

如果不是一开始就要加载的组件，我们可以使用组件懒加载

//在vue的comoinents中
components: {
  BureauDetail: () => import('./components/ChildFirst'),
  addBureau: () => import('./components/ChildSecond')
},

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

export default {
  components:{
    ChildFirst:()=>({
      component:import(/* webpackChunkName: "ChildFirst" */ './Async'),
      delay:200, // 延迟几毫秒，默认200
      timeout:3000, // 加载几毫米之后就超时，触发error组件
      loading:LoadingComponent, // 组件未加载回来前显示
      error:ErrorComponent // 组件超时时显示
    })
  }
}

3、require.context()引入多个组件

常常用来在组件内引入多个组件, require.context(directory, useSubdirectories, regExp)

原始写法:

// 原始写法
import titleCom from '@/components/home/titleCom'
import bannerCom from '@/components/home/bannerCom'
import cellCom from '@/components/home/cellCom'
components: {
  titleCom, bannerCom, cellCom
}

这样就写了大量重复的代码,利用 require.context 可以写成

const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})
components: modules

在main.js中引入大量公共组件,利用 require.context 可以写成

import Vue from 'vue'
// 自定义组件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印结果
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
  // 组件实例
  const reqCom = requireComponents(fileName)
  // 截取路径作为组件名
  const reqComName =reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1')
  // 组件挂载
  Vue.component(reqComName, reqCom.default || reqCom)
})

4、在父组件里监听子组件的生命周期

比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，常规的写法可能如下：

// Parent.vue
<Child @mounted="doSomething"/>

// Child.vue
mounted() {
  this.$emit("mounted");
}

此外，还有一种特别简单的方式，子组件不需要任何处理，只需要在父组件引用的时候通过@hook 来监听即可，@hook也可以监听其它的生命周期事件,代码如下：

<Child @hook:mounted="doSomething" /> 
<Child @hook:updated="doSomething" />

5、computed中使用this？

在computed属性中通过this.xxx去拿data里面的数据，和methods里面的方法吧，或许还会通过this.$store去拿vuex的state,和commit等，甚至，还会通过this.$route去获取路由里面的数据吧。 

其实，我们可以避免这些丑陋的this,它甚至会给我们带来看不见的性能问题。

实现上，我们通过this能访问到的数据，在computed的第一个参数上都能结构出来。

export default {
  watch: {
    haha({$attrs,$route,$store,$listeners,$ref}){
     // 还能结构很多属性，可自行打印看看
     return 
   }
  }
}