技術標籤：前端面試vuevue

1、說說你對 SPA 單⻚⾯的理解，它的優缺點分別是什麼？

SPA（ single-page application ）僅在 Web⻚⾯初始化時載入相應的 HTML、JavaScript 和 CSS。⼀旦⻚⾯載入完成，SPA 不會因為⽤戶的操作⽽進⾏⻚⾯的重新載入或跳轉；取⽽代之的是利⽤路由機制實現HTML 內容的變換，UI 與⽤戶的互動，避免⻚⾯的重新載入。
優點：
⽤戶體驗好、快，內容的改變不需要重新載入整個⻚⾯，避免了不必要的跳轉和重複渲染；
基於上⾯⼀點，SPA 相對對伺服器壓⼒⼩；
前後端職責分離，架構清晰，前端進⾏互動邏輯，後端負責資料處理；

缺點：
初次載入耗時多：為實現單⻚ Web 應⽤功能及顯示效果，需要在載入⻚⾯的時候將 JavaScript、CSS 統⼀載入，部分⻚⾯按需載入；
前進後退路由管理：由於單⻚應⽤在⼀個⻚⾯中顯示所有的內容，所以不能使⽤瀏覽器的前進後退功能，所有的⻚⾯切換需要⾃⼰建⽴堆疊管理；
SEO 難度較⼤：由於所有的內容都在⼀個⻚⾯中動態替換顯示，所以在SEO 上其有著天然的弱勢。

2、v-show 與 v-if 有什麼區別？

v-if 是真正的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和⼦元件適當地被銷燬和重建；也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第⼀次變為真時，才會開始渲染條件塊。

v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 的 “display” 屬性進⾏切換。
所以，v-if 適⽤於在運⾏時很少改變條件，不需要頻繁切換條件的場景；v-show則適⽤於需要⾮常頻繁切換條件的場景。

3、Class 與 Style 如何動態繫結？

Class 可以通過物件語法和陣列語法進⾏動態繫結：
物件語法：

<div v-bind:class="{ active: isActive, 'text-danger':
hasError }"></div>
data: {
 isActive: true,
 hasError: false
 

}

陣列語法：

<div v-bind:class="[isActive ? activeClass : '',
errorClass]"></div>
data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}

Style 也可以通過物件語法和陣列語法進⾏動態繫結：

物件語法：

<div v-bind:style="{ color: activeColor, fontSize: fontSize
+ 'px' }"></div>
data: {
 activeColor: 'red',
 fontSize: 30
}

陣列語法：

<div v-bind:style="[styleColor, styleSize]"></div>
data: {
 styleColor: {
 color: 'red'
 },
 styleSize:{
 fontSize:'23px'
 }
}

4、怎樣理解 Vue 的單向資料流？

所有的 prop 都使得其⽗⼦ prop 之間形成了⼀個單向下⾏繫結：⽗級 prop 的更新會向下流動到⼦元件中，但是反過來則不⾏。這樣會防⽌從⼦元件意外改變⽗級元件的狀態，從⽽導致你的應⽤的資料流向難以理解。
額外的，每次⽗級元件發⽣更新時，⼦元件中所有的 prop 都將會重新整理為最新的值。這意味著你不應該在⼀個⼦元件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制檯中發出警告。⼦元件想修改時，只能通過 $emit 派發⼀個⾃定義事件，⽗元件接收到後，由⽗元件修改。

有兩種常⻅的試圖改變⼀個 prop 的情形 :

這個 prop ⽤來傳遞⼀個初始值；這個⼦元件接下來希望將其作為⼀個本地的 prop 資料來使⽤。 在這種情況下，最好定義⼀個本地的 data 屬性並
將這個 prop ⽤作其初始值：
props: [‘initialCounter’],
data: function () {
return {
counter: this.initialCounter
}
}
這個 prop 以⼀種原始的值傳⼊且需要進⾏轉換。 在這種情況下，最好使⽤這個 prop 的值來定義⼀個計算屬性
props: [‘size’],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}