一. 響應(yīng)式原理

1.Vue2中

• 對象類型：通過Object.defineProperty()對屬性的讀取、修改進(jìn)行攔截（數(shù)據(jù)劫持）。
• 數(shù)組類型：通過重寫更新數(shù)組的一系列方法來實(shí)現(xiàn)攔截。（對數(shù)組的變更方法進(jìn)行了包裹）。

Object.defineProperty(data, 'count', {

get () {},

set () {}

})

存在問題：

• 新增屬性、刪除屬性, 界面不會更新。
• 直接通過下標(biāo)修改數(shù)組, 界面不會自動更新。

2.Vue3中

實(shí)現(xiàn)原理:

• 通過Proxy（代理）: 攔截對象中任意屬性的變化, 包括：屬性值的讀寫、屬性的添加、屬性的刪除等。
• 通過Reflect（反射）: 對源對象的屬性進(jìn)行操作。
• MDN文檔中描述的Proxy與Reflect

Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

二. ref 對比reactive

1.從定義數(shù)據(jù)角度對比：

ref用來定義：基本類型數(shù)據(jù)。

reactive用來定義：對象（或數(shù)組）類型數(shù)據(jù)。

備注：ref也可以用來定義對象（或數(shù)組）類型數(shù)據(jù), 它內(nèi)部會自動通過reactive轉(zhuǎn)為代理對象。

2.從原理角度對比：

ref通過Object.defineProperty()的get與set來實(shí)現(xiàn)響應(yīng)式（數(shù)據(jù)劫持）。

reactive通過使用Proxy來實(shí)現(xiàn)響應(yīng)式（數(shù)據(jù)劫持）, 并通過Reflect操作源對象內(nèi)部的數(shù)據(jù)。

3.從使用角度對比：

ref定義的數(shù)據(jù)：操作數(shù)據(jù)需要.value，讀取數(shù)據(jù)時模板中直接讀取不需要.value。

reactive定義的數(shù)據(jù)：操作數(shù)據(jù)與讀取數(shù)據(jù)：均不需要.value。

三. setup的注意點(diǎn)

1.setup執(zhí)行的時機(jī)

在beforeCreate之前執(zhí)行一次，this是undefined。

2.setup的參數(shù)

props：值為對象，包含：組件外部傳遞過來，且組件內(nèi)部聲明接收了的屬性。

context：上下文對象

• attrs: 值為對象，包含：組件外部傳遞過來，但沒有在props配置中聲明的屬性, 相當(dāng)于 this.$attrs。
• slots: 收到的插槽內(nèi)容, 相當(dāng)于 this.$slots。注意插槽命名用v-solt:name
• emit: 分發(fā)自定義事件的函數(shù), 相當(dāng)于 this.$emit。