vue优化技巧

目录

一、使用函数式组件加快组件渲染

二、关于v-for的一些处理

三、局部变量的处理技巧

四、v-show和v-if的使用

五、vue-lazyload图片懒加载研究

六、长列表和无线列表的性能优化方案

七、路由懒加载和骨架屏提高首屏加载速度

八、watch和computed

九、合理使用异步组件

十、自定义事件的销毁

十一、第三方插件按需引入

---

一、使用函数式组件加快组件渲染

函数式组件:

• 没有管理任何状态
• 没有监听任何传递给它的状态
• 没有生命周期方法
• 只接收一些prop的函数

// functionCom
<template functional>
  <div v-for="(item, index) in props.list" :key="index">{{item}}</div>
</template>
<script>
  export default{
   props: {
    list: {
      required: true,
      type: Array
    }
   }
  }
</script>



父组件
<template>
  <div>
    <functionCom :list="list"></functionCom>
  <div>
</template>
<script>
  export default{
   data() {
     list: ['q',1,2,3]
   }

  }
</script>

二、关于v-for的一些处理

v-for 之后需要带上 :key   key尽量避免使用index 

key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点

如果使用index 会造成删除同级key时增加多余的判断,并且会造成多余的渲染

当使用特定的id做为key时，就不会多判断一次

 

 

三、局部变量的处理技巧

计算属性 / computed 尽量避免使用 this.  将数据赋值给局部变量 减少使用this. 因为每次使用this.的时候都会触发get函数做依赖收集

四、v-show和v-if的使用

需要频繁切换的使用v-show  只切换一次的使用v-if

只判断一次组件是否渲染使用v-if

<div v-show="visible">
 <com :n="num"></com>
</div>
<div v-show="!visible">
 <com n="3"></com>
</div>

五、vue-lazyload图片懒加载研究

图片懒加载 图片的懒加载就是在页面打开的时候，不要一次性全部显示页面所有的图片，而是只显示当前视口内的图片，一般在移动端使用（PC端主要是前端分页或者后端分页）。

优点：页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好

npm install vue-lazyload --save

// 全局配置
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 配置项
Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载高度比例  默认值
  error: 'error.png',
  loading: 'loading.gif',//懒加载时占位图片（加载中...）预加载图片一定要有，不然会一直重复加载占位图
  attempt: 1// 尝试加载图片数量，
}


// 使用
 <li>
     <img v-lazy="img.png">
  </li>
或是
  <li v-for="(img,index) in imgList">
     <img :v-lazy="img.url">
  </li>

DOM视口监听器 es6  自己实现图片懒加载

this.$refs['pics'].forEach(item => {
  this.obj.observe(item);
})


this.obj = new IntersectionObserver(changes => {
   // 触发

   changes.foreach((isIntersecting, target) => {
    if(!isIntersecting) return;
    // 出现在视口中 加载真实的图片
    const img = target.querySelector('img');
    if(!img) return;
    img.src = img.getAttribute('data-src');
    img.onload = () => img.style.opcity = 1;
   })
}， { threshold: [1]}) 

// 滚动到底部
this.onLoad = new IntersectionObserver(([item]) => {
  if(item.isIntersecting) {
   // 滚动到底部
  }
})

this.onLoad.observe(this.$refs['loading'])

六、长列表和无线列表的性能优化方案

如果列表是纯粹的数据展示，不会有任何变化，就不需要做响应式

export default {
  data() {
   return {
    list: []
   }
  },
  async created() {
    const dataList= await getData();
    this.list = Object.freeze(dataList)
  }
}

 如果是大数据的长列表 可采用虚拟滚动，只渲染少部分区域的内容

vue-virtual-scroller / vue-virtual-scroll-list

七、路由懒加载和骨架屏提高首屏加载速度

在路由列表中使用 （） => import('xxxxx')

八、watch和computed

computed能实现的 watch都能实现，但是能用computed的都用computed，因为它有缓存。

watch里可以有异步事件

九、合理使用异步组件

() => import()
defineAsyncComponent(() => import())

十、自定义事件的销毁

比如addEventListener setTimeout这些在组件销毁的时候都应该主动销毁他们

十一、第三方插件按需引入

使用按需引入会减小打包后的体积