Vue 3.0 注意事項(xiàng)

1. Vue 3.0 目前發(fā)布了alpha 版本，可以通過vue@next 版本來安裝
2. vue-cli 目前不支持Vue 3.0 的安裝，需自行搭建開發(fā)環(huán)境（不要與vue-cli 3.0 混淆）
3. 如果使用vue-router 及vuex，同樣需要安裝對應(yīng)的alpha 版本

vue3.0數(shù)據(jù)響應(yīng)式的實(shí)現(xiàn)（Proxy）

Proxy是ES6為了操作對象而提供的新API ，Vue 3.0中，使用Proxy代替Object.defineProperty來做數(shù)據(jù)的響應(yīng)式。

Proxy作用：代理，攔截用戶對目標(biāo)對象的訪問（如常用的get、set、has），可以對用戶的訪問進(jìn)行過濾和改寫。 Proxy不能直接對引用值屬性做深入代理，需要一個節(jié)點(diǎn)一個節(jié)點(diǎn)的進(jìn)行創(chuàng)建proxy對象來實(shí)現(xiàn)。

Proxy對比Object.defineProperty的優(yōu)勢：

1. Proxy可以直接監(jiān)聽對象而非屬性
2. Proxy可以直接監(jiān)聽數(shù)組的變化
3. Proxy有13中攔截方法，功能更強(qiáng)大

通過一段代碼來理解下Proxy的使用：

image.png

Proxy接收2個參數(shù)，需代理的對象與代理操作對象。通過Proxy的攔截，在用戶獲取對象數(shù)據(jù)的時候，會首先進(jìn)入get方法中處理，這里甚至可以改寫返回的內(nèi)容。設(shè)置屬性值的時候，同樣會進(jìn)入set方法中，set方法最終需要返回操作是否成功的標(biāo)識。

Reflect

Reflect對象與Proxy對象一樣，是ES6為了操作對象而提供的新API ，Reflect不能執(zhí)行new指令。

Reflect作用：優(yōu)化Object的一些操作方法以及合理的返回Object操作返回的結(jié)果。比如下圖中用Reflect.has 函數(shù)來判斷對象是否有某個屬性。

image.png

Proxy 與Reflect 組合使用原理

Proxy攔截用戶對目標(biāo)對象的訪問， 實(shí)際對數(shù)據(jù)的操作由Reflect來完成。

image.png

看下面一段代碼來加以理解

image.png

在設(shè)置對象屬性的時候，Reflect.set可以直接返回設(shè)置是否成功的結(jié)果，這樣可以使得代碼更加簡潔合理。

setup

組件業(yè)務(wù)邏輯主要在setup 函數(shù)中完成。setup 函數(shù)會在組件掛載前（ beforeCreate 和 created 生命周期之間）運(yùn)行一次，類似組件初始化的作用。注意，此時組件還未完成實(shí)例化，也就無法在這里用 this 指向當(dāng)前組件實(shí)例。

setup的2個參數(shù)：

1. props：在 vue-next 中，props 的類型聲明不是必須的。 props是一個reactive對象，不要對它進(jìn)行解構(gòu)賦值，這樣會破壞props的響應(yīng)機(jī)制，導(dǎo)致后序外部更新props的時候組件無法更新。

2. context： context 對象也是一個 Proxy 對象，本質(zhì)上代理對象會將訪問指向組件的內(nèi)部實(shí)例（如訪問組件的 attrs 或者 emit ）

setup的2種返回值：

1. render context：顧名思義，就是模板中可以訪問到的各種數(shù)據(jù)和方法的上下文對象，如下圖：

   
   
   image.png

2. 模板渲染函數(shù)：此時template無效，不用寫該部分，如下圖：

   
   
   image.png

更多內(nèi)容

以上是關(guān)于Vue 3.0 知識點(diǎn)的簡單梳理，完整的Vue 3.0 環(huán)境搭建，其他核心知識點(diǎn)，vuex，vue-router等完整內(nèi)容，可以觀看我的完整視頻教程 Vue3.0（alpha），2020前端必修