首頁  >  文章  >  web前端  >  用vue框架有什麼好處

用vue框架有什麼好處

青灯夜游
青灯夜游原創
2022-12-02 20:28:5811541瀏覽

用vue的好處:1、Vue是元件化開發,減少程式碼的書寫,使程式碼易於理解;2、可以對資料進行雙向綁定;3、相比較傳統的用超連結進行頁面的切換與跳轉,Vue使用的是路由,不用刷新頁面;4、Vue是單頁應用,加載時不用獲取所有的數據和dom,提高加載速度,優化了用戶體驗;5、Vue的第三方組件庫豐富,使用起來方便,提高了開發效率。

用vue框架有什麼好處

本教學操作環境:windows7系統、vue3版,DELL G3電腦。

什麼是Vue.js

Vue是一套用來建立使用者介面的漸進式JavaScript框架。與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。 Vue 的核心函式庫只專注於視圖層,不僅易於上手,也方便與第三方函式庫或既有專案整合。另一方面,當與現代化的工具鏈以及各種支援類別庫結合使用時,Vue 也完全能夠為複雜的單頁應用(SPA)提供驅動。

Vue.js 的目標是透過盡可能簡單的 API 實現回應的資料綁定和組合的視圖元件。

Vue.js 本身不是一個全能框架-它只聚焦在視圖層。因此它非常容易學習,非常容易與其它庫或已有專案整合。另一方面,與相關工具和支援庫一起使用時  ,Vue.js 也能驅動複雜的單頁應用程式。

Vue.js的優點

  • 體積小:壓縮後只有33k;

  • ##更高的運作效率:基於虛擬DOM,一種可以預先透過JavaScript進行各種計算,把最終的DOM操作計算出來並優化的技術,由於這種DOM操作屬於預處理操作,並沒有真實的操作DOM,所以叫做虛擬DOM;【學習影片分享:

    vue影片教學web前端影片

  • 雙向資料綁定:讓開發者不用再去操作DOM對象,把更多的精力投入到業務邏輯上;

  • 生態豐富、學習成本低:市場上擁有大量成熟、穩定的基於vue.js的ui框架及組件,拿來即用實現快速開發;對初學者友好、入門容易、學習資料多;

其實拋開官方的一些不知所雲的說法,簡單來說,在傳統web開發中,我們搭建專案都以html結構為基礎,然後透過jquery或js來加入各種特效功能,需要去選取每個元素進行指令。

這些內容在簡單的專案中或不變的專案中還能應付得來,一旦專案改變或專案工程較大,程式碼的修改將是複雜繁瑣的。

而這時候用了vue,這些問題都不復存在。在例如一些單網頁製作成的應用程序,一般涉及到數據交互的內容都很多,而應用了vue之後將大大縮減工作量。

vue在web開發,網站製作有哪些顯著優勢?

1、資料綁定:vue會根據對應的元素,進行設定元素數據,透過輸入框,以及get取得資料等多種方式進行資料的即時綁定,進行網頁及應用程式的資料渲染。

2、元件式開發:透過vue的模組封裝,它可以將一個web開發中設計的各種模組進行拆分,變成單獨的元件,然後透過資料綁定,呼叫對應模版元件,同時傳入參數,即可完成整個專案的開發。

使用vue有什麼好處?

  • Vue是元件化開發,減少程式碼的書寫,讓程式碼易於理解。

  • 最突出的優勢在於可以對資料進行雙向綁定。

  • 相比較傳統的用超連結進行頁面的切換與跳轉,Vue使用的是路由,不用刷新頁面。

  • Vue是單頁應用,載入時不用取得所有的資料和dom,提高載入速度,優化了使用者體驗。

  • Vue的第三方元件庫豐富,使用起來方便,提高了開發效率。

1、響應式效能提升

1)diff方法最佳化

diff 演算法是虛擬DOM 技術的必然產物,它會對新舊DOM 進行比較,然後將變更的DOM 更新在真實的DOM 上。使用vue,在創建虛擬 DOM 的時候,會根據 DOM 中的內容添加一個靜態標記,在資料改變的時候,就會帶著靜態標記的節點去對比,能夠快速找到變化的 DOM 。

2)事件偵聽器快取

預設情況下onClick會被視為動態綁定,所以每次都會追蹤它的變化,但是因為是同一個函數,所以不用追蹤變化,直接緩存起來復用即可。

3)ssr渲染

##

當有大量靜態內容時,這些內容會被當做純字串推進一個 buffer 內,即使存在動態綁定,也會透過模板插值潛入進去,這會比虛擬 DOM 渲染快得多。

2、程式碼體積減少

打包大小減少41%。

vue 移除了一些不常用的 API,如:inline-template、filter 等,使用 tree-shaking。

Tree Shaking 搖樹優化,指的就是當我們引入一個模組的時候,不引入這個模組的所有程式碼,只引入我們需要的程式碼。

在vue 中,引入tree-shaking,所有的API 都透過ES6 模組化的方式引入,這樣就能夠讓webpack 或rollup 等打包工具在打包時,就會自動對沒有用到的API進行剔除,最小化bundle 體積。

初次渲染快55%, 更新渲染快133%。元件選擇了按需引入,使得打包後的體積也更小了,所以專案運行的時候速度更快,更順暢了!

3、編譯被最佳化

vue 使用靜態提升後,對於不參與更新的元素,只會被創建一次,在渲染時直接重複使用就好了。

Fragment範本內不用再建立一個唯一根節點,可以直接放同級標籤和內容。就相當於少了一個節點巢狀渲染。

4、組合式API

vue 新增了組合式 api ,更有利於維護與封裝。一個功能模組程式碼會集中在一起,實現高內聚,低耦合。提高程式碼的可讀性和可維護性,基於函數組合的 api 更好地重複使用邏輯程式碼。

5、更好的 ts 支援

vue 新增了 defineComponent 函數,使元件在 ts 下,更好的利用參數類型推斷。如:reactive 和 ref 很有代表性。

6、更先進的元件

  • vue 中可以不需要根節點,多個元素或標籤可並列存在。

  • 可以把 teleport 中的內容加到任意的節點內,對於嵌套較深的元件來說絕對是個福音。

  • 允許程式在等待非同步元件渲染一些後備的內容,可以讓我們建立一個平滑的使用者體驗。

7、簡單總結:

vue 目前是國內最火的前端框架之一,vue 效能提升、運行速度也比其他框架好很多。

總之vue 就是:

  • 讓專案更快

  • 讓程式碼更少

  • 更容易維護

  • 讓我們開發更快,加班更少

(學習影片分享:web前端開發程式設計基礎影片

以上是用vue框架有什麼好處的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn