Vue 項目實踐指南

来源:https://www.cnblogs.com/vcode/archive/2022/06/28/16419586.html
-Advertisement-
Play Games

Vue 框架通過數據雙向綁定和虛擬 DOM 技術,幫我們處理了前端開發中最臟最累的 DOM 操作部分, 我們不再需要去考慮如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 項目中仍然存在項目首屏優化、Webpack 編譯配置優化等問題,所以我們仍然需要去關註 Vue 項目性能方面的優化,使 ...


Vue 框架通過數據雙向綁定和虛擬 DOM 技術,幫我們處理了前端開發中最臟最累的 DOM 操作部分, 我們不再需要去考慮如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 項目中仍然存在項目首屏優化、Webpack 編譯配置優化等問題,所以我們仍然需要去關註 Vue 項目性能方面的優化,使項目具有更高效的性能、更好的用戶體驗。本文是作者通過實際項目的優化實踐進行總結而來,希望讀者讀完本文,有一定的啟發思考,從而對自己的項目進行優化起到幫助。本文內容分為以下三部分組成:

一、代碼層面的優化

1.1、v-if 和 v-show 區分使用場景

v-if 是 真正 的條件渲染,因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建;也是惰性的:如果在初始渲染時條件為假,則什麼也不做——直到條件第一次變為真時,才會開始渲染條件塊。

v-show 就簡單得多, 不管初始條件是什麼,元素總是會被渲染,並且只是簡單地基於 CSS 的 display 屬性進行切換。

所以,v-if 適用於在運行時很少改變條件,不需要頻繁切換條件的場景;v-show 則適用於需要非常頻繁切換條件的場景。

1.2、computed 和 watch 區分使用場景

computed: 是計算屬性,依賴其它屬性值,並且 computed 的值有緩存,只有它依賴的屬性值發生改變,下一次獲取 computed 的值時才會重新計算 computed 的值;

watch: 更多的是「觀察」的作用,類似於某些數據的監聽回調 ,每當監聽的數據變化時都會執行回調進行後續操作;

運用場景:

  • 當我們需要進行數值計算,並且依賴於其它數據時,應該使用 computed,因為可以利用 computed 的緩存特性,避免每次獲取值時,都要重新計算;

  • 當我們需要在數據變化時執行非同步或開銷較大的操作時,應該使用 watch,使用 watch 選項允許我們執行非同步操作 ( 訪問一個 API ),限制我們執行該操作的頻率,併在我們得到最終結果前,設置中間狀態。這些都是計算屬性無法做到的。

1.3、v-for 遍歷必須為 item 添加 key,且避免同時使用 v-if

(1)v-for 遍歷必須為 item 添加 key

在列表數據進行遍歷渲染時,需要為每一項 item 設置唯一 key 值,方便 Vue.js 內部機制精準找到該條列表數據。當 state 更新時,新的狀態值和舊的狀態值對比,較快地定位到 diff 。

(2)v-for 遍歷避免同時使用 v-if

v-for 比 v-if 優先順序高,如果每一次都需要遍歷整個數組,將會影響速度,尤其是當之需要渲染很小一部分的時候,必要情況下應該替換成 computed 屬性。

推薦:

<ul>
   <li
    v-for="user in activeUsers"
    :key="user.id">
    {{ user.name }}
  </li>
</ul>
computed: {
  activeUsers: function () {
     return this.users.filter(function (user) {
      return user.isActive
      })
    }
}

 

不推薦:

<ul>
  <li
      v-for="user in users"
      v-if="user.isActive"
      :key="user.id">
      {{ user.name }}
  </li>
</ul>

 

1.4、長列表性能優化

Vue 會通過 Object.defineProperty 對數據進行劫持,來實現視圖響應數據的變化,然而有些時候我們的組件就是純粹的數據展示,不會有任何改變,我們就不需要 Vue 來劫持我們的數據,在大量數據展示的情況下,這能夠很明顯的減少組件初始化的時間,那如何禁止 Vue 劫持我們的數據呢?可以通過 Object.freeze 方法來凍結一個對象,一旦被凍結的對象就再也不能被修改了。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};

 

1.5、事件的銷毀

Vue 組件銷毀時,會自動清理它與其它實例的連接,解綁它的全部指令及事件監聽器,但是僅限於組件本身的事件。 如果在 js 內使用 addEventListene 等方式是不會自動銷毀的,我們需要在組件銷毀時手動移除這些事件的監聽,以免造成記憶體泄露,如:

created() {
  addEventListener('click', this.click, false)
},
beforeDestroy() {
  removeEventListener('click', this.click, false)
}

 

1.6、圖片資源懶載入

對於圖片過多的頁面,為了加速頁面載入速度,所以很多時候我們需要將頁面內未出現在可視區域內的圖片先不做載入, 等到滾動到可視區域後再去載入。這樣對於頁面載入性能上會有很大的提升,也提高了用戶體驗。我們在項目中使用 Vue 的 vue-lazyload 插件:

(1)安裝插件

npm install vue-lazyload --save-dev

(2)在入口文件 man.js 中引入並使用

import VueLazyload from 'vue-lazyload'

然後再 vue 中直接使用

Vue.use(VueLazyload)

或者添加自定義選項

Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})

(3)在 vue 文件中將 img 標簽的 src 屬性直接改為 v-lazy ,從而將圖片顯示方式更改為懶載入顯示:

<img v-lazy="/static/img/1.png">

以上為 vue-lazyload 插件的簡單使用,如果要看插件的更多參數選項,可以查看 vue-lazyload 的 github 地址

1.7、路由懶載入

Vue 是單頁面應用,可能會有很多的路由引入 ,這樣使用 webpcak 打包後的文件很大,當進入首頁時,載入的資源過多,頁面會出現白屏的情況,不利於用戶體驗。如果我們能把不同路由對應的組件分割成不同的代碼塊,然後當路由被訪問的時候才載入對應的組件,這樣就更加高效了。這樣會大大提高首屏顯示的速度,但是可能其他的頁面的速度就會降下來。

路由懶載入:

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

 

1.8、第三方插件的按需引入

我們在項目中經常會需要引入第三方插件,如果我們直接引入整個插件,會導致項目的體積太大,我們可以藉助 babel-plugin-component ,然後可以只引入需要的組件,以達到減小項目體積的目的。以下為項目中引入 element-ui 組件庫為例:

(1)首先,安裝 babel-plugin-component :

npm install babel-plugin-component -D

(2)然後,將 .babelrc 修改為:

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

(3)在 main.js 中引入部分組件:

import Vue from 'vue';
import { Button, Select } from 'element-ui';

 Vue.use(Button)
 Vue.use(Select)

1.9、優化無限列表性能

如果你的應用存在非常長或者無限滾動的列表,那麼需要採用 視窗化 的技術來優化性能,只需要渲染少部分區域的內容,減少重新渲染組件和創建 dom 節點的時間。 你可以參考以下開源項目 vue-virtual-scroll-list 和 vue-virtual-scroller 來優化這種無限列表的場景的。

1.10、服務端渲染 SSR or 預渲染

服務端渲染是指 Vue 在客戶端將標簽渲染成的整個 html 片段的工作在服務端完成,服務端形成的 html 片段直接返回給客戶端這個過程就叫做服務端渲染。

(1)服務端渲染的優點:

  • 更好的 SEO: 因為 SPA 頁面的內容是通過 Ajax 獲取,而搜索引擎爬取工具並不會等待 Ajax 非同步完成後再抓取頁面內容,所以在 SPA 中是抓取不到頁面通過 Ajax 獲取到的內容;而 SSR 是直接由服務端返回已經渲染好的頁面(數據已經包含在頁面中),所以搜索引擎爬取工具可以抓取渲染好的頁面;

  • 更快的內容到達時間(首屏載入更快): SPA 會等待所有 Vue 編譯後的 js 文件都下載完成後,才開始進行頁面的渲染,文件下載等需要一定的時間等,所以首屏渲染需要一定的時間;SSR 直接由服務端渲染好頁面直接返回顯示,無需等待下載 js 文件及再去渲染等,所以 SSR 有更快的內容到達時間;

(2)服務端渲染的缺點:

  • 更多的開發條件限制: 例如服務端渲染只支持 beforCreate 和 created 兩個鉤子函數,這會導致一些外部擴展庫需要特殊處理,才能在服務端渲染應用程式中運行;並且與可以部署在任何靜態文件伺服器上的完全靜態單頁面應用程式 SPA 不同,服務端渲染應用程式,需要處於 Node.js server 運行環境;

  • 更多的伺服器負載:在 Node.js 中渲染完整的應用程式,顯然會比僅僅提供靜態文件的 server 更加大量占用CPU 資源,因此如果你預料在高流量環境下使用,請準備相應的伺服器負載,並明智地採用緩存策略。

如果你的項目的 SEO 和 首屏渲染是評價項目的關鍵指標,那麼你的項目就需要服務端渲染來幫助你實現最佳的初始載入性能和 SEO,具體的 Vue SSR 如何實現,可以參考作者的另一篇文章《Vue SSR 踩坑之旅》。如果你的 Vue 項目只需改善少數營銷頁面(例如  /, /about, /contact 等)的 SEO,那麼你可能需要預渲染,在構建時 (build time) 簡單地生成針對特定路由的靜態 HTML 文件。優點是設置預渲染更簡單,並可以將你的前端作為一個完全靜態的站點,具體你可以使用 prerender-spa-plugin 就可以輕鬆地添加預渲染 。

 

轉載地址:https://github.com/fengshi123/blog/issues/13


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 做Java開發的朋友都知道,每次開機啟動一堆的軟體和工具,包括未寫完的文檔,是非常花時間的,加上一桌面的快捷方式,往往不是那麼容易直接找到。windows的自動更新往往在凌晨自動啟動,導致很多軟體被異常關閉,另外該服務往往有大量駐留程式或有大量磁碟IO讓本就不富裕的性能大幅下降!,因此本次記錄如何關 ...
  • 原文鏈接:數據資產為王,解析企業數字化轉型與數據資產管理的關係 視頻回顧:點擊這裡 課件獲取:點擊這裡 一、數據資產背景介紹 隨著企業數字化轉型的深入,數據體量爆炸式增長,如何控制數據生產成本、發現有價值的數據,提高數據ROI,成了企業數字化轉型中後期的關鍵任務,這也是數據資產管理的終極目標。 而在 ...
  • 介紹 作為人類,我們天生就想要即刻擁有東西。即時滿足感是一種強大的力量,當前的實時經濟反映了這一點。業務方之間的事務在實時的數字化,逐漸自動化(M2M通信、物聯網、人工智慧和機器學習)並完成。 根據Volt Active Data的​​等待心理調查​​,當被問及“實時意味著什麼”時,超過70%的受訪 ...
  • 今天日誌出現異常,一步一步debug發現SQL語句返回值出錯,進一步發現是max()函數返回出錯。點擊跳轉解決辦法,趕時間的朋友可以去獲得答案。當然我還是希望大伙看看原由。 select max(HTMBXH) from biz_mn_contract_temp; 返回值按理應該是10 ,結果返回了 ...
  • 體驗簡介 場景將提供一臺配置了CentOS 8.5操作系統的ECS實例(雲伺服器)。通過本教程的操作帶您體驗如何將PolarDB-X通過Canal與ClickHouse進行互通,搭建一個實時分析系統。點擊前往 實驗準備 1. 創建實驗資源 開始實驗之前,您需要先創建ECS實例資源。 在實驗室頁面,單 ...
  • 你在鍛煉健身時,有沒有遇到這樣的情況?辛辛苦苦鍛煉了幾小時,卻發現App停止了運行,本次運動並沒有被記錄到App上,從而失去了一個查看完整運動數據的機會? 運動類App是通過手機或者穿戴設備的感測器,來識別運動狀態並反饋給用戶的,App能否在手機後臺時刻保持運行是影響運動數據完整性的關鍵因素。為了滿 ...
  • 視頻鏈接: JavaScript var let const的區別 - Web前端工程師面試題講解 參考鏈接: JavaScript 變數 JavaScript Let JavaScript Const 練習網站: codepen.io 初步認識: 功能實現 HTML的部分: <input type ...
  • 1、CSS畫一個三角形:(div寬高為0,border存在且顏色不一) step1: 設置寬度,高度為 0 的一個div盒子; step2: 為了方便理解,將盒子的 4 個邊框分別設置一樣的寬度boder,不同的顏色; step3: transparent將其他三個 邊框隱藏掉,就能看到效果了。 如 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...