vue开发必须知道的小技巧

近年来，vue越来越火，使用它的人也越来越多。vue基本用法很容易上手，但是还有很多优化的写法你就不一定知道了。本文列举了一些vue常用的开发技巧。 require.context()

在实际开发中，绝大部分人都是以组件化的方式进行开发。随之而来就有了许多的组件需要引入。比如以下场景：

import outExperInfo from “@/components/userInfo/outExperInfo”; import baseUserInfo from “@/components/userInfo/baseUserInfo”; import technicalExperInfo from “@/components/userInfo/technicalExperInfo”; import skillExperInfo from “@/components/userInfo/skillExperInfo”;

components:{ outExperInfo, baseUserInfo, technicalExperInfo, skillExperInfo }

这样写并没有错，但是仔细观察发现写了很多重复的代码，这个时候利用require.context()可以写成：

const path = require(‘path’) const files = require.context(’@/components/userInfo’, false, /.vue$/) const userComponents = {} files.keys().forEach(key => { const name = path.basename(key, ‘.vue’) userComponents[name] = files(key).default || files(key) }) components:userComponents

这样不管需要引入多少组件，都可以使用这一个方法。路由的按需加载

随着项目功能模块的增加，引入的文件数量剧增。如果不做任何处理，那么首屏加载会相当的缓慢，这个时候，路由按需加载就闪亮登场了。

webpack< 2.4 时 { path:’/’, name:‘home’, components:resolve=>require([’@/components/home’],resolve) }

webpack> 2.4 时 { path:’/’, name:‘home’, components:()=>import(’@/components/home’) }

import()方法是由es6提出的，动态加载返回一个Promise对象，then方法的参数是加载到的模块。类似于Node.js的require方法，主要import()方法是异步加载的。动态组件

场景：如果项目中有tab切换的需求，那么就会涉及到组件动态加载，一般写法如下：

这样写也没有错，但是如果这样写的话，每次切换的时候，当前组件都会销毁并且重新加载下一个组件。会消耗大量的性能，所以就起到了作用。

有的小伙伴会说，这样切换虽然不消耗性能了，但是切换效果没有动画效果了，别着急，这时可以利用内置的

components和vue.component

前者是局部注册组件，用法如下：

export default{ components:{home} }

后者是全局注册组件，主要针对一些全局使用的组件，用法如下：