????????每天10道題，100天后，搞定所有前端面試的高頻知識點，加油！！！在看文章的同時，希望不要直接看答案，先思考一下自己會不會，如果會，自己的答案是什么？想過之后再與答案比對，是不是會更好一點，當然如果你有比我更好的答案，歡迎評論區(qū)留言，一起探討技術之美。

目錄

面試官：請你簡述一下Proxy 與 Object.defineProperty優(yōu)劣對比？

面試官：請問Vue如何快速定位哪個組件出現(xiàn)性能問題？

面試官：請說明scoped是如何實現(xiàn)樣式傳統(tǒng)的？

面試官：請問Vue中的數(shù)據(jù)為什么頻繁變化但只會更新一次？

面試官：請說明給vue中的元素設置key值時可以使用math中的random方法嗎？

面試官：請簡述Vue中相同邏輯如何進行抽離？

面試官：請說明一下vue中watch是怎么深度監(jiān)聽對象變化的？

面試官：請你簡述一下vue中子組件為什么不可以修改父組件傳遞的props？

面試官：請你簡述一下為什么vue采用異步渲染？

面試官：請問說明是SSR，它主要解決什么問題？

---

面試官：請你簡述一下Proxy 與 Object.defineProperty優(yōu)劣對比？

我：呃~，Proxy 與 Object.defineProperty 在 JS中各有其優(yōu)勢和劣勢，以下是對它們優(yōu)劣勢的詳細對比：

Proxy優(yōu)勢：

1）靈活性：可以攔截對象的多種操作，包括屬性的讀取、賦值、刪除、函數(shù)調用等，而 Object.defineProperty 只能用于定義單個屬性的行為。

2）監(jiān)聽能力：可以攔截對象屬性的增刪改操作，并進行相應的處理，而 Object.defineProperty 只能監(jiān)聽屬性值的改變。

3）攔截操作：可以更加細粒度地控制對象的行為，例如攔截屬性枚舉、函數(shù)的 new 操作等。

4）性能：因為其是 JS引擎的一部分，可以進行更有效的優(yōu)化。

5）易使用：提供了一個相對簡單的 API，使得創(chuàng)建代理對象更為輕松。

Object.defineProperty優(yōu)勢：

1）兼容性：ES5 的標準方法，因此在各個瀏覽器和環(huán)境中的支持情況較好。

2）靜態(tài)定義：一種靜態(tài)方式來定義對象的屬性，開發(fā)者需要明確地為每個屬性定義 getter 和 setter 方法。

各自劣勢：

Proxy兼容性可能不太行，舊瀏覽器可能不太支持；Object.defineProperty代碼重復冗長，修改通常是不透明的，在大量的進行屬性定義和操作時速度較慢。

目前開發(fā)者已經(jīng)普遍使用Proxy，因其提供了更多的功能和更好的性能，它已經(jīng)成為許多開發(fā)人員更常用的工具之一，需要注意就是確保目標環(huán)境支持這一特性。

面試官：請問Vue如何快速定位哪個組件出現(xiàn)性能問題？

我：呃~，可以使用Vue Devtools的Performance Tab，其中的Performance Tab可以幫助記錄和查看組件的渲染性能，在定位到性能問題后，你可以采取一系列優(yōu)化策略來提高組件性能，包括但不限于：

1）組件懶加載：使用異步組件加載機制，只在需要時加載組件。

2）條件渲染：使用v-if指令有條件地渲染元素，避免無謂的渲染操作。

3）事件通信：使用自定義事件($emit)進行父子組件通信，避免直接引用。

4）避免不必要的重新渲染：使用track-by或key屬性幫助Vue識別列表中元素的身份，避免全部重新渲染。

5）使用計算屬性替代方法和觀察者，因為計算屬性會自動重計算并緩存結果。

面試官：請說明scoped是如何實現(xiàn)樣式傳統(tǒng)的？

我：呃~，在vue中，scoped 屬性提供了一種方式，使得樣式只在當前組件中生效，而不會影響到其他組件。這種機制是通過 CSS Modules 或者 PostCSS 的一個插件（通常是 postcss-scoped）來實現(xiàn)的，但 Vue 在內部使用的是一種更簡單的、基于 CSS 轉換的策略。

當我們在 vue 單文件組件的 <style> 標簽中使用 scoped 屬性時，Vue 會在編譯過程中為這些樣式添加一個唯一的屬性（如 data-v-f3f3eg9），并在編譯后的 CSS 選擇器后添加這個屬性，以確保這些樣式只應用于當前組件的根元素及其子元素。

舉個例子，假設我們有以下 Vue 單文件組件：

<template>  <div class="example">Hello World</div>  
</template>  <style scoped>  
.example {  color: red;  
}  
</style>// 在編譯后，Vue 會將樣式轉換為類似下面的代碼：
.example[data-v-f3f3eg9] {  color: red;  
}// 同時，模板中的根元素會被添加一個對應的屬性，以便匹配上面的選擇器：
<div class="example" data-v-f3f3eg9>Hello World</div>

通過這種方式，.example 樣式就只會應用到當前組件的 <div> 元素上，而不會影響到其他組件或頁面上的 .example 樣式，但是scoped 樣式并不是完全隔離的。由于 CSS 的特性，有些情況下樣式可能會“泄漏”到其他組件。例如，如果一個子組件的深度超過了 scoped 樣式的作用范圍，或者使用了像 ::v-deep（在 Vue 3 中是 ::deep 或 >>>）這樣的深度選擇器，那么樣式就可能會影響到其他組件。因此，在使用 scoped 樣式時，仍然需要注意樣式的隔離性和可維護性。

面試官：請問Vue中的數(shù)據(jù)為什么頻繁變化但只會更新一次？

我：呃~，在vue中當數(shù)據(jù)頻繁變化時，vue會利用其響應式系統(tǒng)來跟蹤數(shù)據(jù)的變化，并盡可能地將這些變化批量更新到DOM中，以提高性能和效率。這種行為被稱為"批量更新"或"異步更新"，主要是因為其使用了一種稱為 "事件循環(huán)機制" 的方式來實現(xiàn)這種批量更新。

??????? 當數(shù)據(jù)發(fā)生變化時，vue并不會立即更新DOM，而是將這些變化記錄在一個隊列中，然后vue會在下一個 "事件循環(huán)" 中去處理這個隊列，將變化應用到DOM中。

??????? 這樣做的好處是，vue可以將多次數(shù)據(jù)變化合并成一次DOM更新操作，減少了重復的DOM操作，從而提高了性能。

????????需要注意的是，有時候可能會遇到一些情況下，并不會觸發(fā)批量更新，例如在一些異步操作中，vue可能無法立即檢測到數(shù)據(jù)的變化，導致需要手動調用一些方法來觸發(fā)更新。

面試官：請說明給vue中的元素設置key值時可以使用math中的random方法嗎？

我：呃~，在vue中當使用v-for指令對一組元素進行循環(huán)渲染時，為了更高效地更新DOM，通常需要為每個被渲染的元素設置一個唯一的key值，這有助于vue準確地追蹤每個元素的變化，并且可以最小化DOM操作，提高性能。理論上是可以使用JS中的Math.random()方法生成隨機數(shù)作為key值的，但是不建議，為什么，請往下看：

1）不穩(wěn)定性：每次Math.random()被調用時，它都會生成一個新的隨機數(shù)，這意味著即使列表的內容沒有改變，每次渲染時每個元素的key都會不同。這將導致vue無法有效地復用和重新排序元素，因為每個元素都被視為新的元素。

2）性能問題：由于vue無法復用元素，它必須為每個元素執(zhí)行完整的創(chuàng)建和插入操作，這會增加渲染時間和內存消耗。

3）狀態(tài)丟失：如果列表項包含有狀態(tài)（例如輸入框的值、復選框的選中狀態(tài)等），由于vue無法追蹤元素的身份，這些狀態(tài)可能會在重新渲染時丟失。

建議使用列表項中某個唯一的、穩(wěn)定的屬性來作為 key，例如，如果你正在渲染一個用戶列表，并且每個用戶都有一個唯一的 id，那么你應該使用 id 作為 key。

面試官：請簡述Vue中相同邏輯如何進行抽離？

我：呃~，如果有相同的邏輯需要在多個地方使用，可以考慮將這部分邏輯進行抽離，以便在不同組件中重復利用。以下是一些常見的方法來實現(xiàn)邏輯的抽離：

1）mixin混入：mixin是一種vue提供的機制，允許你定義可復用的邏輯塊，然后在組件中引入這些Mixin。通過將共享的邏輯寫成Mixin，可以在多個組件中混入相同的功能。

2）Renderless組件：Renderless組件是一種不渲染任何DOM元素的組件，它專注于提供邏輯和數(shù)據(jù)，而不關心UI呈現(xiàn)。通過將邏輯抽離到Renderless組件中，其他組件可以通過插槽（slot）或props來復用這些邏輯。

3）工具類函數(shù)：將一些通用的邏輯封裝成工具類函數(shù)，然后在需要的地方引入并調用這些函數(shù)，這種方式適合一些簡單的邏輯或者非vue特定的邏輯。

4）自定義指令：如果某個邏輯需要在DOM操作方面實現(xiàn)復用，可以考慮將其封裝成自定義指令，自定義指令可以用于處理DOM操作、事件處理等邏輯，然后在需要的地方使用相同的指令。

通過以上方法，我們可以將相同的邏輯抽離出來，使代碼更易維護、復用，同時也有助于提高開發(fā)效率和代碼質量。

面試官：請說明一下vue中watch是怎么深度監(jiān)聽對象變化的？

我：呃~，在v3中，watch的使用方式主要是引入了watchEffect和watch兩個函數(shù)，如下：

watchEffect函數(shù)：接受一個函數(shù)作為參數(shù)，這個函數(shù)中可以包含任何響應式數(shù)據(jù)的讀取操作，vue會自動追蹤這些依賴，并在依賴變化時重新執(zhí)行這個函數(shù)。這使得watchEffect非常適合用于副作用的處理，例如在函數(shù)中進行異步操作、操作DOM等。示例：

import { watchEffect } from 'vue';watchEffect(() => {console.log(state.count);
});

watch函數(shù)：允許你監(jiān)視特定的響應式數(shù)據(jù)，并在其變化時執(zhí)行回調函數(shù)，與watchEffect不同，watch允許你對數(shù)據(jù)的變化進行更加精細的控制，可以設置選項來配置何時執(zhí)行回調以及是否進行深度監(jiān)聽等。示例：

import { watch } from 'vue';watch(() => state.count,(newVal, oldVal) => {console.log('count changed:', newVal, oldVal);}
);

????????總的來說，Vue 3中的watchEffect和watch函數(shù)提供了更加靈活和直觀的方式來監(jiān)視和處理響應式數(shù)據(jù)的變化，使得開發(fā)者能夠更加高效地編寫響應式代碼，有時候我們需要深度監(jiān)聽對象的變化，即使對象的引用沒有變化，但對象內部屬性的變化也能被監(jiān)聽到。為了實現(xiàn)這種深度監(jiān)聽，Vue提供了一個配置選項deep，你可以將其設置為true來開啟深度監(jiān)聽。

面試官：請你簡述一下vue中子組件為什么不可以修改父組件傳遞的props？

我：呃~，在vue中子組件不應該直接修改父組件傳遞的props，這是因為props在vue中被設計為單向數(shù)據(jù)流。這意味著props是從父組件傳遞給子組件的數(shù)據(jù)，子組件應當保持對props的只讀性，而不應該直接修改props所包含的數(shù)據(jù)。

????????這種單向數(shù)據(jù)流的設計有助于維護組件之間的數(shù)據(jù)獨立性和可預測性，如果子組件可以直接修改props，那么會導致數(shù)據(jù)的來源變得不確定，增加了組件間數(shù)據(jù)交流的復雜性，也會增加調試和維護的難度，當子組件需要修改props所包含的數(shù)據(jù)時，應當通過觸發(fā)事件來通知父組件進行相應的數(shù)據(jù)更改。父組件可以監(jiān)聽子組件觸發(fā)的事件，并根據(jù)需要更新props中的數(shù)據(jù)。

總之，遵循單向數(shù)據(jù)流的原則有助于提高Vue應用程序的可維護性和可預測性，使得數(shù)據(jù)流動更加清晰和易于理解。

面試官：請你簡述一下為什么vue采用異步渲染？

我：呃~，vue采用異步渲染的主要原因是為了提高性能和用戶體驗，當數(shù)據(jù)變化時，vue會觸發(fā)重新渲染組件，如果每次數(shù)據(jù)變化都立即進行重新渲染，可能會導致頻繁的更新操作，消耗大量的計算資源，從而影響應用程序的性能。為了解決這個問題，vue采用了異步渲染機制。

??????? 異步渲染意味著vue會將需要更新的組件標記起來，然后在下一個事件循環(huán)中才進行實際的重新渲染操作。這樣做的好處是可以將多個數(shù)據(jù)變化引起的多次重新渲染合并為一次，避免不必要的重復渲染，提高了性能并減少了性能開銷。采用異步渲染還可以使得用戶界面更加流暢和響應，因為在數(shù)據(jù)變化時不會立即阻塞主線程進行重渲染，而是等待主線程空閑時再進行更新，從而提高了用戶體驗。

面試官：請問說明是SSR，它主要解決什么問題？

我：呃~，SSR是Server-Side Rendering（服務器端渲染）的縮寫，它主要解決的問題是單頁面應用程序（SPA）在首次加載時可能面臨的性能和搜索引擎優(yōu)化（SEO）問題。

????????單頁面應用程序通常在客戶端加載后通過JS動態(tài)生成內容，這意味著在首次加載時可能需要大量的資源和時間來完成頁面渲染。此外，搜索引擎爬蟲在抓取網(wǎng)頁內容時通常不會執(zhí)行JS代碼，這意味著SPA在SEO方面可能存在困難，使用SSR可以解決這些問題，因為在服務器端渲染頁面時，頁面的初始HTML內容會在服務器上生成并發(fā)送到客戶端，這樣可以加快頁面的首次加載速度，并且使搜索引擎能夠更輕松地抓取和索引網(wǎng)頁內容。這對于提高用戶體驗和網(wǎng)站的可發(fā)現(xiàn)性都非常重要。