vue3 與 vue2 優點對比彙總
目錄
- 優點1：diff演算法的優化
- 優點2：hoistStatic 靜態提升
- 優點3：cacheHandlers 事件偵聽器快取
- 優點4：ssr渲染
- 優點5：更好的Ts支援
- 優點6：Compostion API: 組合API/注入API
- 優點7：更先進的元件
- 優點8：自定義渲染API
- 優點9：按需編譯，體積比2.x更小
- 優點10：支援多根節點元件
摘要：
Vue3新版本的理念成型於 2018 年末，當時的 Vue 2 已經有兩歲半了。比起通用軟體的生命週期來這好像也沒那麼久，Vue3在2020年正式推出，在原始碼和API都有較大變化，效能得到了顯著的提升，比Vue2.x快1.2~2倍。
Vue3新版本的理念成型於 2018 年末，當時的 Vue 2 已經有兩歲半了。比起通用軟體的生命週期來這好像也沒那麼久，Vue3在2020年正式推出，在原始碼和API都有較大變化，效能得到了顯著的提升，比Vue2.x快1.2~2倍。
其中，一些比較重要的優點有：
diff演算法的優化：hoistStatic 靜態提升；cacheHandlers事件偵聽器快取；ssr渲染；更好的Ts支援；Compostion API: 組合API/注入API；更先進的元件；自定義渲染API；按需編譯，體積比vue2.x更小；支援多根節點元件等。
下面我們就來具體說說vue3 的優點：
優點1：diff演算法的優化
vue2中的虛擬dom是全量的對比（每個節點不論寫死的還是動態的都會一層一層比較，這就浪費了大部分事件在對比靜態節點上）
vue3新增了靜態標記（patchflag）與上次虛擬節點對比時，只對比帶有patch flag的節點（動態資料所在的節點）；可通過flag資訊得知當前節點要對比的具體內容。
例如：下面的模板包含一個div，div內包含三個段落，其中前兩個段落是靜態固定不變的，而第三個段落的內容繫結的msg屬性，當msg改變的時候，Vue會生成新的虛擬DOM然後和舊的進行對比。
<div>
<p>雲駐共創</p>
<p>如何評價 vue3</p>
<p>{{msg}}</p>
</div>
當檢視更新時，只對動態節點部分進行diff運算，減少了資源的損耗。Patchflag
class是動態繫結的。
優點2：hoistStatic 靜態提升
vue2無論元素是否參與更新，每次都會重新建立然後再渲染。vue3對於不參與更新的元素，會做靜態提升，只會被建立一次，在渲染時直接複用即可。例如：下面我們利用Vue 3 Template Explorer,來直觀的感受一下：
<div>
<div>共創1</div>
<div>共創2</div>
<div>{{name}}</div>
</div>
靜態提升之www.cppcns.com前
export function render(...) {
return (
_openBlock(),_createBlock('div',null,[
_createVNode('div','共創1'),_createVNode('div','共創2'),_createVNode(
'div',_toDisplayString(_ctx.name),1 /* TEXT */
),])
)
}
靜態提升之後
const _hoisted_1 = /*#__PURE__*/ _createVNode(
'div','共創1',-1 /* HOISTED */
)
const _hoisted_2 = /*#__PURE__*/ _createVNode(
'div','共創2',-1 /* HOISTED */
)
export function render(...) {
return (
_openBlock(),[
_hoisted_1,_hoisted_2,])
)
}
從以上程式碼中我們可以看出，_hoisted_1 和_hoisted_2兩個方法被提升到了渲染函式 render 之外，也就是我們說的靜態提升。通過靜態提升可以避免每次渲染的時候都要重新建立這些物件，從而大大提高了渲染效率。
優點3：cacheHandlers 事件偵聽器快取
vue2.x中，繫結事件每次觸發都要重新生成全新的function去更新，cacheHandlers 是Vue3中提供的事件快取物件，當 cacheHandlers 開啟，會自動生成一個行內函數，同時生成一個靜態節點。當事件再次觸發時，只需從快取中呼叫即可，無需再次更新。
預設情況下onClick會被視為動態繫結，所以每次都會追蹤它的變化，但是同一個函式沒必要追蹤變化，直接快取起來複用即可。
例如：下面我們同樣是通過Vue 3 Template Explorer，來看一下事件監聽器快取的作用：
<div>
<div @click="todo">做點有趣的事</div>
</div>
該段 html 經過編譯後變成我們下面的結構(未開啟事件監聽快取)：
export function render(...) {
return (_openBlock(),[
_createVNode('div',{ onClick: _ctx.todo},'做點有趣的事',8 /* PROPS */,['onClick']),])
)
}
當我們開啟事件監聽器快取後：
export function render(...) {
return (_openBlock(),{
onClick: //開啟監聽後
_cache[1] || (_cache[1] = (...args) =>_ctx.todo(...args)),},'做點有趣的事'),])
)
}
我們可以對比開啟事件監聽快取前後的程式碼，轉換之後的程式碼,大家可能還看不懂,但是不要緊，我們只需要觀察有沒有靜態標記即可，在Vue3的diff演算法中,只有有靜態標記的才會進行比較,才會進行追蹤。
優點4：ssr渲染
Vue2 中也是有 SSR 渲染的，但是 Vue3 中的 SSR 渲染相對於 Vue2 來說，效能方面也有對應的提升。
當存在大量靜態內容時，這些內容會被當作純字串推進一個 buffer 裡面，即使存在動態的繫結，會通過模版插值潛入進去。這樣會比通過虛擬 dmo 來渲染的快上很多。
當靜態內容大到一個量級的時候，會用_createStaticVNode 方法在客戶端去生成一個 static node，這些靜態 node，會被直接 innerHtml，就不需要再建立物件，然後根據物件渲染。
優點5：更好的Ts支援
vue2不適合使用ts，原因在於vue2的Option API風格。options是個簡單物件，而ts是一種型別系統、面向物件的語法。兩者有點不匹配。
在vue2結合ts的具體實踐中，要用 vue-class-component 強化 vue 元件，讓 Script 支援 TypeScript 裝飾器，用 vue-property-decorator 來增加更多結合 Vue 特性的裝飾器，最終搞的ts的元件寫法和的元件寫法差別挺大。
在vue3中，量身打造了defineComponent函式，使元件在ts下，更好的利用引數型別推斷 。Composition API 程式碼風格中，比較有代表性的api就是 ref 和 reactive，也很好的支援了型別www.cppcns.com宣告。
import { defineComponent,ref } from 'vue'
const Component = defineComponent({
props: {
success: { type: String },student: {
type: Object as PropType<Student>,required: true
}
},setup() {
const year = ref(2020)
const month = ref<string | number>('9')
month.value = 9 // OK
const result = year.value.split('')
}
優點6：Compostion API: 組合API/注入API
傳統的是html//（結構/樣式/邏輯）分離。vue通過元件化的方式，將聯絡緊密的結構/樣式/邏輯放在一起，有利於程式碼的維護。compostionapi更進一步，著力於JS（邏輯）部分，將邏輯相關的程式碼放在一起，這樣更有利於程式碼的維護。
在vue2的元件內使用的是Option API風格(data/methods/mounted)來組織的程式碼，這樣會讓邏輯分散，舉個例子就是我們完成一個計數器功能，要在data裡宣告變數，在methods定義響應函式，在mounted裡初始化變數，如果在一個功能比較多、程式碼量比較大的元件裡，你要維護這樣一個功能，就需要在data/methods/mounted反覆的切換到對應位置，然後進行程式碼的更改。
而在vue3中，使用setup函式。如下所示跟count相關的邏輯，都放到counter.js檔案裡，跟todo相關的邏輯放到todos.js裡。
import useCounter from './counter'
import useTodo from './todos'
setup(){
let { val,todos,addTodo } = useTodo()
let {count,add} = useCounter()
return {
val,addTodo,count,add,}
優點7：更先進的元件
vue2是不允許這樣寫的，元件必須有一個跟節點，現在可以這樣寫，vue將為我們建立一個虛擬的Fragment節點。
<template> <div>華為雲享專家</div> <div>全棧領域博主</div> </template>
在Suspended-component完全渲染之前，備用內容會被顯示出來。如果是非同步元件，Suspense可以等待元件被下載，或者在設定函式中執行一些非同步操作。
優點8：自定義渲染API
vue2.x專案架構對於weex（移動端跨平臺方案）和myvue（小程式上使用）等渲染到不同平臺不http://www.cppcns.com太友好，vue3.0推出了自定義渲染API解決了該問題。下面我們先看vue2和vue3的入口寫法有哪些不同。
vue2：
import Vue from 'vue'
import App from './App.vue'
new Vue({ => h(App)}).$mount('#app')
vue3：
const { createApp } from 'vue'
import App from "./src/App"
createApp(App).mount(('#app')
vue官方實現的 createApp 會給我們的 template 對映生成 html 程式碼，但是要是你不想渲染生成到 html ，而是要渲染生成到 canvas 之類的不是html的程式碼的時候，那就需要用到 Custom Renderer API 來定義自己的 render 渲染生成函數了。
import { createApp } from "./runtime-render";
import App from "./src/App"; // 根元件
createApp(App).mount('#app');
使用自定義渲染API，如weex和myvue這類方案的問題就得到了完美解決。只需重寫createApp即可。
優點9：按需編譯，體積比vue2.x更小
框架的大小也會影響其效能。這是 Web 應用程式的唯一關注點，因為需要即時下載資源，在瀏覽器解析必要的Script 之前該應用程式是不可互動的。對於單頁應用程式尤其如此。儘管 Vue 一直是相對輕量級的（Vue 2 的執行時大小壓縮為 23 KB）。
在 Vue 3 中，通過將大多數全域性 API 和內部幫助程式移至 ES 模組匯出來，實現了這一目標。這使現代的打包工具可以靜態分析模組依賴性並刪除未使用的匯出相關的程式碼。模板編譯器還會生成友好的 Tree-shakhttp://www.cppcns.coming 程式碼，在模板中實際使用了該功能時才匯入該功能的幫助程式。
框架的某些部分永遠不會 Tree-shaking，因為它們對於任何型別的應用都是必不可少的。我們將這些必不可少的部分的度量標準稱為基準尺寸。儘管增加了許多新功能，但 Vue 3 的基準大小壓縮後約為 10 KB，還不到 Vue 2 的一半。
優點10：支援多根節點元件
Vue3 一個模板不再限制有多個根節點，(多個根節點上的 Attribute 繼承) 需要顯式定義 attribute 應該分佈在哪裡。否則控制檯會給出警告提示。
在 Vue 3 中，元件現在正式支援多根節點元件，即片段！
在 2.x 中，不支援多根元件，當用戶意外建立多根元件時會發出警告，因此，為了修復此錯誤，許多元件被包裝在一箇中。如下
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>
在 3.x 中，元件現在可以有多個根節點！但是，這確實要求開發者明確定義屬性應該分佈在哪裡。
<template> <header>...</header> <main v-bind="$attrs">...</main> <footer>...</footer> </template>
總結：
- Vue是國內最火的前端框架之一。效能提升，執行速度是vue2的1.2-2倍。
- 體積更小，按需編譯體積vue2要更小。
- 型別推斷，更好的支援ts這個也是趨勢。
- 高階給予，暴露了更底層的API和提供更先進的內建元件。
- 組合API，能夠更好的組織邏輯，封裝邏輯，複用邏輯
到此這篇關於vue3 對比 vue2 有什麼優點的文章就介紹到這了,更多相關vue3 對比 vue2 的優點內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！