響應式區(qū)別

在 Vue 2 中，使用了 Object.defineProperty 來實現(xiàn)數(shù)據(jù)的響應式。它通過逐個定義對象屬性的方式來進行數(shù)據(jù)的劫持和監(jiān)聽。這種方式存在一些限制，例如無法監(jiān)聽新增的屬性，需要使用 Vue 提供的 $set 方法來實現(xiàn)響應式。此外，由于需要逐個定義屬性，對于大型對象或數(shù)組的性能不夠理想。

而在 Vue 3 中，使用了 Proxy 來實現(xiàn)響應式系統(tǒng)。Proxy 是 ES6 提供的一種代理機制，可以攔截對象的操作。Vue 3 使用 Proxy 來創(chuàng)建一個中間代理，該代理會攔截對數(shù)據(jù)的訪問和修改，并觸發(fā)相應的響應。相較于 Vue 2 的 Object.defineProperty，Proxy 提供了更強大的功能和性能優(yōu)勢。

使用 Proxy 實現(xiàn)的響應式系統(tǒng)具有以下優(yōu)勢：

1. 可以監(jiān)聽新增和刪除的屬性：Proxy 可以監(jiān)聽對象的整個訪問和修改過程，包括屬性的新增和刪除。這意味著無需特殊處理，即可實現(xiàn)對新增屬性的監(jiān)聽。
2. 性能更好：Proxy 的實現(xiàn)方式比 Object.defineProperty 更高效。它可以一次性攔截整個對象或數(shù)組，而不需要逐個定義屬性，因此在處理大型對象或數(shù)組時具有更好的性能。
3. 擴展性更好：Proxy 提供了豐富的攔截器方法，可以攔截對象的各種操作，例如讀取屬性、修改屬性、刪除屬性等。這使得開發(fā)者可以根據(jù)需求自定義攔截器的行為，實現(xiàn)更高級的功能。

總結來說，Vue 3 使用 Proxy 來實現(xiàn)響應式系統(tǒng)，相較于 Vue 2 的 Object.defineProperty，具有更好的性能和擴展性，并且可以監(jiān)聽新增和刪除的屬性。這些改進使得 Vue 3 的響應式系統(tǒng)更加強大和靈活。

例子:

假設我們有一個 Vue.js 2 的響應式對象?data，它包含了兩個屬性?name?和?age：

const data = {
  name: 'John',
  age: 25
}

在 Vue.js 2 中，如果我們將?data?對象傳遞給 Vue 實例進行響應式處理，Vue.js 會使用?Object.defineProperty?來劫持這兩個屬性的變化。

new Vue({
  data: data
})

現(xiàn)在，如果我們在運行時向?data?對象中添加一個新的屬性?gender，Vue.js 2 將無法自動追蹤和響應這個新增屬性的變化。

data.gender = 'Male'

這是因為在初始化階段，Vue.js 2 已經使用?Object.defineProperty?對?data?對象的?name?和?age?屬性進行了劫持和監(jiān)聽，但它無法感知到后續(xù)的屬性變化。

所以，當我們在運行時向?data?對象添加新的屬性?gender?時，Vue.js 2 是無法自動將其變?yōu)轫憫降模矡o法觸發(fā)相應的更新操作。

這就是為什么 Vue.js 2 無法監(jiān)聽新增屬性的原因。它的響應式系統(tǒng)是在初始化階段對屬性進行劫持和監(jiān)聽的，而無法動態(tài)地追蹤和響應后續(xù)的屬性變化。這也是 Vue.js 3 引入 Proxy 對象的一個重要改進，它可以監(jiān)聽新增和刪除的屬性，提供了更強大和靈活的響應式能力。

組件實例

Vue 3 引入了組合式 API(setup)，與 Vue 2 的選項式?API(各種生命周期data啥的) 相比，有以下幾個主要區(qū)別：

1. 組合式 API 的靈活性：組合式 API 允許開發(fā)者根據(jù)邏輯相關性來組織代碼，而不是按照選項的方式將代碼分散在不同的選項中。這樣可以更好地組織和重用代碼，使得代碼更加可讀和可維護。

2. 組合式 API 的邏輯復用：組合式 API 提供了一種更好的邏輯復用方式，通過自定義組合函數(shù)，可以將邏輯相關的代碼封裝為一個可復用的組合函數(shù)，并在多個組件中進行復用。這使得代碼的復用性更高，減少了重復編寫相似邏輯的工作。

3. 組合式 API 的類型推導：Vue 3 的組合式 API 借助 TypeScript 的類型推導能力，提供了更好的類型支持。開發(fā)者可以在組合函數(shù)中明確指定參數(shù)和返回值的類型，提供更好的代碼提示和類型檢查。

4. 組合式 API 的邏輯封裝：組合式 API 允許將邏輯封裝在組合函數(shù)中，使得組件的代碼更加簡潔和聚焦。開發(fā)者可以將復雜的邏輯拆分成多個組合函數(shù)，每個組合函數(shù)負責不同的功能，從而提高代碼的可讀性和可維護性。

總的來說，組合式 API 提供了更靈活、可復用和可維護的方式來組織和編寫代碼。它使得開發(fā)者能夠更好地組織邏輯、復用代碼，并且提供了更好的類型支持。這些改進使得 Vue 3 的組合式 API 更適合開發(fā)大型復雜應用，并且提供了更好的開發(fā)體驗。

生命周期

vue2：

beforeCreate：在實例初始化之后、數(shù)據(jù)觀測 (data observer) 和事件配置之前被調用。

created：在實例創(chuàng)建完成后被調用，這時候實例已經完成了數(shù)據(jù)觀測、屬性和方法的運算，但是尚未掛載到 DOM 上。

beforeMount：在掛載開始之前被調用，相關的 render 函數(shù)首次被調用。

mounted：在掛載完成后被調用，此時組件已經被放入 DOM 中。

beforeUpdate：在組件更新之前被調用，發(fā)生在重新渲染之前。

updated：在組件更新之后被調用，發(fā)生在重新渲染之后。

beforeDestroy：在實例銷毀之前調用。在這一步，實例仍然完全可用。

destroyed：在實例銷毀之后調用。此時，所有的指令都已解綁，所有的事件監(jiān)聽器都已移除。

vue3：

因為引入了組合式API，將組件邏輯轉移到了setup函數(shù)中，setup函數(shù)就替代了beforeCreate和created勾子函數(shù)

onBeforeMount：在掛載之前執(zhí)行的鉤子函數(shù)。

onMounted：在組件掛載到 DOM 后執(zhí)行的鉤子函數(shù)。

onBeforeUpdate：在組件更新之前執(zhí)行的鉤子函數(shù)。

onUpdated：在組件更新后執(zhí)行的鉤子函數(shù)。

onBeforeUnmount：在組件卸載之前執(zhí)行的鉤子函數(shù)。

onUnmounted：在組件卸載后執(zhí)行的鉤子函數(shù)。
?

總結

1. 響應式系統(tǒng)的性能優(yōu)化：Vue 3 使用 Proxy 替代了 Vue 2 中的 Object.defineProperty，這使得響應式系統(tǒng)在性能上有所提升。Proxy 的實現(xiàn)方式更高效，可以一次性攔截整個對象或數(shù)組，而不需要逐個定義屬性，從而提高了大型對象或數(shù)組的性能。

2. 虛擬 DOM 的優(yōu)化：Vue 3 在虛擬 DOM 的實現(xiàn)上進行了一些優(yōu)化。它引入了靜態(tài)樹提升 (Static Tree Hoisting) 技術，可以在編譯階段檢測到靜態(tài)節(jié)點并將其提升為常量，減少了運行時的虛擬 DOM 操作，提高了渲染性能。

3. 編譯器的優(yōu)化：Vue 3 的編譯器進行了一些優(yōu)化，生成的代碼更加緊湊和高效。編譯器在編譯時會對模板進行靜態(tài)分析，并生成更優(yōu)化的渲染函數(shù)，減少了運行時的開銷。

4. Tree-shaking 支持：Vue 3 的模塊系統(tǒng)使用了 ES Module 的語法，使得現(xiàn)代的打包工具可以更好地進行 Tree-shaking，只打包使用到的組件和功能，減少了打包體積。文章來源地址http://www.zghlxwxcb.cn/news/detail-798281.html

到了這里，關于vue3和vue2區(qū)別的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！