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-if是真正的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建；也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊

v-show：

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'
  }