Vue 2 與 Vue 3 的不同

1. 生命週期

主要差別就是使用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追蹤依賴，在屬性被訪問或修改時通知 watcher，watcher會尋找與這個屬性有哪些連動的元件，並一個一個去觸發它，並且要求這些元件要重新繪製。
透過這樣的邏輯就可以讓 Vue 將資料與畫面切分開來。