SPA 單頁面的理解，和優(yōu)缺點(diǎn)：SPA僅在 Web 頁面初始化時加載相應(yīng)的 HTML、js 和 CSS。一旦頁面加載完成，SPA 不會因?yàn)橛脩舻牟僮鞫M(jìn)行頁面的重新加載或跳轉(zhuǎn)；取而代之的是利用路由機(jī)制實(shí)現(xiàn) HTML 內(nèi)容的變換。優(yōu)點(diǎn)：用戶體驗(yàn)好、快避免了不必要的跳轉(zhuǎn)和重復(fù)渲染；SPA 相對對服務(wù)器壓力??；前后端職責(zé)分離，架構(gòu)清晰。缺點(diǎn)：初次加載耗時多、前進(jìn)后退路由管理，所有的頁面切換需要自己建立堆棧管理、SEO 難度較大

v-show 與 v-if 有什么區(qū)別：v-if是真正的條件渲染，因?yàn)樗鼤_保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建；也是惰性的，條件第一次變?yōu)檎鏁r，才會開始渲染條件塊。v-show只是簡單地基于 CSS 的 “display” 屬性進(jìn)行切換。所以，v-if 適用于不需要頻繁切換條件；v-show 則適用于頻繁切換條件的場景。

:class 與 :style 區(qū)別：都可以通過對象語法和數(shù)組語法進(jìn)行動態(tài)綁定。:class?用于綁定一個或多個類，可以用來動態(tài)地切換元素的類。:style?用于綁定內(nèi)聯(lián)樣式，可以用來動態(tài)地更改元素的樣式。

怎樣理解 Vue 的單向數(shù)據(jù)流：指的是父組件通過屬性(props)向子組件傳遞數(shù)據(jù)，而子組件修改父組件需要使用事件(events)來通知父組件進(jìn)行狀態(tài)更新。好處有：易于追蹤數(shù)據(jù)流動、提高代碼的可維護(hù)性、易于調(diào)試和測試，對于定位和解決bug非常有幫助。

computed 和 watch 的區(qū)別和運(yùn)用的場景：computed：是計(jì)算屬性，有緩存，只有它依賴的屬性值發(fā)生改變，才會重新計(jì)算 。watch：更多的是「觀察」的作用，當(dāng)監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調(diào)進(jìn)行后續(xù)操作。運(yùn)用場景：計(jì)算數(shù)值，并且依賴其它數(shù)據(jù)時，應(yīng)該使用 computed。當(dāng)執(zhí)行異步或開銷較大的操作時使用 watch。

數(shù)組項(xiàng)賦值，Vue 能檢測到變化嗎：Vue 不能檢測到利用索引設(shè)置一個數(shù)組項(xiàng)和修改數(shù)組的長度，使用Vue.set的一個別名和使用數(shù)組方法來解決。

談?wù)勀銓?Vue 生命周期的理解：也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載 Dom -> 渲染、更新 -> 渲染、卸載等一系列過程。beforeCreate組件實(shí)例被創(chuàng)建屬性生效之前、created組件實(shí)例已經(jīng)完屬性生效dom還沒生成、beforeMount掛載前、mounted掛載后，el被新創(chuàng)建的 vm.$el 替換、beforeUpdate更新前、update更新后activited，keep-alive 專屬，組件被激活時調(diào)用。deadctivated，keep-alive 專屬，組件被銷毀時調(diào)、beforeDestory銷毀前、destoryed銷毀后

在哪個生命周期內(nèi)異步請求：?created、beforeMount、mounted 調(diào)用，data 已經(jīng)創(chuàng)建。推薦在 created 中調(diào)用，因?yàn)閮?yōu)點(diǎn)是：更快獲取到服務(wù)端數(shù)據(jù)，減少減少等待時間、ssr（瀏覽器環(huán)境）不支持 beforeMount 、mounted 。

Vue的SSR：服務(wù)器端渲染，服務(wù)器上將Vue組件渲染為HTML字符串，然后發(fā)送到客戶端，最后在客戶端“掛載”VM實(shí)例

在什么階段才能訪問操作DOM：?mounted 中，Vue 已經(jīng)將編譯好的模板掛載到頁面上，所以在 mounted 中可以訪問操作 DOM。

父組件可以監(jiān)聽到子組件的生命周期嗎：父組件通過@hook:mounted監(jiān)聽子組件的mounted內(nèi)的邏輯

組件中 data 為什么是一個函數(shù)：組件是復(fù)用的，查看源碼可以發(fā)現(xiàn)data函數(shù)是在vue函數(shù)內(nèi)，所以形成一個閉包。每個實(shí)例可以維護(hù)一份被返回對象的獨(dú)立的拷貝，組件實(shí)例之間的 data 屬性值不會互相影響

Vue 組件間通信有哪幾種方式：父傳子：props?來接受?父組件、通過?$parent 、$attrs?和?$listeners?來獲取父組件實(shí)例的屬性和方法。父傳子孫：

provide?和?inject?實(shí)現(xiàn)。子傳父：子組件 向父組件傳遞值：子組件通過?this.$emit('函數(shù)名'，傳遞參數(shù))綁定事件，父組件 通過?$refs?/?$children?來獲取子組件值。跨層級：綁定$emit?事件 , 然后再通過?$on?監(jiān)聽觸發(fā)的事件、還有vuex

什么是 MVVM以及它和mvc的區(qū)別：MVVM是一種前端架構(gòu)模式，用戶界面（View）與應(yīng)用程序邏輯（ViewModel）和數(shù)據(jù)模型（Model）分離，以提高代碼的可維護(hù)性和復(fù)用性。在MVVM中，ViewModel負(fù)責(zé)將數(shù)據(jù)從Model傳遞到View，同時也負(fù)責(zé)處理用戶交互，并將用戶操作反饋到Model。MVVM的核心思想是數(shù)據(jù)驅(qū)動視圖。ViewModel在這一模式中起到了關(guān)鍵作用，它使得View和Model之間的通信不再直接，而是通過ViewModel來進(jìn)行。MVC 最大的區(qū)別就是：它實(shí)現(xiàn)了 View 和 Model 的自動同步，也就是當(dāng) Model 的屬性改變時，我們不用再自己手動操作 Dom 元素，來改變 View 的顯示

Vue 是如何實(shí)現(xiàn)數(shù)據(jù)雙向綁定的：View 變化更新 Data ，可以通過事件監(jiān)聽的方式來實(shí)現(xiàn)，所以 Vue 的數(shù)據(jù)雙向綁定的工作主要是如何根據(jù) Data 變化更新 View。Observer(監(jiān)聽器)會遞歸遍歷數(shù)據(jù)對象，通過Object.defineProperty將每個對象屬性添加setter、getter方法，并且單獨(dú)給每個屬性創(chuàng)建一個dep(依賴收集器)實(shí)例。Compile（解析器） 遍歷 DOM，解析指令，如 v-model 和 v-bind為每個解析到的指令添加更新函數(shù)update創(chuàng)建對應(yīng)的 Watcher（觀察者），并添加到對應(yīng)屬性的 Dep 中。Observer監(jiān)聽到數(shù)據(jù)變化會通知對應(yīng)的dep對象，dep 根據(jù)通知找到對應(yīng)的一組 Watcher，并調(diào)用它們的 update 方法來更新視圖。

Vue 框架怎么實(shí)現(xiàn)對象和數(shù)組的監(jiān)聽：過以上 Vue 源碼部分查看，我們就能知道 Vue 框架是通過遍歷數(shù)組 和遞歸遍歷對象，從而達(dá)到利用 Object.defineProperty() 也能對對象和數(shù)組（部分方法的操作）進(jìn)行監(jiān)聽。Proxy 與 Object.defineProperty 優(yōu)劣對比：Proxy 可以直接監(jiān)聽對象、數(shù)組的變化；有多達(dá) 13 種攔截方法,不限于 apply、ownKeys、deleteProperty、has 等等；Proxy 返回的是一個新對象,我們可以只操作新的對象達(dá)到目的,而 Object.defineProperty 只能遍歷對象屬性修改；Object.defineProperty 的優(yōu)勢如下:兼容性好

虛擬 DOM 實(shí)現(xiàn)原理：用 JavaScript 對象模擬真實(shí) DOM 樹，對真實(shí) DOM 進(jìn)行抽象；diff 算法 — 比較兩棵虛擬 DOM 樹的差異；pach 算法 — 將兩個虛擬 DOM 對象的差異應(yīng)用到真正的 DOM 樹。

Vue 中的 key 有什么作用：在 Vue 中，key 是一個特殊的屬性，用于給每個節(jié)點(diǎn)（組件）設(shè)置唯一的標(biāo)識符。提高渲染效率 當(dāng) Vue 在進(jìn)行虛擬 DOM 的 diff 算法比較新舊節(jié)點(diǎn)時，如果節(jié)點(diǎn)具有相同的 key，則 Vue會認(rèn)為它們是相同的節(jié)點(diǎn)，不會進(jìn)行重新渲染，從而提高渲染效率。

Vue 修飾符有哪些：事件修飾符（.stop 阻止事件繼續(xù)傳播、.once 事件將只會觸發(fā)一次、.prevent 阻止標(biāo)簽?zāi)J(rèn)行為、.self 只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù)），v-model 的修飾符（.lazy 通過這個修飾符，轉(zhuǎn)變?yōu)樵?change 事件再同步、.trim 自動過濾用戶輸入的首尾空格），鍵盤事件的修飾符（.enter、.tab、.delete捕獲 “刪除” 和“退格”鍵)，系統(tǒng)修飾鍵（.ctrl、.alt、.shift），鼠標(biāo)按鈕修飾符（.left、right、middle）

vue怎么引入路由：在 Vue 中引入路由的最簡單方法是使用 Vue Router 庫。1. 安裝 Vue Router，2. 創(chuàng)建 Vue Router 實(shí)例，3?配置 Vuex Store，4.掛載 Vue Router。

vue-router 動態(tài)路由是什么 有什么問題：匹配到的所有路由，全都映射到同個組件。例如，我們有一個 User 組件，對于所有 ID 各不相同的用戶，都要使用這個組件來渲染。我們可以在 vue-router 的路由路徑中使用 “動態(tài)路徑參數(shù)”。問題: vue-router 組件復(fù)用導(dǎo)致路由參數(shù)失效怎么辦？1.通過 watch 監(jiān)聽路由參數(shù)再發(fā)請求，2. 用 :key 來阻止 復(fù)用

談一下對 vuex 的個人理解：Vuex 是 Vue開發(fā)的狀態(tài)管理模式，它為應(yīng)用內(nèi)的所有組件提供集中式的狀態(tài)（數(shù)據(jù)）管理。簡單來說，當(dāng)多個組件共享狀態(tài)時使用vuex。核心概念包括：（State：存放公共數(shù)據(jù)的地方，getter：根據(jù)業(yè)務(wù)場景處理返回的數(shù)據(jù)，mutations：唯一修改state的方法，修改過程是同步的，action：異步處理，通過分發(fā)操作觸發(fā)mutations，module：將store模塊分割，減少代碼臃腫）

頁面刷新vuex的state數(shù)據(jù)丟失怎么解決：放在localStore或者sessionStore或者借用輔助插件，推薦使用 vuex-persist 插件

Vuex 為什么要分模塊并且加命名空間：由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會集中到一個比較大的對象。當(dāng)應(yīng)用變得非常復(fù)雜時，store 對象就有可能變得相當(dāng)臃腫。為了讓模塊具有更高的封裝度和復(fù)用性，可以通過添加 namespaced: true 的方式使其成為帶命名空間的模塊。當(dāng)模塊被注冊后，它的所有 getter、action 及 mutation 都會自動根據(jù)模塊注冊的路徑調(diào)整命名。

使用過 Vue SSR 嗎？說說 SSR：SSR 也就是服務(wù)端渲染，也就是將 Vue 在客戶端把標(biāo)簽渲染成 HTML 的工作放在服務(wù)端完成，然后再把 html 直接返回給客戶端。優(yōu)點(diǎn)：SSR 有著更好的 SEO、并且首屏加載速度更快。缺點(diǎn)：?開發(fā)條件會受到限制，服務(wù)器端渲染只支持 beforeCreate 和 created 兩個鉤子。

vue 中使用了哪些設(shè)計(jì)模式：1. 工廠模式 - 傳入?yún)?shù)即可創(chuàng)建實(shí)例，虛擬 DOM 根據(jù)參數(shù)的不同返回基礎(chǔ)標(biāo)簽的 Vnode 和組件 Vnode。2. 單例模式 - 整個程序有且僅有一個實(shí)例，vuex 和 vue-router 的插件注冊方法 install 判斷如果系統(tǒng)存在實(shí)例就直接返回掉。3. 發(fā)布 - 訂閱模式 (vue 事件機(jī)制)。4. 觀察者模式 (響應(yīng)式數(shù)據(jù)原理)。5. 裝飾模式: (@裝飾器的用法)。6. 策略模式 策略模式指對象有某個行為, 但是在不同的場景中, 該行為有不同的實(shí)現(xiàn)方案 - 比如選項(xiàng)的合并策略

你都做過哪些 Vue 的性能優(yōu)化：1.對象層級不要過深，否則性能就會差、2.不需要響應(yīng)式的數(shù)據(jù)不要放到 data 中、3.v-if 和 v-show 區(qū)分使用場景、4.computed 和 watch 區(qū)分使用場景、5.v-for 遍歷必須加 key，key 最好是 id 值，且避免同時使用 v-if、6.防止內(nèi)部泄漏，組件銷毀后把全局變量和事件銷毀、7.圖片懶加載、8.路由懶加載、9.第三方插件的按需引入、10.適當(dāng)采用 keep-alive 緩存組件、11.防抖、12.節(jié)流運(yùn)用、13.服務(wù)端渲染 SSR or 預(yù)渲染

Vue.mixin 的使用場景和原理：相同或者相似的代碼，這些代碼的功能相對獨(dú)立，可以通過 Vue 的 mixin 功能抽離公共的業(yè)務(wù)邏輯，原理類似 “對象的繼承”，當(dāng)組件初始化時會調(diào)用 mergeOptions 方法進(jìn)行合并，采用策略模式針對不同的屬性進(jìn)行合并。當(dāng)組件和混入對象含有同名選項(xiàng)時，這些選項(xiàng)將以恰當(dāng)?shù)姆绞竭M(jìn)行 “合并”。

nextTick 使用場景和原理：nextTick 中的回調(diào)是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行的延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM。主要思路就是采用微任務(wù)優(yōu)先的方式調(diào)用異步方法去執(zhí)行 nextTick 包裝的方法

?keep-alive 使用場景和原理：keep-alive 是 Vue 內(nèi)置的一個組件，可以實(shí)現(xiàn)組件緩存，當(dāng)組件切換時不會對當(dāng)前組件進(jìn)行卸載。常用的兩個屬性 include/exclude，允許組件有條件的進(jìn)行緩存。兩個生命周期activated/deactivated，用來得知當(dāng)前組件是否處于活躍狀態(tài)。

Vue.set 或者說是 $set 原理如下：它調(diào)用 Vue.util.defineReactive 方法將新的屬性添加到響應(yīng)式對象中。該方法將屬性標(biāo)記為可觀測的，并設(shè)置 getter 和 setter 函數(shù)來觸發(fā)依賴追蹤。

Vue.extend 作用和原理：主要作用是擴(kuò)展 Vue 構(gòu)造器，創(chuàng)建出一個“子類”。這個“子類”可以包含組件選項(xiàng)對象（如 data、methods 等周期鉤子）。原理是基于?js 的原型繼承。它創(chuàng)建了一個新的 Vue 子類，這個子類繼承了 Vue 的所有屬性和方法。

自定義指令以及原理是什么：可以使用?Vue.directive?函數(shù)來注冊一個指令。該函數(shù)接受兩個參數(shù)，第一個參數(shù)是指令的名稱，第二個參數(shù)是一個對象，用來定義指令的行為，應(yīng)為有五個生命周期可用，分別是 bind、inserted、update、componentUpdated、unbind

Vue 模板編譯原理：第一步是將 模板字符串 轉(zhuǎn)換成 element ASTs（解析器）第二步是對 AST 進(jìn)行靜態(tài)節(jié)點(diǎn)標(biāo)記，主要用來做虛擬DOM的渲染優(yōu)化（優(yōu)化器）第三步是 使用 element ASTs 生成 render 函數(shù)代碼字符串（代碼生成器）

函數(shù)式組件使用場景和原理：主要適用于簡單的展示組件、高階組件和v-for循環(huán)中的子組件。?它們的特點(diǎn)是無狀態(tài)和無實(shí)例，所有屬性和邏輯都通過外部傳遞的props和context來處理。這種組件非常適合用于性能優(yōu)化，因?yàn)樗鼈儾恍枰S護(hù)內(nèi)部狀態(tài)或創(chuàng)建類實(shí)例，從而減少了內(nèi)存消耗和渲染時間。

?vue-router 中常用的路由模式實(shí)現(xiàn)原理嗎：hash 模式和history模式。hash 的值實(shí)際就是 URL 中 #后面的東西 它的特點(diǎn)在于：hash 雖然出現(xiàn) URL 中，但不會被包含在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面?？梢詾?hash 的改變添加監(jiān)聽事件。history 模式利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。這兩個方法應(yīng)用于瀏覽器的歷史記錄站，在當(dāng)前已有的 back、forward、go 的基礎(chǔ)之上，它們提供了對歷史記錄進(jìn)行修改的功能。這兩個方法有個共同的特點(diǎn)不刷新頁面。

?diff 算法原理：Diff 算法是用于同級比較兩個虛擬 DOM 樹的差異，并以最小的操作代價將舊的 DOM 樹更新為新的 DOM 樹的一種算法。常見的策略有雙指針比較：從新舊子節(jié)點(diǎn)列表的頭部和尾部同時開始比較。key 值比較：如果子節(jié)點(diǎn)設(shè)置了 key 屬性，通過 key 來快速找到對應(yīng)的節(jié)點(diǎn)進(jìn)行比較和更新。