簡介

vue3 的Pre-Alpha 版本已經開源，開源地址：

https://github.com/vuejs/vue-next

尤雨溪把vue3目標描述為：

• 讓它更快
• 讓它更小
• 使它更易於維護
• 使原生目標更容易
• 讓生活更輕鬆

那麼看看vue3 和 vue2 有哪些不一樣的地方

性能

Vue 2.6.10 最小化壓縮 22.8kB

Vue 3 最小化壓縮約為 10KB

全局API

vue2:

Vue核心使用什麼功能，它們最終都會出現在生產代碼中，因為Vue實例被導出為單個對象

vue3:

按需導出，只導出使用到的API並刪除未使用的代碼。所以以前的全局API現在只能通過命名的導出才能使用。

示例

vue2

// Vue 2.x - whole `Vue` object is bundled for production 
import Vue from 'vue'
Vue.nextTick(() => {})
const obj = Vue.observable({})

vue3

 // Vue 3.x - only imported properties are bundled
import { nextTick, observable } from 'vue'
nextTick(() => {})
const obj = observable({})

屬性賦值

vue2 基於的Object.defineProperty, 我們需要使用Vue.set,Vue.delete 來設值屬性值，觸發屬性值的變化。

vue3 使用JS Proxies, 直接對屬性進行賦值，就可以觸發屬性值變化。

並且vue3的這一改進，可以更快觸發屬性值變化，性能比vue2 大約快2倍。

示例

// Adding a new property to reacitve object in Vue 2.x
Vue.set(this.myObject, key, value) 
// Adding a new property to reactive object in Vue 3
this.myObject[key] = value

重新渲染組件識別

Vue 3中新增一個新的生命週期掛鉤-renderTriggered, 我們renderTriggered可以使用它來跟蹤和消除不必要的組件重新渲染, 這對在運行時組件的性能優化有非常有用。

示例

const Component = {
 // other properties
 renderTriggered (event) {
 console.log(`Re-render of ` + this.$options.name + ` component`, event)
 }
}

PS

vue3 來了，又要開始學習新知識了，你快學不動了嗎？