目录
一、使用函数式组件加快组件渲染
函数式组件:
- 没有管理任何状态
- 没有监听任何传递给它的状态
- 没有生命周期方法
- 只接收一些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这些在组件销毁的时候都应该主动销毁他们
十一、第三方插件按需引入
使用按需引入会减小打包后的体积
?