Vue一些小技巧

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

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

• 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、异步组件

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

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

3.在父组件里监听子组件的生命周期

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

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

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

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

4.Vue.mixin混入，复用代码

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

通俗的说，mixin可以定义公用的data，created，methods，computed，watch等。然后混入到你当前的vue文件中。

minxin还有一个强大之处就是合并选项，相同的变量/方法名会合并在一起，如果有相同名字，当前文件的变量或者方法会覆盖mixin文件的名字或者方法。

• data对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

• 同名钩子函数将合并为一个数组，因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。

• 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

1、定义一个 mixin.js文件

export default mixin {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {  //日期转换
   formatDate (dateTime, fmt = 'YYYY年MM月DD日 HH:mm:ss') {
     if (!dateTime) {
      return ''
     }
     moment.locale('zh-CN')
     dateTime = moment(dateTime).format(fmt)
     return dateTime
  }
 }
}

2、在vue文件中使用mixin

import '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin],  //用法
 data() {
  return {
   userName: "adimin",
   time: this.formatDate(new Date()) //这个vue文件的数据源data里面的time就是引用混入进来的方法
  }
 }
} 

5.provide/inject

常用的父子组件通信方式都是父组件绑定要传递给子组件的数据，子组件通过props属性接收，一旦组件层级变多时，采用这种方式一级一级传递值非常麻烦，而且代码可读性不高，不便后期维护。

vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。在provide中指定要传递给子孙组件的数据，子孙组件通过inject注入祖父组件传递过来的数据。

1、在父组件中provide提供变量

<template>
  <div>
    <p>{{ title }}</p>
    <son></son>
  </div>
</template>
<script>
  import Son from "./son"
  export default {
    name: 'Father',
    components: { Son },
    // provide选项提供变量
    provide: {
      message: 'provided by father'
    },
    data () {
      return {
        title: '父组件'
      }
    },
    methods: { ... }
  }
</script>

2、在子孙组件中，都可以使用inject来注入

<template>
  <div>
    <p>message：{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: "GrandSon",
  inject: [ "message" ],
  data () {
    return {
      title: '孙组件'
    }
  },
  methods: { ... }
};
</script>

注意inject注入的值不能在created()钩子中使用