P13 vue高頻面試題

經(jīng)過閱讀這些高頻面試題目，我對Vue有了更深刻的理解。以下是我聽課的感悟：

《《1.vue解釋單向數(shù)據(jù)流和雙向數(shù)據(jù)綁定：》》

Vue是一種流行的JavaScript框架，支持單向數(shù)據(jù)流和雙向數(shù)據(jù)綁定。

1. 單向數(shù)據(jù)流（One-Way Data Flow）：在Vue中，單向數(shù)據(jù)流指的是數(shù)據(jù)從父組件流向子組件的過程。父組件通過props向子組件傳遞數(shù)據(jù)，子組件通過props接收并使用這些數(shù)據(jù)。這種單向數(shù)據(jù)流的好處是可以確保數(shù)據(jù)的來源清晰，易于追蹤和調(diào)試。當父組件的數(shù)據(jù)發(fā)生變化時，子組件會重新渲染以反映最新的數(shù)據(jù)。

2. 雙向數(shù)據(jù)綁定（Two-Way Data Binding）：雙向數(shù)據(jù)綁定是指數(shù)據(jù)的變化既可以從父組件傳遞給子組件，也可以從子組件傳遞給父組件。Vue使用v-model指令來實現(xiàn)雙向數(shù)據(jù)綁定。當輸入框中的值改變時，v-model會自動更新綁定的數(shù)據(jù)，反之亦然。這種機制可以方便地處理表單輸入和實時數(shù)據(jù)同步的場景。

單向數(shù)據(jù)流和雙向數(shù)據(jù)綁定都有各自的優(yōu)點和用途。單向數(shù)據(jù)流適用于復雜的組件關系和數(shù)據(jù)流動較為復雜的場景，有助于減少數(shù)據(jù)流動的混亂和復雜性。雙向數(shù)據(jù)綁定適用于需要實時同步數(shù)據(jù)的簡單表單場景，可以簡化代碼書寫和維護。在實際開發(fā)中，根據(jù)具體需求選擇適合的數(shù)據(jù)流動方式。

《《2.Vue中Object.defineProperty有什么缺點：》》

在Vue早期版本中，Object.defineProperty是用來實現(xiàn)數(shù)據(jù)劫持和雙向數(shù)據(jù)綁定的核心機制。然而，盡管它在Vue中被廣泛使用，但也存在一些缺點。

1. 需要深度遞歸：Vue通過遞歸地在對象上調(diào)用Object.defineProperty來實現(xiàn)對對象的監(jiān)聽和攔截。這個過程需要遍歷整個對象，對每個屬性進行劫持，當對象嵌套層級很深時，性能開銷較大。

2. 無法監(jiān)聽新增或刪除的屬性：使用Object.defineProperty只能監(jiān)聽已經(jīng)存在對象上的屬性，對于后續(xù)新增或刪除的屬性，無法自動進行監(jiān)聽。這意味著需要使用Vue提供的特殊方法（如Vue.set和Vue.delete）來手動觸發(fā)響應式更新，增加了開發(fā)的復雜性。

3. 需要對數(shù)組進行特殊處理：由于Object.defineProperty無法監(jiān)聽數(shù)組的改變，Vue對數(shù)組進行了特殊處理。在Vue中，對數(shù)組的變異方法（如push、pop、splice等）被重寫，使其能觸發(fā)響應式更新。然而，直接通過索引賦值或修改數(shù)組長度的操作仍然無法被監(jiān)聽。

4. 不支持Map和Set：Object.defineProperty只能應用于JavaScript對象上的屬性，而無法直接應用于ES6中的Map和Set等數(shù)據(jù)結(jié)構(gòu)。當需要對Map和Set進行響應式處理時，需要使用Vue提供的特殊API來進行包裝。

綜上所述，盡管Object.defineProperty在早期的Vue中被廣泛使用，但其存在性能問題、對新增和刪除屬性的限制、數(shù)組處理的復雜性以及對特殊數(shù)據(jù)結(jié)構(gòu)的不支持等缺點。為了解決這些問題，Vue在后續(xù)版本中轉(zhuǎn)向使用Proxy作為數(shù)據(jù)劫持的底層機制。Proxy具有更好的性能和更強大的功能，可以更方便地實現(xiàn)響應式數(shù)據(jù)綁定。

《《3.對MVC，MVP，MVVM的理解：》》

MVC（Model-View-Controller），MVP（Model-View-Presenter）和 MVVM（Model-View-ViewModel）是三種常見的軟件架構(gòu)模式，用于組織和管理應用程序的代碼和邏輯。它們具有不同的角色分工和交互方式。

1. MVC模式：MVC是一種經(jīng)典的軟件架構(gòu)模式，包括三個核心組件：

??- Model（模型）：負責處理數(shù)據(jù)和業(yè)務邏輯。

??- View（視圖）：負責展示數(shù)據(jù)給用戶，并接收用戶的輸入操作。

??- Controller（控制器）：負責接收用戶的輸入，處理用戶請求，并更新模型和視圖。

??在MVC中，視圖通過觀察模型來獲取數(shù)據(jù)并進行展示，視圖將用戶的輸入發(fā)送給控制器，控制器根據(jù)用戶輸入來操作模型數(shù)據(jù)。模型通過通知觀察者模式來通知視圖進行更新。

2. MVP模式：MVP是在MVC的基礎上進一步發(fā)展的一種模式，將控制器（Controller）拆分為兩個組件：

??- Model（模型）：負責處理數(shù)據(jù)和業(yè)務邏輯。

??- View（視圖）：負責展示數(shù)據(jù)給用戶，并接收用戶的輸入操作。

??- Presenter（展示者）：充當了控制器的角色，負責從視圖中抽離出業(yè)務邏輯，并處理視圖和模型之間的通信。

??在MVP中，視圖負責處理用戶的輸入事件并將其傳遞給Presenter，Presenter根據(jù)用戶的輸入更新模型數(shù)據(jù)，并將更新后的數(shù)據(jù)傳遞給視圖展示。

3. MVVM模式：MVVM是一種數(shù)據(jù)驅(qū)動的架構(gòu)模式：

??- Model（模型）：負責處理數(shù)據(jù)和業(yè)務邏輯。

??- View（視圖）：負責展示數(shù)據(jù)給用戶，并接收用戶的輸入操作。

??- ViewModel（視圖模型）：充當了連接Model和View的橋梁，負責將模型數(shù)據(jù)轉(zhuǎn)化為視圖所需的數(shù)據(jù)，并監(jiān)聽視圖的變化以更新模型數(shù)據(jù)。

??在MVVM中，視圖通過數(shù)據(jù)綁定將視圖和視圖模型關聯(lián)起來，視圖模型負責將模型數(shù)據(jù)響應式地同步到視圖上。當視圖發(fā)生變化時，視圖模型也會相應地更新模型數(shù)據(jù)。這樣的雙向數(shù)據(jù)綁定使得開發(fā)者可以更方便地管理和更新視圖和模型之間的數(shù)據(jù)。

每種模式都有其適用的場景和優(yōu)勢，選用哪種取決于具體的需求和開發(fā)背景。MVC適用于簡單的應用程序，MVP適用于需要更好的模塊化和可測試性的應用程序，MVVM適用于需要實現(xiàn)復雜的數(shù)據(jù)綁定和交互的應用程序。

《《4.生命周期：》》

在軟件開發(fā)中，生命周期是指一個對象或組件從創(chuàng)建到銷毀的整個過程中經(jīng)歷的一系列階段和事件。以下是常見的生命周期概念：

1. 組件生命周期：在前端開發(fā)中，組件是構(gòu)建用戶界面的基本單元。組件的生命周期包括以下幾個階段：

??- 創(chuàng)建階段：組件的實例化和初始化。

??- 更新階段：組件的屬性或狀態(tài)發(fā)生變化時，觸發(fā)重新渲染。

??- 銷毀階段：組件從界面中移除，釋放資源。

??在Vue中，常見的組件生命周期鉤子函數(shù)包括created、mounted、updated和destroyed等。

2. 應用程序生命周期：應用程序生命周期描述了整個應用程序從啟動到關閉的過程。它包括以下幾個階段：

??- 啟動階段：應用程序開始加載和初始化。

??- 運行階段：應用程序運行中，處理用戶的輸入和事件。

??- 關閉階段：應用程序被關閉，進行資源清理和保存工作。

??在不同的開發(fā)框架中，應用程序生命周期的具體實現(xiàn)可能會有所區(qū)別。

3. 生命周期鉤子函數(shù)：生命周期鉤子函數(shù)是在特定階段執(zhí)行的回調(diào)函數(shù)，用于在特定的生命周期階段執(zhí)行自定義的邏輯。在不同的框架或庫中，可以通過這些鉤子函數(shù)來擴展或修改默認行為。例如，在Vue中的created和mounted函數(shù)就是組件生命周期的鉤子函數(shù)。

通過理解和使用生命周期，開發(fā)者可以更好地控制和管理應用程序或組件的狀態(tài)和行為，進行必要的初始化、資源釋放、數(shù)據(jù)更新等操作，確保應用程序的正常運行和性能優(yōu)化。

《《5.Vue響應式數(shù)據(jù)原理嗎? Proxy 與 bjectdefineProperty 優(yōu)劣對比?》》

當你將一個普通的 JavaScript 對象傳入 Vue 實例作為數(shù)據(jù)對象時，Vue 將遍歷此對象的每個屬性，并使用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter。這些 getter/setter 對象實現(xiàn)了“消息攔截”，即當屬性被訪問或修改時，Vue 可以通知依賴項追蹤器（dependency tracker）進行相應的更新，實現(xiàn)了響應式數(shù)據(jù)。

現(xiàn)在來比較一下 Proxy 和 Object.defineProperty 的優(yōu)劣：

Proxy 的優(yōu)勢：

1. 更強大的攔截能力：Proxy 可以直接攔截對對象的操作，而不僅僅局限于屬性的訪問和修改，包括對象的創(chuàng)建、刪除、遍歷等操作。

2. 更簡潔的語法和 API：使用 Proxy 可以通過一組簡潔的語法和 API 實現(xiàn)對對象的攔截，相比較而言更易于理解和使用。

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

1. 兼容性更好：Object.defineProperty 是 ES5 的一部分，而 Proxy 是 ES6 引入的新特性，因此在一些舊瀏覽器或特定環(huán)境中可能不被支持。而 Object.defineProperty 可以在相對廣泛的 JavaScript 運行環(huán)境中使用。

2. 更好的性能：Proxy 相對于 Object.defineProperty 在性能上有一定的損耗，尤其是在大規(guī)模、頻繁訪問的場景下。Object.defineProperty 的實現(xiàn)更為簡單并且經(jīng)過多年優(yōu)化，因此在一些性能敏感的應用場景中可能更合適。

綜上所述，Proxy 相比 Object.defineProperty 具有更強大的攔截能力和更簡潔的語法，但在兼容性和性能方面可能存在一些問題。因此，在選擇使用哪種方式時，需要考慮到項目的需求和目標平臺，并權(quán)衡兩者之間的優(yōu)劣。

《《6.Composition API 的出現(xiàn)帶來哪些新的開發(fā)體驗，為啥需要這個? 》》

Composition API 是 Vue 3 中引入的一項新特性，它帶來了一些新的開發(fā)體驗和優(yōu)勢，使得 Vue 開發(fā)更加靈活和可維護。

以下是 Composition API 帶來的一些新的開發(fā)體驗：

1. 更靈活的組合邏輯：Composition API 允許開發(fā)者將邏輯按照功能而非選項分組，可以更容易地復用和組織代碼。通過將相關的邏輯集中在一起，可以提高代碼的可讀性和可維護性。

2. 基于函數(shù)的 API：Composition API 拋棄了 Options API 的對象形式，而是通過函數(shù)的方式來組織和定義組件的邏輯。這樣的寫法更為直觀和簡潔，能夠更好地進行代碼的組合和重用。

3. 更好的類型推導和編輯器支持：Composition API 基于函數(shù)和響應式的特性，使得類型系統(tǒng)能夠更好地推導出各個函數(shù)和變量的類型，提供了更好的編輯器支持和代碼提示。

4. 解決了一些 Options API 的問題：Options API 在處理復雜組件或邏輯時有時候會導致代碼冗余和難以維護的問題。Composition API 的出現(xiàn)解決了這些問題，提供了更好的組織和封裝方式，使得代碼更加清晰和可維護。

Composition API 的出現(xiàn)是為了解決 Vue 2 中 Options API 存在的一些缺點和限制，為開發(fā)者提供更好、更靈活的開發(fā)體驗。它使得組件的邏輯更容易組合和復用，提供了更好的類型推導和編輯器支持，同時解決了一些痛點，使得 Vue 的開發(fā)更加高效和便捷。

《《7.對比jQuery，Vue 有什么不同 》》

Vue 和 jQuery 是兩個具有不同定位和功能的前端工具，下面是它們之間的一些主要區(qū)別：

1. 架構(gòu)和設計思想：Vue 是一個現(xiàn)代化的漸進式JavaScript框架，采用了組件化的架構(gòu)和響應式數(shù)據(jù)綁定的思想，通過構(gòu)建大型應用程序來提供更好的代碼組織和可維護性。而 jQuery 是一個提供操作DOM和處理事件的JavaScript庫，主要關注在瀏覽器環(huán)境下的DOM操作和特效。

2. 文檔和學習曲線：Vue 提供了完善和易于理解的文檔，具備豐富的資源和社區(qū)支持，使得學習和使用起來相對較簡單。而 jQuery 的文檔相對簡單直接，上手較容易。

3. 數(shù)據(jù)綁定和響應式：Vue 提供了響應式數(shù)據(jù)綁定系統(tǒng)，可以自動追蹤數(shù)據(jù)的變化并實時更新DOM。這使得開發(fā)者能夠更容易地管理和響應數(shù)據(jù)的變化。而 jQuery 并沒有內(nèi)置的數(shù)據(jù)綁定機制，需要手動處理數(shù)據(jù)和DOM的同步。

4. 組件化和模塊化開發(fā)：Vue支持組件化開發(fā)，將界面抽象為一個個組件，使得代碼重用和模塊化更容易。而 jQuery 更多地關注單個DOM元素操作，沒有明確的組件化和模塊化開發(fā)的概念。

5. 生態(tài)系統(tǒng)和插件豐富性：Vue 生態(tài)系統(tǒng)非常豐富，擁有大量的官方和第三方插件，能夠滿足不同的需求，支持從構(gòu)建工具到路由、狀態(tài)管理以及UI庫等多個方面。而 jQuery 也有一些插件可供選擇，但相對于 Vue 生態(tài)系統(tǒng)相對較小。

總的來說，Vue 更適合構(gòu)建復雜的交互式應用程序，提供了現(xiàn)代化的架構(gòu)和開發(fā)思想；而 jQuery 更適合進行一些簡單的DOM操作和特效處理。根據(jù)項目需求和開發(fā)目標，選擇合適的工具能夠提高開發(fā)效率和維護性。

《《8.如何再Vue的單文件組件里的樣式定義全局CSS? 》》

在 Vue 單文件組件中，你可以通過以下幾種方式定義全局 CSS 樣式：

1. 在單文件組件的 `<style>` 標簽中使用 `@import` 導入全局 CSS 文件：

```vue

<style>

@import '~/assets/styles/global.css';

/* ... 組件的樣式定義 ... */

</style>

```

在這種方法中，你可以在全局 CSS 文件中定義全局樣式，然后通過 `@import` 將其導入到組件的樣式中。

2. 使用 Vue 的 `vue.config.js` 配置文件設置全局樣式：

在你的項目的根目錄下，創(chuàng)建一個名為 `vue.config.js` 的文件，然后在其中添加以下代碼：

```javascript

module.exports = {

?css: {

??loaderOptions: {

???sass: {

????additionalData: `@import '@/assets/styles/global.scss';`

???}

??}

?}

};

```

在上述代碼中，你需要將 `global.scss` 替換為你實際的全局樣式文件路徑。

3. 在 `public/index.html` 文件中直接引入全局 CSS 文件：

在 `public/index.html` 文件的 `<head>` 標簽中添加以下代碼：

```html

<link rel="stylesheet" href="/path/to/global.css">

```

在上述代碼中，你需要將 `/path/to/global.css` 替換為你實際的全局樣式文件路徑。

注意：以上方法中，使用 `~` 或 `@` 符號可以簡化路徑，如果你的項目配置了別名（alias），這些符號會映射到正確的路徑。

以上是幾種常見的在 Vue 單文件組件中定義全局 CSS 樣式的方法，你可以根據(jù)自己的項目需求和個人偏好選擇合適的方式。

《《9.說一下Sroot，sparent，$refs 》》

Sroot、sparent 和 $refs 是 Vue 中的一些特殊屬性和方法，用于在組件中訪問和操作其他組件或 DOM 元素。

1. Sroot：

Sroot 是一個指向根組件的屬性，可以在任何組件中通過 this.$root 來訪問。它提供了一種在子組件中訪問根組件的方式，可以用于在組件層次結(jié)構(gòu)中傳遞數(shù)據(jù)或調(diào)用根組件的方法。

2. sparent：

sparent 是一個指向父組件的屬性，可以在子組件中通過 this.$parent 來訪問。它提供了一種在子組件中訪問父組件的方式，使得組件之間可以進行通信和共享數(shù)據(jù)。

注意：使用 sroot 和 sparent 屬性來訪問其他組件，可能會導致組件之間的緊耦合，因此在設計和使用時需要謹慎考慮。

3. $refs：

$refs 是 Vue 實例的特殊屬性，在組件中可以通過 this.$refs 來訪問 DOM 元素或子組件的引用。它提供了一種直接訪問和操作 DOM 或子組件的方式。

例如，你可以在組件中給某個元素添加 ref 屬性，然后通過 this.$refs 來訪問該元素，或者給子組件添加 ref 屬性，在父組件中通過 this.$refs 來訪問子組件并調(diào)用其方法或訪問其數(shù)據(jù)。

需要注意的是，$refs 會在組件渲染完成之后被填充，因此在組件的 created 或 mounted 鉤子函數(shù)中訪問 $refs 才能保證正確的引用。

總結(jié)：Sroot、sparent 和 $refs 是 Vue 中用于在組件中訪問和操作其他組件或 DOM 元素的屬性和方法。它們提供了不同的訪問方式，使得組件之間可以實現(xiàn)通信、數(shù)據(jù)共享和操作 DOM 的功能。但需要記住，在使用這些屬性和方法時，需要權(quán)衡組件的耦合性和設計的合理性。

《《10.Vue 中怎么自定義指令 》》

在 Vue 中，你可以通過自定義指令來擴展和定制 DOM 元素的行為。自定義指令允許你在元素上綁定自定義的 JavaScript 行為，并可以在元素的生命周期中執(zhí)行相應的操作。

下面是自定義指令的基本步驟：

1. 創(chuàng)建自定義指令：

在 Vue 中，使用 `Vue.directive` 方法來創(chuàng)建自定義指令。你需要提供兩個參數(shù)，第一個參數(shù)是指令的名稱，第二個參數(shù)是一個對象，包含一些鉤子函數(shù)和選項。

```javascript

Vue.directive('my-directive', {

?// 鉤子函數(shù)和選項

});

```

2. 定義指令的鉤子函數(shù)：

在自定義指令的對象中可以定義一些鉤子函數(shù)來處理不同的生命周期事件：

- `bind`：只調(diào)用一次，當指令綁定到元素上時調(diào)用。

- `inserted`：在被綁定元素插入父節(jié)點時調(diào)用。

- `update`：在元素更新時調(diào)用，包括初始化。

- `componentUpdated`：在組件的 VNode 更新后調(diào)用。

- `unbind`：只調(diào)用一次，當指令從元素上解綁時調(diào)用。

```javascript

Vue.directive('my-directive', {

?bind(el, binding, vnode) {

??// 綁定時的處理邏輯

?},

?inserted(el, binding, vnode) {

??// 元素插入父節(jié)點時的邏輯

?},

?// 其他鉤子函數(shù)

});

```

3. 在模板中使用指令：

在模板中使用指令時，可以通過 `v-` 前綴來標識。

```html

<div v-my-directive></div>

```

4. 指令的參數(shù)和修飾符：

自定義指令也可以接受參數(shù)和修飾符，可以在指令綁定時使用 `bind` 鉤子函數(shù)的 `binding` 參數(shù)來獲取相關信息。

```javascript

Vue.directive('my-directive', {

?bind(el, binding) {

??console.log(binding.value); // 指令的參數(shù)值

??console.log(binding.modifiers); // 修飾符對象

?}

});

```

```html

<div v-my-directive:arg.modifier="value"></div>

```

以上是創(chuàng)建和使用自定義指令的基本步驟。通過定制指令的鉤子函數(shù)和選項，你可以在元素上實現(xiàn)自定義的交互行為和樣式效果。