目錄

1.css的定位有哪些？

2.promise

3.v-bind="$attrs"是什麼意思

4.二次封裝穿梭框組件，支持異步加載數據、拖拽排序怎麼建立的

實現異步加載數據

通過當穿梭框需要處理大量數據時，異步加載能夠有效提升性能。

實現拖拽排序

組件封裝技巧

⚠️ 注意事項

總結

5.在elemnt當中，使用v-model綁定他的內容，然後再封裝一次，也使用v-model的方式把數據綁定，那他裏面的屬性比如prefix、suffix 這些前綴和後綴，我仍然要使用他原生的一些屬性 怎麼實現？

總結

6.localStorage、sessionStorage、cookie有什麼區別

7.router的路由模式有哪幾種？

8.vuex的核心屬性有那5種？

9.Xhr、Fetch、Axios有什麼區別？

10.Symbol

1.css的定位有哪些？

（1）靜態定位（static）：

  • 這是元素的默認定位方式。
  • 元素按照正常的文檔流進行排列，忽略top、bottom、left、right和z-index屬性。

（2）相對定位（relative）：

  • 元素先放置在未添加定位時的位置，再通過top、bottom、left、right屬性使其相對於原本的位置進行移動。
  • 移動後，它原本所佔的空間不會改變，因此不會影響其他元素的位置。

（3）絕對定位（absolute）：

  • 元素脱離正常文檔流，不佔據空間。
  • 相對於最近的非static定位的祖先元素進行定位（如果沒有，則相對於初始包含塊，通常是html元素）。
  • 其位置由top、bottom、left、right屬性確定。

（4）固定定位（fixed）：

  • 元素脱離正常文檔流，不佔據空間。
  • 相對於瀏覽器窗口進行定位，即使頁面滾動，它也會停留在固定的位置。
  • 常用於導航欄、懸浮按鈕等。

（5）粘性定位（sticky）：

  • 許可看作是相對定位和固定定位的混合。
  • 元素在跨越特定閾值前為相對定位，之後為固定定位。
  • 例如，可以設置一個元素在滾動到距離頂部10px時固定在那裏。
2.promise

Promise 是 JavaScript 中用於處理異步操作的對象，它代表一個異步操作的最終完成（或失敗）及其結果值。Promise 有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。一旦狀態改變，就不會再變。

（1）Promise 的基本用法：

Promise 構造函數接受一個函數作為參數，該函數的兩個參數分別是 resolve 和 reject，它們是兩個函數。

  • resolve 函數將 Promise 狀態從 pending 變為 fulfilled，並將異步操作的結果作為參數傳遞出去。
  • reject 函數將 Promise 狀態從 pending 變為 rejected，並將異步操作報出的錯誤作為參數傳遞出去。

（2）Promise 的實例方法：

  • then(): 用於指定 fulfilled 狀態和 rejected 狀態的回調函數。它接受兩個參數，第一個是 fulfilled 狀態的回調，第二個是 rejected 狀態的回調（可選）。then 方法返回一個新的 Promise 實例，因此可以採用鏈式寫法。
  • catch(): 用於指定發生錯誤時的回調函數，相當於 then 的第二個參數，但 catch 可以捕獲前面 then 方法執行中的錯誤。
  • finally(): 用於指定不管 Promise 對象最後狀態如何都會執行的操作。

（3）Promise 的靜態方法：

  • Promise.resolve(): 將現有對象轉為 Promise 對象，並且狀態為 fulfilled。
  • Promise.reject(): 返回一個狀態為 rejected 的 Promise 對象。
  • Promise.all(): 用於將多個 Promise 實例包裝成一個新的 Promise 實例。當所有 Promise 都成功時，返回的結果數組與傳入的順序一致；如果有一個失敗，則立即返回失敗的結果。
  • Promise.race(): 同樣將多個 Promise 實例包裝成一個新的 Promise 實例，但是隻要有一個實例率先改變狀態，新的 Promise 實例的狀態就跟着改變。
  • Promise.allSettled(): 等待所有 Promise 實例都完成（不管成功還是失敗），返回一個對象數組，每個對象表示對應的 Promise 結果。
  • Promise.any(): 接收多個 Promise 實例，只要有一個變成 fulfilled 狀態，就返回該 Promise 的值；如果所有都變成 rejected，則返回一個 AggregateError。

（4）錯誤處理：在 then 中寫第二個參數。就是Promise 中的錯誤具有“冒泡”性質，直到被捕獲為止。建議使用 catch 來捕獲錯誤，而不

（5）與回調函數相比的優點：

  • 避免回調地獄，代碼更清晰。
  • 提供統一的錯誤處理機制。

（6）Promise 的侷限性：

  • 一旦創建無法取消。
  • 要是不設置回調函數，Promise 內部拋出的錯誤不會反應到外部。
  • 當處於 pending 狀態時，無法得知當前進展到哪一個階段。
3.v-bind="$attrs"是什麼意思

$attrs 是什麼？

  • $attrs 是Vue實例的一個屬性，包含父組件傳遞給子組件但沒有在子組件props中聲明的所有屬性
  • 包括：HTML特性、自定義屬性、事件監聽器等
  • 不包括：在props中聲明的屬性、class、style

v-bind="$attrs" 的作用

將$attrs對象中的所有屬性一次性綁定到當前元素上

常用於創建包裝組件，實現屬性的透傳

通常配合inheritAttrs: false使用，避免重複的屬性綁定

4.二次封裝穿梭框組件，幫助異步加載數據、拖拽排序怎麼實現的
實現異步加載數據
通過當穿梭框得處理大量資料時，異步加載能夠有效提升性能。
  • 懶加載與分頁展示：
  • 思路是初始只加載部分資料（如20條），通過監聽列表滾動，滾動到底部時加載下一頁內容 。
  • 在 data 中定義 pageSize（每頁條數）、curIndex（當前頁碼）和 showData（當前展示的數據） 。
  • 使用 v-infinite-scroll 指令（Element-UI 已提供）綁定滾動到底部的加載方法 。
  • 向上滾動翻頁需自行監聽 scroll 事件，判斷滾動條到達頂部且當前不是第一頁時，加載上一頁數據 。翻頁時注意重置滾動條位置。
  • 數據拼接與展示：
  • 初始展示數據通過截取總數據的前 pageSize 條實現 。
  • 後續加載通過數組的 slice 和 concat 方法拼接新數據 。務必注意，直接展示 showData 而非全部數據 filteredData 。
建立拖拽排序

為穿梭框右側已選項列表增加拖拽排序功能，Sortable.js 是一個不錯的選擇。

  • 使用 Sortable.js：
  • 安裝 Sortable.js：npm install sortablejs 。
  • 建議封裝一個自定義指令（如 v-draggable-transfer），在其 mounted 鈎子中，使用 Sortable.create 初始化拖拽。通常只需對右側列表（可通過類名 .el-transfer-panel__list 選取，注意一般是第二個此類元素）啓用拖拽 。
  • 配置 Sortable 選項，如 handle（指定拖拽觸發元素，如一個拖拽圖標），draggable（指定可拖拽項），animation（拖拽動畫）等 。
  • 在 Sortable 的 onEnd 回調中，通過 event.oldIndex 和 event.newIndex 獲取拖拽前後元素位置，並調用綁定的回調函數更新數據順序 。指令卸載時銷燬 Sortable 實例 。
  • 數據更新與視圖同步：
  • 在拖拽結束的回調函數中，交換 v-model 綁定數組（即右側已選值數組）中對應 oldIndex 和 newIndex 的元素 。
  • Vue 是材料驅動的，數據更新後視圖會自動同步。
  • 排序與回顯處理：
  • Element-UI 穿梭框的 target-order 屬性會影響右側列表排序。其默認值 original 會使右側列表順序與數據源保持一致 。若希望按選擇順序或拖拽後順序顯示，可設置 target-order 為 push 或 unshift 。
  • 對於編輯回顯，若數據源順序與期望的右側展示順序不一致，可能需在回顯時手動對數據源進行排序，使其與已選值數組順序匹配 。
組件封裝技巧

優雅地二次封裝第三方組件很重要。

  • 屬性與事件透傳：
  • 使用 v-bind="$attrs" 可以將父組件傳入而子組件未在 props 中聲明的屬性綁定到內部組件 。使用 v-on="$listeners" 可以透傳所有事件監聽器 。
  • 在組件選項中設置 inheritAttrs: false，可以避免未聲明的屬性被自動添加到組件的根元素上 。
  • 這樣封裝後的組件能保持與原始 Element-UI 穿梭框相似的屬性和事件運用體驗。
  • 插槽（Slot）處理：
  • 若原組件使用了插槽，需要在封裝組件中通過 <slot> 標籤進行暴露或自定義默認內容 。
  • 例如，穿梭框協助通過插槽自定義每項顯示內容，封裝時需在模板中保留對應插槽。
⚠️ 注意事項
  • 性能優化：異步加載主要解決大數據量渲染的卡頓問題 。需合理設置每頁加載數量。
  • 拖拽目標與反饋：明確拖拽區域和觸發元素，提供清晰的拖拽視覺反饋 。
  • 數據一致性：確保拖拽排序後，組件綁定的數據與視圖展示保持一致。注意 target-order 屬性對排序行為的影響 。
總結

通過在面試中回答這個問題時，能夠概括説明：二次封裝Element-UI穿梭框，主要是通過懶加載和分頁展示優化大量數據的性能，利用Sortable.js 實現拖拽排序以增強交互，並運用$attrs 和 $listeners達成屬性和事件的透傳，保持組件的靈活性和易用性。清晰説明這些核心技術和思路，通常能給面試官留下良好印象。

5.在elemnt當中，使用v-model綁定他的數據，繼而再封裝一次，也使用v-model的方式把數據綁定，那他裏面的屬性比如prefix、suffix 這些前綴和後綴，我仍然要使用他原生的一些屬性 怎麼達成？

配置要點

作用和説明

示例或注意事項

✅ 屬性透傳

使父組件傳遞的、未在子組件props中聲明的原生屬性（如prefix, suffix）傳遞到內部組件

使用 v-bind="$attrs"

✅ 事件監聽器透傳

使父組件傳遞的、未在子組件emits中聲明的事件監聽器傳遞到內部組件

使用 v-on="$listeners" (Vue 2) 或 v-on="proxyEvents" (Vue 3)

✅ v-model 處理

確保自定義組件的 v-model 與 Element 組件的 v-model 正確銜接

使用 modelValue 和 update:modelValue

✅ 禁用根元素繼承

防止未聲明的屬性自動添加到封裝組件的根元素上

設置 inheritAttrs: false
總結

通過 v-bind="$attrs"、v-on="proxyEvents"（Vue 3） 或 v-on="$listeners"（Vue 2）以及正確處理v-model通過，你能夠在二次封裝 Element 組件時，輕鬆保留所有原生屬性和事件。這樣既保持了組件的易用性，又確保了功能的完整性。

6.localStorage、sessionStorage、cookie有什麼區別

特性

localStorage

sessionStorage

cookie

生命週期

永久，除非手動刪除

會話級別，頁面關閉則清除

可設置過期時間，未設置則為會話級別

存儲大小

5MB

5MB

4KB

與服務器通信

不自動發送

不自動發送

每次請求都會攜帶在HTTP頭中

API易用性

簡單

簡單

要求自己封裝

作用域

同源窗口共享

當前標籤頁有效

可設置域名和路徑

安全性

不安全

不安全

可設置HttpOnly和Secure提高安全性

7.router的路由模式有哪幾種？

（1）hash模式：

  • 使用URL的hash（#）來模擬一個完整的URL，當URL改變時，頁面不會重新加載。
  • 原理：通過監聽hashchange事件來響應路由的變化。
  • 特點：hash模式下的URL會帶有#，有些用户可能覺得不美觀。但是，它兼容性好，支持所有瀏覽器。

（2）history模式：

  • 利用HTML5 History API（pushState、replaceState、popState）來構建無刷新跳轉。
  • 原理：通過pushState和replaceState改變URL，且不會發送請求，然後通過popState事件來監聽URL變化。
  • 特點：URL沒有#，看起來更美觀。但是，需要後台配置支持，因為當用户直接訪問一個路由時，如果後台沒有配置該路由的對應頁面，會返回404。

特性

Hash 模式

History 模式

Abstract 模式

URL 形式

http://site.com/#/home

http://site.com/home

無 URL（內存路由）

是否需要服務器部署

否

是

否

SEO 友好性

較差

較好

無

兼容性

所有瀏覽器

HTML5 History API

所有環境

使用場景

通用場景

需要美觀URL、SEO

非瀏覽器環境

8.vuex的核心屬性有那5種？

五大核心屬性：

  • State：存儲應用狀態數據，唯一數據源
  • Getters：計算派生狀態，類似計算屬性
  • Mutations：同步修改State的唯一途徑
  • Actions：處理異步處理，提交Mutations
  • Modules：模塊化分割大型應用狀態

核心原則：

  • State是響應式的，不能直接修改
  • 必須通過Mutations修改State
  • Actions處理異步，Mutations必須是同步
  • 大型應用應用Modules進行模塊化管理
9.Xhr、Fetch、Axios有什麼區別？

（1）XHR（XMLHttpRequest）
簡介：

  • 是一種原生的 JavaScript API，用於發送 HTTP 請求和接收響應。
  • 最早用於實現異步的 Ajax 請求。

特點：

  • API 比較舊，使用起來不夠直觀，代碼通常較為冗長。
  • 承受同步和異步請求，但同步請求在現代瀏覽器中被逐步廢棄。

優點：

  • 兼容性強，支持幾乎所有瀏覽器。

缺點：

  • 不支持 Promise，必須手動處理回調邏輯，代碼複雜。

補充：（2）Ajax（Asynchronous JavaScript and XML）
簡介：

  • 是一種技術概念，代表使用異步方式與服務器通信。
  • 通常指使用 XHR 來實現異步請求的方式。

特點：

  • Ajax 不是一個具體的工具，而是一種技巧組合（HTML、CSS、JavaScript 和 XHR）。

優點：

  • 許可加載數據到頁面而無需刷新整個頁面。

缺點：

  • 如果基於 XHR 實現，依然存在代碼冗長、缺少現代特性的難題。

（3） API
簡介：

  • 是現代瀏覽器提供的新的原生 JavaScript API，用於 HTTP 請求。
  • 基於 Promise，語法更簡潔，更現代化。

特點：

  • 默認採用異步方式，不支持同步請求。
  • 協助更豐富的作用，比如流式處理響應。

優點：

  • Promise 和 async/await 支持，使代碼更加直觀。
  • 易於擴展，比如經過攔截器對請求和響應進行處理。

缺點：

  • 瀏覽器兼容性不如 XHR（例如舊版 IE 不支撐）。
  • 默認不協助超時控制，要求手動搭建。

（4） Axios

簡介：

  • 是一個基於 Promise 的第三方 HTTP 請求庫，封裝了 XHR 和部分 Fetch 功能。
  • 提供了更高級的功能，簡化了 HTTP 請求的實現。

特點：

  • 自動轉換 JSON 數據。
  • 支持請求和響應攔截器。
  • 提供默認超時設置和更便捷的錯誤處理。

優點：

  • 語法簡單，易於應用。
  • 更強大的功能（攔截器、取消請求、超時設置等）。
  • 瀏覽器兼容性好。

缺點：

  • 需要引入額外的庫，增加項目體積。
10.Symbol

Symbol 是 ES6 引入的一種新的原始數據類型，表示唯一的值。主要作用是創建唯一的屬性鍵，避免對象屬性名衝突，還能夠用於定義對象的私有屬性，以及修改對象在特定執行下的行為（如使用內置 Symbol 值）。

  1. 基本概念：
  • ES6 新增的原始數據類型
  • 表示唯一且不可變的值
  • 主要用途是創建唯一的屬性鍵
  1. 核心特性：
  • 唯一性：每個 Symbol 都是唯一的，即使描述相同
  • 不可枚舉性：Symbol 屬性不會被常規方法枚舉到
  • 全局註冊表：可以使用 Symbol.for() 創建全局共享的 Symbol
  1. 主要應用場景：
  • 避免屬性名衝突：在庫開發中防止屬性被意外覆蓋
  • 實現私有屬性：縱然不是真正的私有，但給予了某種程度的封裝
  • 內置 Symbol：定義對象的默認行為（迭代、類型轉換等）
  • 元編程：控制對象的底層行為
  1. 常用方法：
  • Symbol(description) - 創建 Symbol
  • Symbol.for(key) - 創建或獲取全局 Symbol
  • Symbol.keyFor(sym) - 獲取全局 Symbol 的鍵
  • Object.getOwnPropertySymbols() - 獲取對象的 Symbol 屬性