Vue开发中的十二条性能优化技巧

//或Vue.component('my-component',{functional:true,//表示该组件是函数式组件props:{...},//optional//第二个参数是上下文，没有thisrender:function(createElement,context){//...}})6.子组件划分先看一个例子上面代码中，每次父组件传递的数字发生变化，每次都会重新渲染，重新执行someThing这个耗时任务。所以，如果优化的话，一种是使用计算属性，因为计算属性本身就具有缓存计算结果的特性。第二种是Splitintosub-components，因为Vue的更新是在组件粒度上的，虽然第一次数据变化会引起父组件的重新渲染，但是子组件不会重新渲染，因为有里面没有变化，耗时的任务自然不会重新执行，所以性能更好，优化后的代码如下七.变量本地化简单来说就是保存会被多次引用的变量，因为每次访问this.xx，因为是响应式对象，每次都会触发getter，然后执行依赖收集的相关代码。如果你使用的变量越多，性能就会越差。从需求上来说，一个函数中对一个变量做一次依赖收集就可以了，但是很多人习惯性的写一大堆这个。做事会导致性能问题，比如下面这个例子八.第三方插件根据需要引入Element-UI等第三方组件库可以按需导入，避免体积过大，尤其是项目不大的时候，不需要完全导入组件library//main.jsimportElement3from"plugins/element3";Vue.use(Element3)//element3.js//完成引入importelement3from"element3";import"element3/lib/theme-chalk/index.css";//导入按需//import"element3/lib/theme-chalk/button.css";//...//import{//ElButton,//ElRow,//ElCol,//ElMain,//.....//}来自"element3";exportdefaultfunction(app){//完全导入app.use(element3)//按需导入//app.use(ElButton);}9.路由懒加载我们知道Vue是单页应用，所以如果懒没有使用loading，会导致进入首页时加载的内容过多，时间过长会出现长白屏，不利于用户体验，SEO也不友好，所以可以使用懒加载来划分页面，在需要的时候只加载对应的页面，分担首页的加载压力，减少首页的加载时间，不用路由懒加载：importHomefrom'@/components/Home'constrouter=newVueRouter({routes:[{path:'/home',component:Home}]})使用路由延迟加载：construuter=newVueRouter({routes:[{path:'/home',component:()=>import('@/components/Home')},{path:'/login',component:require('@/components/Home').default}]})会在进入这个路由的时候去对应的组件，然后运行导入编译和load组件，可以理解为Promise的resolve机制import:Es6语法规范，编译时调用，解构过程，不支持变量函数等require:AMD规范，运行时调用，是一个赋值过程，支持变量计算函数等，前端模块化请看我的另一篇文章前端模块化规范详解总结10.keep-alive缓存页面例如在表单输入页面进入下一步后,然后返??回上一步到表单页面，表单输入的内容要保留，比如在列表页>详情页>列表页，这样来回跳转场景等。我们可以使用内置的-incomponent缓存组件，在组件切换时不卸载，这样再次返回时，可以快速从缓存中取出Render而不是重新渲染到仅保存性能n需要包装你想要缓存的组件也可以使用include/exclude缓存/不缓存指定组件当前组件状态可以通过两个生命周期activated/deactivated十一来获取。事件的销毁当Vue组件被销毁时，会自动解除绑定其所有指令和事件监听器，但仅限于组件本身的事件。对于timer，addEventListener注册的监听器等，需要在组件销毁的生命周期钩子中手动销毁或解除绑定，避免内存泄露十二。图片延迟加载图片延迟加载是针对图片比较多的页面，为了提高页面加载速度，只加载可见区域的图片，可以等到滚动到可视区域以外的可视区域再加载这个功能一些UI框架有自己的，如果没有？推荐一个第三方插件vue-lazyloadnpmivue-lazyload-S//main.jsimportVueLazyloadfrom'vue-lazyload'Vue.use(VueLazyload)//然后就可以在页面使用v-lazy延迟加载图片或者自己造轮子，手动封装一个自定义命令，这里提供一个兼容各种浏览器的版本，主要是判断浏览器是否支持IntersectionObserverAPI，如果支持的话，用它来实现懒加载，如果不支持，实现constLazyLoad={//install方法install(Vue,options){constdefaultSrc=options.defaultVue.directtive('lazy',{bind(el,binding){LazyLoad.init(el,binding.value,defaultSrc)},inserted(el){if(IntersectionObserver){LazyLoad.observe(el)}else{LazyLoad.listenerScroll(el)}},})},//初始化init(el,val,def){el.setAttribute('data-src',val)el.setAttribute('src',def)},//利用IntersectionObserver监听elobserve(el){vario=newIntersectionObserver((entries)=>{constrealSrc=el.dataset.srcif(entries[0].isIntersecting){if(realSrc){el.src=realSrcel.removeAttribute('data-src')}}})io.observe(el)},//监听滚动事件listenerScroll(el){consthandler=LazyLoad.throttle(LazyLoad.load,300)LazyLoad.load(el)window.addEventListener('scroll',()=>{handler(el)})},//加载真实图片load(el){constwindowHeight=document.documentElement.clientHeightconstelelTop=el.getBoundingClientRect().topconstelelBtm=el.getBoundingClientRect().bottomconstrealSrc=el.dataset.srcif(elTop-windowHeight<0&&elBtm>0){if(realSrc){el.src=realSrcel.removeAttribute('data-src')}}},//节流节流(fn,delay){lettimerletprevTimereturnfunction(...args){constcurrTime=Date.now()constcontext=thisif(!prevTime)prevTime=currTimeclearTimeout(timer)if(currTime-prevTime>delay){prevTime=currTimefn.apply(context,args)clearTimeout(timer))return}timer=setTimeout(function(){prevTime=Date.now()timer=nullfn.apply(context,args)},delay)}},}exportdefaultLazyLoad是这样用的，用v-LazyLoad代替src十三。我没有在项目中实践过SSR，所以不会出错