作者小三是剛剛畢業不久全堆疊工程師，寫的技術文章基本上是學習程序中筆記整理而來，大家看了之后如果喜歡可以給小弟點點贊哦，
例外小弟還有個程式員交流群，歡迎各位大佬來摸魚哈，點擊加群
平常我們在開發和維護專案的程序中，如果我們跑的專案有點大啊，或者資料太多，導致專案跑起來弊蝸牛還要慢，然后用戶體驗還不友好，對于新手程式員來說！老板天天都要你加班改！你還不敢辭職！這種時候，就很讓人頭痛了，怎么辦！
但是！也不是沒有辦法的！騷年！你當時學vue的時候可不是這樣說的！
接下來我來給你濃重介紹幾個優化性能的小技巧，讓你的專案蹭蹭蹭的飛起來！老板看了都直呼內行！
1.v-if和v-show的使用場景要區分
v-if
v-if是條件渲染，當條件滿足了，那肯定是渲染哇!如果你需要設定一個元素隨時隱藏或者消失，然后用v-if是非常的浪費性能的，因為它不停的創建然后銷毀，
但是它也是惰性的，如果你開始一給它條件為 false，它就害羞不出來了，跟你家女朋友一樣天天晚上都不跟你回家，甚至你家里都沒有你女朋友的衣物！然后結構頁面里也不會渲染出來，查不到這個元素，不知情的朋友以為你談了個虛擬女友，直到你讓它條件為 true ，它才開始渲染，也就是拿了結婚證才跟你回家，
v-show
v-show就很簡單，他的原理就是利用 css 的 display 的屬性，讓他隱藏或者出現，所以一開始渲染頁面哪怕我們看不到這個元素，但是它在檔案的話，是確確實實存在的，只是因為 display：none；隱藏了，
就像是你的打氣女朋友，平常有人你肯定不敢打氣哇！肯定是等夜深人靜的時候，才偷偷打氣，然后早上又繼續放氣藏起來，這樣是不是很方便咧！所以這個元素你也就是你打氣女朋友每天打氣放氣，是不是也沒有那么費力咧！白天就可以藏起來快樂的上班啦！
好啦劃重點啦！不要瞎想什么女朋友了，女朋友只會影響我碼專案的速度！
所以這樣看來，如果是很少改變條件來渲染或者銷毀的，建議是用 v-if ，如果是需要不斷地切換，不斷地隱藏又出現又隱藏這些場景的話， v-show 更適合使用！所以要在這些場景里合適的運用 v-if 和 v-show 會節省很多性能以達到性能優化，
2.v-if和v-for不能同時使用 (vue2和vue3的v-if和v-for優先級不同）
首先我們來看一下在vue2中！
當v-if與v-for一起使用時，v-for比v-if更高的優先級，這樣就意味著v-if將分別重復運行于每一個v-for循中，那就是先運行v-for的回圈，然后在每一個v-for的回圈中，再進行v-if的條件對比，會造成性能浪費，影響專案的速度，
<template>
<div id="app">
<div id="nav">
<div v-for="item in list" v-if="item.flag" :key="item">
{{ item.color }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
color: "red",
flag: true,
},
{
color: "green",
flag: false,
},
{
color: "blue",
flag: true,
},
],
};
},
};
</script>
然后我們來看一下在vue3中
<template>
<div id="nav">
<div v-for="item in list" v-if="ifshow" :key="item">{{ item.color }}</div>
<div v-for="item in list" v-if="item.flag" :key="item">
{{ item.color }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
ifshow: true,
list: [
{
color: "red",
flag: true,
},
{
color: "green",
flag: false,
},
{
color: "blue",
flag: true,
},
],
};
},
};
</script>
我的個人見解就是，當我是用ifshow的值來判斷v-if它是有效的，說明在vue3中v-if優先級高于v-for，但是我如果是用要回圈的值flag來判斷，頁面沒有給我回傳什么，如果是有大佬給我解答我會虛心受教，但是我還是喜歡用計算屬性o(￣▽￣)o
當你真的需要根據條件渲染頁面的時候，建議是采用計算屬性，這樣及高效且美觀，又不會出問題，如下面的代碼展示
<template>
<div id="app">
<div v-for="item in newList" :key="item">{{item.color}}</div>
</div>
</template>
<script>
export default {
data(){
return{
list:[
{
color:"red",
flag:true
},
{
color:"green",
flag:false
},
{
color:"blue",
flag:true
},
],
}
},
computed:{
newList(){
return this.list.filter(list => {
return list.flag
})
}
}
}
</script>
3.computed和watch使用要區分場景
先看一下計算屬性computed，它支持快取，當依賴的資料發生變化的時候，才會重新計算，但是它并不支持異步操作，它無法監聽資料變化，而且計算屬性是基于回應式依賴進行快取的，
再看一下偵聽屬性watch，它不支持快取，它支持異步操作，當需要在資料變化時執行異步或開銷較大的操作時，這個方式是最有用的，這是和computed最大的區別，
所以說，如果你的需求是寫像購物車那種的，一個屬性受其他屬性影響的，用計算屬性 computed ， 就像是你家的二哈，你不帶它出去玩，你一回家就發現你家能拆的都被二哈拆掉了，因為你不帶它出去跟你女朋友逛街！
如果是像寫那種像模糊查詢的，可以用偵聽屬性 watch ，因為可以一條資料影響多條資料， 比如你雙12給你女朋友買了很多東西，那雙十二之后，是不是很多機會回不去宿舍咧！
用好這兩個，可以讓你的代碼更加高效，看起來也更加簡潔優雅，讓專案蹭蹭跑起來！這樣都是一種優化性能的方式！
4.路由懶加載
當Vue專案是單頁面應用的時候，可能會有很多路由引入 ，這樣的話，使用webpcak打包后的檔案會非常的大，當第一次進入首頁的時候，加載的資源很多多，頁面有時候會出現白屏的情況，對用戶很不友好，體驗也差，
但是，當我們把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應的組件，這樣就很高效了，會大大提升首屏加載顯示的速度，但是可能其他的頁面的速度就會降下來，有利有弊吧，根據自己業務需求來使用，實作效果也非常的簡單，在router的index.js檔案下，如下所示
import Home from '../views/Home'
const routes = [
{
path:'/home',
name:"Home", //這里沒有用懶加載
component:Home
},
{
path:'/about',
name:'About',
component:()=>import(/*webpackChunkName:"about"*/ '../views/About.vue') //這里用了懶加載
}
]
打開瀏覽器運行，當我沒有點擊進入about組件的時候包的大小就如藍色框住的那些，當我點擊了about組件進入后，就增加了后面紅色圈住的包，總的大小是增加了**
所以，使用路由懶加載可以降低首次加載的時候的性能消耗，但是后面打開這些組件可能會有所減慢，建議是如果體積不大的又不用馬上展示的頁面可以使用路由懶加載降低性能消耗，從而做到性能優化！
5.第三方插件按需引入
比如我們做一個專案，如果是全域引入第三方插件，打包構建的時候，會將別人整個插件包也一起打包進去，這樣的話檔案是非常龐大的，然后我們就需要將第三方插件按需引入，這個就需要自己去根據每個插件的官方檔案在專案配置，始終就是一句話，用什么引什么！
6.優化串列的資料
當我們遇到哪些，一開始取的資料非常的龐大，然后還要渲染在頁面上的時候，比如一下子給你傳回來10w條資料還要渲染在頁面上，專案一下子渲染出來是非常的有難度的，
這個時候，我們就 需要采用視窗化的技術來優化性能，只需要渲染少部分的內容（比如一下子拿多少條資料），這樣就可以減少重新渲染組件和創建dom節點的時間，可以看看下面代碼
<template>
<div class="list">
<h3>串列的懶加載</h3>
<div>
<div v-for="item in list">
<div>{{ item }}</div>
</div>
</div>
<div>
<div v-if="moreShowBoolen">滾動加載更多</div>
<div v-else>已無更多</div>
</div>
</div>
</template>
<script>
export default {
name: 'List',
data() {
return {
list: [],
moreShowBoolen: false,
nowPage: 1,
scrollHeight: 0,
};
},
mounted() {
this.init();
// document.documentElement.scrollTop獲取當前頁面滾動條的位置,documentElement對應的是html標簽,body對應的是body標簽
// document.compatMode用來判斷當前瀏覽器采用的渲染方式,CSS1Compat表示標準兼容模式開啟
window.addEventListener("scroll", () => {
let scrollY=document.documentElement.scrollTop || document.body.scrollTop; // 滾動條在Y軸上的滾動距離
let vh=document.compatMode === "CSS1Compat"?document.documentElement.clientHeight:document.body.clientHeight; // 頁面的可視高度
let allHeight = Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight
); // 整個頁面的高度
if (scrollY + vh >= allHeight) {
// 當滾動潭訓到頁面底部的時候觸發這個函式繼續添加資料
this.init2();
}
});
},
methods: {
init() {
//一開始就往list添加資料
for (let i = 0; i < 100; i++) {
this.list.push(i);
}
},
init2() {
for (let i = 0; i < 200; i++) {
// 當滑動到底部的時候，繼續觸發這個函式
this.list.push(i);
}
},
},
};
</script>
這樣的話，就可以做到資料懶加載啦，根據需要，逐步添加資料進去，減少一次性拉取所有資料，因為資料是非常龐大的，這樣就可以優化很多性能了！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/382820.html
標籤：其他
上一篇：藍橋杯第二次模擬賽JAVA題解