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追蹤依賴，在屬性被訪問或修改時通知 watcher，watcher會尋找與這個屬性有哪些連動的元件，並一個一個去觸發它，並且要求這些元件要重新繪製。
透過這樣的邏輯就可以讓 Vue 將資料與畫面切分開來。
為什麼要用 ES6的 proxy 取代Object.defineProperty?
連結文章: Vue3 Proxy ? Vue2 Define Property 的不同?
其實還有很多的差別，但今天就先到這啦
