Vue 2 與 Vue 3 的不同


Posted by hoyi-23 on 2021-08-13

1. 生命週期

相關文章 關於 mount 生命週期

主要差別就是使用setup代替了之前的beforeCreate和created

Vue2.x Vue3
beforeCreate setup()
created setup()
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted
errorCaptured onErrorCaptured

2. 使用proxy代替defineProperty(響應式原理)

相關文章 什麼是 Proxy ? 與 Defined Property 的不同?

vue2.x雙向繫結的核心是Object.defineProperty(),到了 Vue3 變成使用 proxy的語法。

Object.defineProperty()

在Vue2裡面,當我們把一個JavaScript對象傳給Vue的data選項,Vue會使用Object.defineProperty()將與此JavaScript對象有關的所有屬性轉為getter/setter

getter/setter對我們來講,在使用Vue時你不會看到它,但是在內部他們讓Vue追蹤依賴,在屬性被訪問或修改時通知 watcherwatcher會尋找與這個屬性有哪些連動的元件,並一個一個去觸發它,並且要求這些元件要重新繪製。
透過這樣的邏輯就可以讓 Vue 將資料與畫面切分開來。

為什麼要用 ES6的 proxy 取代Object.defineProperty?

連結文章: Vue3 Proxy ? Vue2 Define Property 的不同?


其實還有很多的差別,但今天就先到這啦










Related Posts

內嵌 youtube 的廣告

內嵌 youtube 的廣告

實作 API 練習

實作 API 練習

JS 箭頭函式

JS 箭頭函式


Comments