【前端性能优化】vue性能优化

栏目: JavaScript · 发布时间: 4年前

内容简介:,目的就是害怕其他开发人员对文件的样式有冲突导致样式混乱的问题。3.减少watch的数据。当组件某个数据变更后需要对应的state进行变更,就需要对另外的组件进行state进行变更。可以使用watch监听相应的数据变更并绑定事件。当watch的数据比较小,性能消耗不明显。当数据变大,系统会出现卡顿,所以减少watch的数据。其它不同的组件的state双向绑定,可以采用事件中央总线或者vuex进行数据的变更操作。在项目开发过程之中,如果把所有的组件的布局写在一个组件中,当数据变更时,由于组件代码比较庞大,vu

一、template

  1. v-show,v-if 用哪个?第一个维度是权限问题,只要涉及到权限相关的展示无疑要用 v-if ,第二个维度在没有权限限制下根据用户点击的频次选择,频繁切换的使用 v-show ,不频繁切换的使用 v-if ,这里要说的优化点在于减少页面中 dom 总数,我比较倾向于使用 v-if ,因为减少了 dom 数量,加快首屏渲染,至于性能方面我感觉肉眼看不出来切换的渲染过程,也不会影响用户的体验。

  2. 不要在模板里面写过多的表达式与判断 v-if="isShow && isAdmin && (a || b)" ,这种表达式虽说可以识别,但是不是长久之计,当看着不舒服时,适当的写到 methods 和 computed 里面封装成一个方法,这样的好处是方便我们在多处判断相同的表达式,其他权限相同的元素再判断展示的时候调用同一个方法即可。

  3. 循环调用子组件时添加 key,key 可以唯一标识一个循环个体,可以使用例如 item.id 作为 key,假如数组数据是这样的 [‘a’ , ‘b’, ‘c’, ‘a’],使用 :key="item" 显然没有意义,更好的办法就是在循环的时候 (item, index) in arr ,然后 :key="index" 来确保 key 的唯一性。当state更新时,新的状态值和旧的状态值对比,较快地定位到diff。

    二、style

1、单独模块的样式要加上 <style scoped>

,目的就是害怕其他开发人员对文件的样式有冲突导致样式混乱的问题。

2、尽量少用浮动和定位,能用flex的解决就用flex解决

三、script

this.$store.dispatch('update', { ... })

3.减少watch的数据。当组件某个数据变更后需要对应的state进行变更,就需要对另外的组件进行state进行变更。可以使用watch监听相应的数据变更并绑定事件。当watch的数据比较小,性能消耗不明显。当数据变大,系统会出现卡顿,所以减少watch的数据。其它不同的组件的state双向绑定,可以采用事件中央总线或者vuex进行数据的变更操作。

四、组件优化

在项目开发过程之中,如果把所有的组件的布局写在一个组件中,当数据变更时,由于组件代码比较庞大,vue 的数据驱动视图更新会比较慢,造成渲染过慢,也会造成比较差的体验效果。所以要把组件细分,比如一个组件,可以把整个组件细分成轮播组件、列表组件、分页组件等。

五、组件的异步加载(按需加载组件)

在平时的demo中,可能不会遇见这个需求。当页面很多,组件很多的时候,SPA页面在首次加载的时候,就会变的很慢。这是因为vue首次加载的时候把可能一开始看不见的组件也一次加载了,这个时候就需要对页面进行优化,就需要异步组件了。

{
    path: '/home',
    name: 'home',
    component:require('@views/home').default
}
{
    path: '/home',
    name: 'home',
    component:() => import('@views/home')
}
复制代码

六、打包优化

解决方法很简单,打包 vender 时不打包 vue、vuex、vue-router、axios 等,换用国内的bootcdn 直接引入到根目录的 index.html 中。

例如:

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>复制代码

在 webpack 里有个 externals,可以忽略不需要打包的库

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'axios': 'axios'
}复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

产品增长力

产品增长力

李阳 / 机械工业出版社 / 2018-4-1 / 59

本书由京东资深数据产品经理撰写,重新定义了数据与产品、业务的关系,从数据分析方法、数据价值挖掘、数据结果倒逼业务优化3个层次,以及设计、运营和优化3个维度,为产品增长提供了科学的依据和方法论,得到了PMCaff创始人阿德、GrowingIO创始人&CEO张溪梦、增长官研究院创始人范冰、腾讯高级产品经理刘涵宇等专家的高度评价。 全书内容以理论为主线,以实操为目标,萃取技术实操与管理思维中的精华......一起来看看 《产品增长力》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具