1111

MrZivChu發表於2024-04-14

什麼是閉包,它的作用?
閉包是在函式返回後保持對函式中變數的訪問的一種方式。閉包通常用於資料隱私、封裝和建立具有持久狀態的函式。

【TypeScript】
1、解釋事件委託
事件委託是一種技術,您無需將事件偵聽器附加到各個元素,而是將單個事件偵聽器附加到將為其子元素處理事件的父元素。當您有大量元素或動態新增元素時,此方法非常有用,因為它可以提高效能並減少記憶體消耗。

2、解釋 TypeScript 中靜態型別的概念及其好處。
答案:TypeScript 中的靜態型別可以在開發過程中指定變數、函式引數和返回值的資料型別。這有助於及早捕獲與型別相關的錯誤,從而提高程式碼質量和可維護性。
好處是擁有更好的程式碼文件、增強的工具支援以及提高的開發人員生產力。

3、TypeScript 中的泛型是什麼,它的作用
TypeScript 中的泛型允許您建立可與各種型別一起使用的可重用元件或函式。它們支援強型別,同時保持使用不同資料型別的靈活性。


【OpenHarmony】【ArkTs】【ArkUI】
1、UIAbility元件生命週期
UIAbility的生命週期包括Create、Foreground、Background、Destroy四個狀態

2、UIAbility有哪幾種啟動模式
multiton
sinleton
specified

3、自定義元件生命週期
aboutToAppear(在建立自定義元件的新例項後,在執行其build()函式之前執行)
aboutToDisappear(在自定義元件析構銷燬之前執行)
onPageShow(頁面每次顯示時觸發一次,包括路由過程、應用進入前臺等場景,僅@Entry裝飾的自定義元件生效)
onPageHide(頁面每次隱藏時觸發一次,包括路由過程、應用進入前後臺等場景,僅@Entry裝飾的自定義元件生效)
onBackPress(當使用者點選返回按鈕時觸發,僅@Entry裝飾的自定義元件生效)
onLayout
onMeasure
LayoutChild
LayoutBorderInfo
LayoutInfo

4、http 建立流程(包含方法)
createHttp(建立一個HTTP請求,裡面包括髮起請求、中斷請求、訂閱/取消訂閱HTTP Response Header事件)
request(url, options, callback) (根據URL地址,發起HTTP網路請求,使用Promise方式作為非同步方法)
destory(中斷請求任務)
on(訂閱HTTP Response Header 事件)
off(取消訂閱HTTP Response Header 事件)
once(訂閱HTTP Response Header 事件,但是隻觸發一次)

5、用哪一種裝飾器修飾的自定義元件可作為頁面入口元件
@Entry


【Vue 面試題】
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、computed 和 watch 的區別和運用的場景?
computed: 是計算屬性,依賴其它屬性值,並且 computed 的值有快取,只有它依賴的屬性值發生改變,下一次獲取 computed 的值時才會重新計算 computed 的值;
watch: 更多的是「觀察」的作用,類似於某些資料的監聽回撥 ,每當監聽的資料變化時都會執行回撥進行後續操作;
運用場景:
當我們需要進行數值計算,並且依賴於其它資料時,應該使用 computed,因為可以利用 computed 的快取特性,避免每次獲取值時,都要重新計算;
當我們需要在資料變化時執行非同步或開銷較大的操作時,應該使用 watch,使用 watch 選項允許我們執行非同步操作 ( 訪問一個 API ),限制我們執行該操作的頻率,並在我們得到最終結果前,設定中間狀態。這些都是計算屬性無法做到的。

4、Vue各個生命週期的作用
beforeCreate 元件例項被建立之初,元件的屬性生效之前
created 元件例項已經完全建立,屬性也繫結,但真實 dom 還沒有生成,$el 還不可用
beforeMount 在掛載開始之前被呼叫:相關的 render 函式首次被呼叫
mounted el 被新建立的 vm.$el 替換,並掛載到例項上去之後呼叫該鉤子
beforeUpdate 元件資料更新之前呼叫,發生在虛擬 DOM 打補丁之前
update 元件資料更新之後
activited keep-alive 專屬,元件被啟用時呼叫
deactivated keep-alive 專屬,元件被銷燬時呼叫
beforeDestory 元件銷燬前呼叫
destoryed 元件銷燬後呼叫

5、Vue 元件間通訊有哪幾種方式?
Vue 元件間通訊只要指以下 3 類通訊:父子元件通訊、隔代元件通訊、兄弟元件通訊,下面我們分別介紹每種通訊方式且會說明此種方法可適用於哪類元件間通訊。
(1)props / $emit 適用 父子元件通訊
這種方法是 Vue 元件的基礎,相信大部分同學耳聞能詳,所以此處就不舉例展開介紹。
(2)ref 與 $parent / $children 適用 父子元件通訊
ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子元件上,引用就指向元件例項
$parent / $children:訪問父 / 子例項
(3)EventBus ($emit / $on) 適用於 父子、隔代、兄弟元件通訊
這種方法透過一個空的 Vue 例項作為中央事件匯流排(事件中心),用它來觸發事件和監聽事件,從而實現任何元件間的通訊,包括父子、隔代、兄弟元件。
(4)$attrs/$listeners 適用於 隔代元件通訊
$attrs:包含了父作用域中不被 prop 所識別 (且獲取) 的特性繫結 ( class 和 style 除外 )。當一個元件沒有宣告任何 prop 時,這裡會包含所有父作用域的繫結 ( class 和 style 除外 ),並且可以透過 v-bind="$attrs" 傳入內部元件。通常配合 inheritAttrs 選項一起使用。
$listeners:包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以透過 v-on="$listeners" 傳入內部元件
(5)provide / inject 適用於 隔代元件通訊
祖先元件中透過 provider 來提供變數,然後在子孫元件中透過 inject 來注入變數。 provide / inject API 主要解決了跨級元件間的通訊問題,不過它的使用場景,主要是子元件獲取上級元件的狀態,跨級元件間建立了一種主動提供與依賴注入的關係。
(6)Vuex 適用於 父子、隔代、兄弟元件通訊
Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。每一個 Vuex 應用的核心就是 store(倉庫)。“store” 基本上就是一個容器,它包含著你的應用中大部分的狀態 ( state )。

6、你有對 Vue 專案進行哪些最佳化?
(1)程式碼層面的最佳化
v-if 和 v-show 區分使用場景
computed 和 watch 區分使用場景
v-for 遍歷必須為 item 新增 key,且避免同時使用 v-if
長列表效能最佳化
事件的銷燬
圖片資源懶載入
路由懶載入
第三方外掛的按需引入
最佳化無限列表效能
服務端渲染 SSR or 預渲染
(2)Webpack 層面的最佳化
Webpack 對圖片進行壓縮
減少 ES6 轉為 ES5 的冗餘程式碼
提取公共程式碼
模板預編譯
提取元件的 CSS
最佳化 SourceMap
構建結果輸出分析
Vue 專案的編譯最佳化
(3)基礎的 Web 技術的最佳化
開啟 gzip 壓縮
瀏覽器快取
CDN 的使用
使用 Chrome Performance 查詢效能瓶頸

相關文章