THINK-1

THINK篇主要述說在寫Vue時的基本觀念

而大部分的資料都可以從官網獲得：

0.鉤子：

  • 具有既定生命週期的框架，在生命週期各個階段留給用戶執行的一些特定操作函數。

1.為何使用V-for 時，必須加上Key值？

參考資料：CSDN-「Vue v-for 中的key」

<div v-for="item in items" :key="item.id">

Ans： 為了給Vue一個提示，方便它能追蹤每個節點的身份。並且理想的Key是唯一的值。 並且為了避免錯誤的渲染。

2.Vue 傳遞資料的方式

參考資料：VueJS-元件-Component-之間資料傳遞的方式

Ans：

  • Data

  • 父給子：Props / 子給父：$emit

    • vue 組件的基礎。

  • ref & $parent / $children

    • ref：如果用於DOM上，就是指向 DOM。如果用於子組件，就是指向組件實例。

    • $parent / $children：訪問父/子實例

  • EventBus（$emit / $on）：適用於父子、隔代、兄弟組件通信

    • 此種方法，透過一個 Vue 實例作為中央事件總線（事件中心），用它來觸發事件和監聽事件，從而實現任何組件間的通信，包括父子、隔代、兄弟組建。

  • $attrs / $listeners：用於隔代組件通信

    • $attrs：包含了父作用域不被prop所識別的特性綁定。當一個組建沒有聲明任何 prop 時，這裡會包含所有父作用域的綁定（class & style 除外），並且可以通過 v-bind="$attrs"傳入內部組件。通常配合inheritAttrs。

    • $listeners：包含父作用域中的 v-on 事件監聽器。可以通過 v-on="$listeners" 傳入內部組件。

  • provide / inject：適用於隔代組件通信

    • 祖先組件通過 provider 來提供變量，然後在子組件中通過 inject 來注入變量。有點主動提供與依賴注入的關係。

  • Vuex：適用於父子、隔代、兄弟組件通信。

    • Vuex 為狀態管理模式。

    • 每一個 Vuex應用的核心是 store。”store“ 基本上是一個容器 包含著我們大部分使用的狀態（state）

    • 當Vue 組件從 store 中讀取狀態時，若 store 狀態發生改變，相應的組件也會相應地得到更新。

    • 改變 store 的唯一途徑 就是 提交（commit）mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化。

    • 動作過程：commit mutation -> store 狀態改變 -> 組件更新。

3.Vue 生命週期

參考資料：Vue生命週期函數

Ans：

  • BeforeCreate：宣告一個空的Vue 物件

    • 組件實例被創建，屬性生效之前

  • Created：這個 Vue 的物件初始化好了，內容的Data ＆ Methods 也好了。

    • 組件實例已經完全創建，屬性也綁定，但真實DOM 還沒有生成，$el 不可使用

  • BeforeMount：把Vue這個初始好的物件，綁到DOM上（存在於記憶體中）

    • 掛載之前被調用，相關的 render 函數首次被使用

  • Mounted：將DOM渲染至畫面（白話：把DOM放到你的瀏覽器上）

    • 掛載到實例上調用該 hook

  • BeforeUpdate：更新事件

    • 資料更新前使用，發生在虛擬的DOM 中

  • Updated：更新事件完畢

  • BeforeDestroy：刪除之前（可以控制）

  • Destroyed：刪除之後（無法控制）

4.V-Model 原理

參考資料：IT邦幫忙-Andy Tsai

Ans：

v-model：v-bind + @input

5.V-show & V-if 的差別

參考資料：Gua's Note

Ans：

V-if：當條件為True時，會把內容的DOM渲染出來，如果條件為 false，則會把DOM移掉（消失）。並且直到條件變為真，才會開始渲染條件區塊。

v-show：一開始就把DOM渲染出來，當條件切換時，只做Display：none的切換。（不管條件為何，元素總是會被渲染，只是針對CSS 的Display做切換。）

6.Computed / Watch / Methods 的差異

參考資料：WJM1818 on OSCHINA 、IT邦幫忙-Hunterliu

SAME：

  1. Watch & Computed：當相依數據發生變化時，所以依賴這個數據的相關數據，會自動變化，也就是自動調用相關的函數去實現數據變動。

  2. 都是以函數為基礎

DIFFERENT：

  • Computed：

    • 資料動，我則變動

    • 利用Computed的緩存特性，避免每次獲取資料時，都要重新計算。

  • Watch：

    • 觀察作用，監聽回調、監控數值

    • 執行非同步、開銷較大的操作時，使用Watch，允許我們執行非同步操作（訪問API），並且可以讓我們在得到最終結果前，設置中間狀態。

  • Methods：

    • 需要手動控制，就是資料變了，他不會自動去改

    • 資料動，觸發了，才變動。

7.Computed / Filter 的差異

參考資料：小狐狸事務所

Computed：將原始數據，做過篩選顯示。

Filter：可直接於樣板標籤中呼叫並串接，用來把欲輸出之變數再處理。

順序上，應該為Computed ->Filter（先篩選出資料，再對資料做後處理）

8.Directive 設計使用

資料來源：Vue.js 自定義指令

Main：為了讓DOM的功能做一個拓展

9.nextTick的使用

資料來源：知乎-Vue.js$nextTick的一個問題

簡而言之：你現在更新一個東西，但這個更新不會立即執行，必須要等DOM更新後才會執行。

概念：有點像同步與非同步的概念。

流程：

Step1. 同步指令執行完。

Step2. DOM 更新。

Step3. nextTick 這時才更新。

10.對SPA頁面的理解，優缺點分別為何？

優點：

  • 用戶體驗好、快，內容不需要重新整理，避免了不必要的跳轉和重複渲染

  • 對Server的壓力較小

  • 前後端職責分離，前端進行邏輯，後端負責數據。

  • 利用路由機制來實現HTML每頁的跳轉。

缺點：

  • 初次加載耗時多：因為為了實現單頁Web 應用功能及顯示效果、，需要在加載頁面時將JS、CSS統一加載。

  • 前進後退路由管理：所有頁面切換需要自己堆疊管理

  • SEO難度較大：所有內容都在同一個頁面上動態替換顯示，所以在SEO上有著天然的弱勢。

PreviousVueNextTHINK-2

Last updated