Vue开发技巧

Posted 2020-12-18 zhenjianyu

前言

看了掘金一篇关于Vue开发相关优化技巧，确实发现以前项目中写的代码有些问题，但是无关逻辑问题，当时写的代码感觉加载编译，甚至逻辑都没有问题，但是现在想一下，确实是有一些优化方面的问题，也就是说以前写的代码的确是有一些问题的。所以看了这篇帖子，借此总结一下。

Vue开发中的一些优化方式

• v-show&v-if：当然，我觉得只要读过Vue开发文档的话，都知道两者之间的区别，我并不认同所谓的v-if比v-show好这种说法，这个确实是需要根据实际的业务开发，业务需求来决定使用哪个具体的指令。
• v-for&v-if：这个问题确实，以前写的代码明知道文档中建议不要一起使用，但是可能是贪图方便等，直接写出了类似的代码

<template>
    <div class="zjy">
        <div class="item" v-for=‘(val,index) in list‘ :key=‘index‘ v-if=‘val.isShow‘>{{val.value}}</div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list:[]
        }
    },
    methods:{
        getData(){
            this.$axios.get(‘/getData/zjy‘).then((res)=>{
                this.list = res.data
            }).catch((err)=>{

            })
        }
    }
}
</script>

这种代码的意图无非就是isShow == true才展示item。但是文档中建议不要将v-for与v-if一起使用。可以这样处理，

getData(){
    this.$axios.get(‘/getData/zjy‘).then((res)=>{
        this.list = res.data.filter((item)=>{
            return item.isShow
        })
    }).catch((err)=>{

    })
}    

或是这样处理

<template>
    <div class="zjy">
        <div class="item" v-for=‘(val,index) in handleList‘ :key=‘index‘>{{val.value}}</div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list:[]
        }
    },
    computed:{
        handleList(){
            return this.list.filter((item) => {
                return item.isShow
            })
        }
    },
    methods:{
        getData(){
            this.$axios.get(‘/getData/zjy‘).then((res)=>{
                this.list = res.data
            }).catch((err)=>{

            })
        }
    }
}
</script>

• v-for&key：在我上面写的代码中就出现了类似的问题，当然平时编写代码时也是这样编写，其实这样是不好的，举例：

当使用index下标作为key的值，也就是index作为标识的时候。当插入一条数据，列表中后面的key都发生了变化，那么当前的v-for都会对key变化的element重新渲染，但是其实除了插入的element数据其他的都没有发生变化，这就导致了没有必要的开销。所以建议使用数据中唯一的，如ID等字段。或是特殊字符串拼接index的形式

<template>
    <div class="zjy">
        <div class="item" v-for=‘(val,index) in handleList‘ :key=‘$index‘+index>{{val.value}}</div>
    </div>
</template>

• 释放组件资源：例如逻辑中添加的事件监听、定义的定时器等，应充分利用生命周期（beforeDestroy）或是路由守卫（beforeRouteLeave）等钩子函数进行资源释放。
• 长列表：通过一个v-for将数据遍历出来，滚动到底部的时候就继续请求 API 。随着数据的加载，DOM会越来越多，这样就导致了性能开销的问题产生了，当页面上的DOM太多的时候，难免给客户端造成一定的压力（页面卡顿，滑动不流畅，渲染时间长），有个很重要的概念（只有出现在视图上的DOM才是重要的DOM），所以建议应用虚拟列表的概念，网上有一些很好的解决方案：vue-virtual-scroller 库。
• 图片加载

1. 使用SVG或字体图标（现在开发中UI同学基本都是这样提供）
2. base64
3. cdn
4. 懒加载形式加载图片

• 路由按需加载

// require法
component: resolve=>(require([‘@/components/HelloWorld‘],resolve))

// import
component: () => import(‘@/components/HelloWorld‘) 

• UI框架的使用：建议按需加载，现在UI框架的使用方式在其文档中说的很清楚，按需加载的方式也很清楚
• template：多个元素需要切换，而且切换条件都一样，一般都会使用一个元素包裹起来，在这个元素上做切换。

<div v-if="status===‘ok‘">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>

如果像上面的 div 只是为了切换条件而存在，还导致元素层级嵌套多一层，那么它没有“存在的意义”。我们都知道在声明页面模板时，所有元素需要放在 <template> 元素内。除此之外，它还能在模板内使用，<template> 元素作为不可见的包裹元素，只是在运行时做处理，最终的渲染结果并不包含它。

<template>
    <div>
        <template v-if="status===‘ok‘">
          <h1>Title</h1>
          <p>Paragraph 1</p>
          <p>Paragraph 2</p>
        </template>
    </div>
</template>

同样的，我们也可以在 <template> 上使用 v-for 指令，这种方式还能解决 v-for 和 v-if 同时使用报出的警告问题。

<template v-for="item in 10">
    <div v-if="item % 2 == 0" :key="item">{{item}}</div>
</template>

脚手架中的一些优化方式

• 最小化js文件
• 图片资源压缩
• 打包公共代码
• 删除沉淀代码
• 依赖CND加速
• Gzip