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()钩子中使用