1: 使用了 Vue3只损，是否都要遵循用 Composition API 的形式去寫頁面袜漩？
答案是否定的连锯。需要注意一點(diǎn)：Vue3 并沒有廢棄 Options API,甚至還會(huì)全力支持兼容 Vue2 語法的工作。而 CompositionAPI 出現(xiàn)的背景主要是為了解決邏輯抽象和和復(fù)用的問題吮便，但不意味著它成為了 Vue3 的標(biāo)準(zhǔn)骆姐。如何區(qū)分場景使用Options API or Composition API主要看業(yè)務(wù)邏輯的復(fù)雜程序镜粤，例如一些簡單的 toast/button等基礎(chǔ)組件，用options API形式會(huì)更加清晰和簡潔玻褪。而相對復(fù)雜的業(yè)務(wù)邏輯肉渴，可以用Composition API，可以把單獨(dú)一塊邏輯抽離到一個(gè)模塊带射。

2: Vue3 中混用 Options API 和 Composition API 會(huì)不會(huì)對性能產(chǎn)生影響?
不會(huì)同规。其實(shí)從問題 1 就可以明顯地看出來并不會(huì)對性能產(chǎn)生任何影響。不應(yīng)該被option api限制思維，而更多關(guān)注邏輯內(nèi)聚問題

3: 關(guān)于 setup 中沒有 this 的問題
官方是這樣說的：在setup()內(nèi)部券勺，this 不會(huì)是該活躍實(shí)例的引用绪钥，因?yàn)?setup() 是在解析其它組件選項(xiàng)之前被調(diào)用的，所以setup()內(nèi)部的 this的行為與其它選項(xiàng)中的this 完全不同关炼。這在和其它選項(xiàng)式 API 一起使用setup() 時(shí)可能會(huì)導(dǎo)致混淆

我們可以理解為：this未指向當(dāng)前的組件實(shí)例程腹，在setup被調(diào)用之前，data儒拂，methods寸潦，computed等都沒有被解析，但是組件實(shí)例確實(shí)在執(zhí)行setup函數(shù)之前就已經(jīng)被創(chuàng)建好了

4: Vue3 響應(yīng)式比 Vue2 的性能要好嗎社痛？
vue3 出來的時(shí)候见转，往往聽到的一些答案都是說 Vue3 性能比 Vue2 性能好，但真的是嗎蒜哀？
首先從實(shí)現(xiàn)上來講：我們都知道 vue2 中的響應(yīng)式主要?dú)w功于Object.defineProperty, 它主要劫持對象的屬性斩箫，所以它不能觀測到對象屬性的添加和刪除，而在 vue 中撵儿，是用Proxy實(shí)現(xiàn)的乘客，劫持的是整個(gè)對象，能規(guī)避掉 vue2 留下的問題统倒，但也有明顯的缺點(diǎn)就是兼容性不夠強(qiáng)。但是對比 Vue2氛雪，你需要知道的是 vue3 性能上的優(yōu)勢主要還是體現(xiàn)在初始化階段房匆。因?yàn)?Vue2 中定位響應(yīng)式對象時(shí)，會(huì)遞歸把子對象變成響應(yīng)式报亩。而 Vue3 其實(shí)是惰性執(zhí)行：在對象屬性被真正訪問的時(shí)候才會(huì)遞歸執(zhí)行子對象變成響應(yīng)式浴鸿。

5: Vue3與Vue2響應(yīng)式的區(qū)別

• Vue2.x的響應(yīng)式實(shí)現(xiàn)原理：
  1、對象類型：通過Object.defineProperty()對屬性的讀取弦追、修改進(jìn)行攔截（數(shù)據(jù)劫持）
  2岳链、數(shù)組類型：通過重寫更新數(shù)組的一系列方法來實(shí)現(xiàn)攔截。（對數(shù)組的變更方法進(jìn)行了包裹）

• vue2的缺點(diǎn)：（僅僅是關(guān)于數(shù)據(jù)響應(yīng)造成的缺點(diǎn)哦＞⒓）
  1掸哑、影響初始化速度、數(shù)據(jù)過大時(shí)的資源問題(對象的每一個(gè)屬性都要被攔截零远。所有的key都要有一次循環(huán)和遞歸)
  2苗分、數(shù)組的特殊處理，導(dǎo)致其修改數(shù)據(jù)不能使用索引(原因在于defineProperty不支持?jǐn)?shù)組）
  3牵辣、動(dòng)態(tài)添加或刪除對象屬性無法被偵測

vue也都提供了解決方案：$set和$delete摔癣，需要理解的直接移步深入響應(yīng)式原理。

• vue3.x的響應(yīng)式實(shí)現(xiàn)原理:
  1、通過Proxy（代理）: 攔截對象中任意屬性的變化, 包括：屬性值的讀寫择浊、屬性的添加戴卜、屬性的刪除
  2、Proxy可以理解成琢岩，在目標(biāo)對象之前架設(shè)一層“攔截”投剥，外界對該對象的訪問，都必須先通過這層攔截粘捎，因此提供了一種機(jī)制薇缅，可以對外界的訪問進(jìn)行過濾和改寫。

更多內(nèi)容可以參考 ES6 Proxy

6: Vue3對比Vue2的優(yōu)勢及新特性原理

1. Vue3.x性能比Vue2.x快
   diff方法優(yōu)化：
   vue2中的虛擬dom是全量的對比（每個(gè)節(jié)點(diǎn)不論寫死的還是動(dòng)態(tài)的都會(huì)比較）
   vue3新增了靜態(tài)標(biāo)記（patchflag）與上次虛擬節(jié)點(diǎn)對比時(shí)攒磨，只對比帶有patch flag的節(jié)點(diǎn)（動(dòng)態(tài)數(shù)據(jù)所在的節(jié)點(diǎn)）泳桦；可通過flag信息得知當(dāng)前節(jié)點(diǎn)要對比的具體內(nèi)容
   靜態(tài)提升：
   vue2無論元素是否參與更新，每次都會(huì)重新創(chuàng)建然后再渲染
   vue3對于不參與更新的元素娩缰，會(huì)做靜態(tài)提升灸撰，只會(huì)被創(chuàng)建一次，在渲染時(shí)直接復(fù)用即可
   時(shí)間偵聽器緩存：
   默認(rèn)情況下onClick會(huì)被視為動(dòng)態(tài)綁定拼坎，所以每次都會(huì)追蹤它的變化
   但是因?yàn)槭峭粋€(gè)函數(shù)浮毯，所以不用追蹤變化，直接緩存起來復(fù)用即可
2. 按需編譯泰鸡，體積比vue2.x更小
3. 組合API（類似react hooks）
4. 更好的Ts支持
5. 暴露了自定義渲染API
6. 更先進(jìn)的組件
7. template模板可以有多個(gè)根元素