1. 寫在前面

??有時(shí)候一些其他領(lǐng)域的小伙伴，會(huì)私信問一些非博主領(lǐng)域相關(guān)觸及知識(shí)盲區(qū)的問題，什么C++，C#，大前端…

其中有很多朋友問面試相關(guān)的，我之前的文章內(nèi)有一篇關(guān)于Python領(lǐng)域面經(jīng)匯總的置頂文章，那篇文章在我有空的時(shí)候，有價(jià)值的問題也會(huì)持續(xù)更新收錄進(jìn)去，感興趣的可以去閱讀：

極具參考價(jià)值的Python面試題！從創(chuàng)業(yè)公司到一線大廠的真實(shí)面經(jīng)匯總（持續(xù)更新）

最近有幾位朋友問前端的面試題目，說實(shí)話，我很難從專業(yè)的角度去給出總結(jié)，但是既然大家有需要，我還是在周末之余通過咨詢相關(guān)領(lǐng)域的朋友跟目前比較主流的一些問題進(jìn)行了一個(gè)匯總，于是有了這么一篇文章，希望它能夠幫到你

前端天花板確實(shí)低，VP很少見？盡頭小組長？撒一把米放鍵盤上？對于前端的梗很多，但是這都不重要！深耕自己的領(lǐng)域，你就是專家！

2. 前端面試匯總

2.0.1. 如何提?webpack的打包速度

• 優(yōu)化Loader
  ??對于 Loader 來說，影響打包效率首當(dāng)其沖必屬 Babel 了。因?yàn)?Babel 會(huì)將代碼轉(zhuǎn)為字符串生成 AST，然后對 AST 繼續(xù)進(jìn)行轉(zhuǎn)變最后再生成新的代碼，項(xiàng)目越大，轉(zhuǎn)換代碼越多，效率就越低。當(dāng)然了，這是可以優(yōu)化的

首先優(yōu)化Loader的文件搜索范圍：

module.exports = {
  module: {
    rules: [
      {
        // js 文件才使用 babel
        test: /\.js$/,
        loader: 'babel-loader',
        // 只在 src 文件夾下查找
        include: [resolve('src')],
        // 不會(huì)去查找的路徑
        exclude: /node_modules/
      }
    ]
  }
}

對于 Babel 來說，希望只作用在 JS 代碼上的，然后 node_modules 中使用的代碼都是編譯過的，所以完全沒有必要再去處理一遍

當(dāng)然這樣做還不夠，還可以將 Babel 編譯過的文件緩存起來，下次只需要編譯更改過的代碼文件即可，這樣可以大幅度加快打包時(shí)間

2.0.2. 數(shù)組去重

??遍歷舊數(shù)組，然后拿著舊數(shù)組元素去查詢新數(shù)組，如果該元素在新數(shù)組里面沒有出現(xiàn)過，我們就添加，否則不添加。先封裝一個(gè)函數(shù)，unique：

function unique(arr){
var newArr =\[]
for(var i =0; i< arr.length; i++){
if (newArr.indexOf(arr\[i] === -1){
newArr.push(arr\[i])
}
}
return newArr
}
var demo = unique(\[])
console.log(demo)

2.0.3. 前端有幾種緩存方式？

• sessionStorage
  但當(dāng)頁面關(guān)閉后，sessionStorage 中的數(shù)據(jù)就會(huì)被清空。 indexdb、 50mb 允許儲(chǔ)存大量數(shù)據(jù)，提供查找接口，支持異步操作，還能建立索引。indexDB缺點(diǎn)是：不支持DO操作；不能跨域
• localStorage
  5M大小只能存儲(chǔ)字符串格式的數(shù)據(jù)，所以最好在每次存儲(chǔ)時(shí)把數(shù)據(jù)轉(zhuǎn)換成json格式， 取出的時(shí)候再轉(zhuǎn)換回來 生命周期是永久的， 除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)永遠(yuǎn)不會(huì)消失
• cookiec
  當(dāng)在客戶端的瀏覽器上設(shè)置Cookie時(shí)，它可以持續(xù)數(shù)天，數(shù)月甚至數(shù)年。這樣可以輕松保存用戶首選項(xiàng)和訪問信息 不需要任何服務(wù)器資源，并存儲(chǔ)在用戶的計(jì)算機(jī)上，因此不會(huì)給服務(wù)器帶來額外的負(fù)擔(dān)。 確實(shí)非常小，它的大小限制為4KB左右,不能儲(chǔ)存大數(shù)據(jù)且不易讀取

2.0.4. nextTick描述一下？

異步方法，異步渲染最后一步，與JS事件循環(huán)聯(lián)系緊密。主要使用了宏任務(wù)微任務(wù)（setTimeout、promise那些），定義了一個(gè)異步方法，多次調(diào)用nextTick會(huì)將方法存入隊(duì)列，通過異步方法清空當(dāng)前隊(duì)列

2.0.5. Webpack層面的優(yōu)化？

Webpack 對圖片進(jìn)行壓縮
減少 ES6 轉(zhuǎn)為 ES5 的冗余代碼
提取公共代碼
模板預(yù)編譯
提取組件的 CSS
優(yōu)化 SourceMap
構(gòu)建結(jié)果輸出分析
Vue 項(xiàng)目的編譯優(yōu)化

2.0.6. 代碼層面的優(yōu)化？

v-if 和 v-show 區(qū)分使用場景
computed 和 watch 區(qū)分使用場景
v-for 遍歷必須為 item 添加 key，且避免同時(shí)使用 v-if
長列表性能優(yōu)化
事件的銷毀
圖片資源懶加載
路由懶加載
第三方插件的按需引入
優(yōu)化無限列表性能
服務(wù)端渲染 SSR or 預(yù)渲染

2.0.7. Web 技術(shù)的優(yōu)化？

開啟gzip壓縮、瀏覽器緩存、CDN使用、使用Chrome Performance查找性能瓶頸

2.0.8. diff算法的優(yōu)化策略？

四種命中查找，四個(gè)指針

1、舊前與新前（先比開頭，后插入和刪除節(jié)點(diǎn)的這種情況）
2、舊后與新后（比結(jié)尾，前插入或刪除的情況）
3、舊前與新后（頭與尾比，此種發(fā)生了，涉及移動(dòng)節(jié)點(diǎn)，那么新前指向的節(jié)點(diǎn)，移動(dòng)到舊后之后）
4、舊后與新前（尾與頭比，此種發(fā)生了，涉及移動(dòng)節(jié)點(diǎn)，那么新前指向的節(jié)點(diǎn)，移動(dòng)到舊前之前）

2.0.9. 事件循環(huán)？它在JS中作用？

事件循環(huán)是JavaScript中處理異步代碼執(zhí)行的機(jī)制。它負(fù)責(zé)管理調(diào)度和執(zhí)行異步任務(wù)，并將它們添加到執(zhí)行隊(duì)列中。
在JavaScript中，事件循環(huán)的作用是確保異步任務(wù)按照正確的順序執(zhí)行，并且不會(huì)阻塞主線程。它通過不斷地從執(zhí)行隊(duì)列中取出任務(wù)并執(zhí)行，以實(shí)現(xiàn)非阻塞的異步操作

2.1.0. 瀏覽器緩存及作用？

瀏覽器緩存是瀏覽器在本地存儲(chǔ)Web頁面和資源的副本，以便在后續(xù)訪問時(shí)可以快速加載。它的作用是減少對服務(wù)器的請求次數(shù)和網(wǎng)絡(luò)傳輸量，提高頁面加載速度和用戶體驗(yàn)。
瀏覽器緩存通過在首次請求時(shí)將資源保存到本地，并在后續(xù)請求時(shí)檢查資源是否已經(jīng)存在并且沒有過期來工作。如果資源已經(jīng)存在且未過期，瀏覽器會(huì)直接從緩存中加載資源，而不是從服務(wù)器重新下載

2.1.1. Web Workers作用？

Web Workers是一種瀏覽器提供的JavaScript API，用于在后臺(tái)線程中執(zhí)行耗時(shí)的計(jì)算任務(wù)，以避免阻塞主線程。
Web Workers的作用是提高瀏覽器的響應(yīng)性能，使得在執(zhí)行復(fù)雜計(jì)算或處理大量數(shù)據(jù)時(shí)，不會(huì)影響用戶界面的流暢性。
Web Workers通過將任務(wù)委托給后臺(tái)線程來實(shí)現(xiàn)并行處理，從而充分利用多核處理器的能力。它們可以與主線程進(jìn)行通信，但不能直接訪問DOM或執(zhí)行UI相關(guān)的操作

2.1.2. 瀏覽器垃圾回收機(jī)制？

瀏覽器的垃圾回收機(jī)制是一種自動(dòng)管理內(nèi)存的機(jī)制，用于檢測和回收不再使用的對象，以釋放內(nèi)存資源。
垃圾回收機(jī)制通過標(biāo)記-清除算法實(shí)現(xiàn)。它的工作原理如下：
標(biāo)記階段：垃圾回收器會(huì)從根對象（如全局對象）開始，遞歸遍歷所有對象，并標(biāo)記仍然可訪問的對象。
清除階段：垃圾回收器會(huì)掃描堆內(nèi)存，清除未被標(biāo)記的對象，并回收它們所占用的內(nèi)存空間。
垃圾回收機(jī)制的目標(biāo)是識(shí)別和回收不再使用的對象，以避免內(nèi)存泄漏和提高內(nèi)存利用率

2.1.3. 虛擬DOM實(shí)現(xiàn)原理?

虛擬DOM本質(zhì)上是JavaScript對象,是對真實(shí)DOM的抽象
狀態(tài)變更時(shí)，記錄新樹和舊樹的差異
最后把差異更新到真正的dom中

3. CSS相關(guān)匯總

3.0.1. CSS中的層疊順序是如何工作的？

層疊順序（z-index）用于控制元素在垂直方向上的堆疊順序。具有較高層疊順序值的元素將顯示在較低層疊順序值的元素之上。默認(rèn)情況下，層疊順序值為auto

3.0.2. CSS中的偽類和偽元素的區(qū)別？示例？

偽類用于向選擇器添加特殊的狀態(tài)，如:hover、:active等。偽元素用于向選擇器添加特殊的元素，如::before、::after

/* 偽類示例 */
a:hover {
  color: red;
}

/* 偽元素示例 */
p::before {
  content: "前綴";
}

3.0.3. v-if和v-for哪個(gè)優(yōu)先級(jí)更高

在vue2中，v-for的優(yōu)先級(jí)是高于v-if
vue3中則完全相反，v-if的優(yōu)先級(jí)高于v-for

3.0.4. CSS中的BFC它的作用是什么？

BFC（塊級(jí)格式化上下文）是CSS中的一種渲染模式，它創(chuàng)建了一個(gè)獨(dú)立的渲染環(huán)境，其中的元素按照一定的規(guī)則進(jìn)行布局和定位。BFC的作用包括：清除浮動(dòng)、防止外邊距重疊

3.0.5. CSS中的flexbox布局是什么，它有什么優(yōu)勢？

flexbox布局是一種用于創(chuàng)建靈活的、響應(yīng)式的布局的CSS模塊。它通過flex容器和flex項(xiàng)目的組合來實(shí)現(xiàn)強(qiáng)大的布局能力。其優(yōu)勢包括簡單易用、自適應(yīng)性強(qiáng)、對齊和分布控制靈活

3.0.6. CSS的盒模型是什么，描述一下？

CSS的盒模型是用于布局和定位元素的概念。它由內(nèi)容區(qū)域、內(nèi)邊距、邊框和外邊距組成，這些部分依次包裹在元素周圍

3.0.7. 描述一下CSS中的選擇器及其優(yōu)先級(jí)?

CSS選擇器用于選擇要應(yīng)用樣式的HTML元素。選擇器的優(yōu)先級(jí)規(guī)則是：內(nèi)聯(lián)樣式 > ID選擇器 > 類選擇器、屬性選擇器、偽類選擇器 > 元素選擇器 > 通用選擇器。同時(shí)，使用!important可以提升樣式的優(yōu)先級(jí)

4. Vue相關(guān)匯總

4.0.1. v-if和v-for哪個(gè)優(yōu)先級(jí)更高?

??在vue2中，v-for的優(yōu)先級(jí)是高于v-if，把它們放在一起，輸出的渲染函數(shù)中可以看出會(huì)先執(zhí)行循環(huán)再判斷條件，哪怕我們只渲染列表中一小部分元素，也得在每次重渲染的時(shí)候遍歷整個(gè)列表，這會(huì)比較浪費(fèi)；另外需要注意的是在vue3中則完全相反，v-if的優(yōu)先級(jí)高于v-for，所以v-if執(zhí)行時(shí)，它調(diào)用的變量還不存在，就會(huì)導(dǎo)致異常

4.0.2. 3.0特性描述一下？

• 監(jiān)測機(jī)制的改變
  3.0 將帶來基于代理 Proxy 的 observer 實(shí)現(xiàn)，提供全語言覆蓋的反應(yīng)性跟蹤。這消除了 Vue 2 當(dāng)中基于 Object.defineProperty 的實(shí)現(xiàn)所存在的很多限制：（只能監(jiān)測屬性，不能監(jiān)測對象、檢測屬性的添加和刪除、檢測數(shù)組索引和長度的變更、支持 Map、Set、WeakMap 和 WeakSet）
• 模板
  模板方面沒有大的變更，只改了作用域插槽，2.x 的機(jī)制導(dǎo)致作用域插槽變了，父組件會(huì)重新渲染，而 3.0 把作用域插槽改成了函數(shù)的方式，這樣只會(huì)影響子組件的重新渲染，提升了渲染的性能。
  同時(shí)，對于 render 函數(shù)的方面，vue3.0 也會(huì)進(jìn)行一系列更改來方便習(xí)慣直接使用 api 來生成 vdom
• 對象式的組件聲明方式
  vue2.x 中的組件是通過聲明的方式傳入一系列 option，和 TypeScript 的結(jié)合需要通過一些裝飾器的方式來做，雖然能實(shí)現(xiàn)功能，但是比較麻煩。3.0 修改了組件的聲明方式，改成了類式的寫法，這樣使得和 TypeScript 的結(jié)合變得很容易。
  此外，vue 的源碼也改用了 TypeScript 來寫。其實(shí)當(dāng)代碼的功能復(fù)雜之后，必須有一個(gè)靜態(tài)類型系統(tǒng)來做一些輔助管理。現(xiàn)在 vue3.0 也全面改用 TypeScript 來重寫了，更是使得對外暴露的 api 更容易結(jié)合 TypeScript。靜態(tài)類型系統(tǒng)對于復(fù)雜代碼的維護(hù)確實(shí)很有必要
• 其它方面的更改
  （1）支持自定義渲染器，從而使得 weex 可以通過自定義渲染器的方式來擴(kuò)展，而不是直接 fork 源碼來改的方式
  （2）支持 Fragment（多個(gè)根節(jié)點(diǎn)）和 Protal（在 dom 其他部分渲染組建內(nèi)容）組件，針對一些特殊的場景做了處理
  （3）基于 treeshaking 優(yōu)化，提供了更多的內(nèi)置功能

4.0.3. vue 中使用了哪些設(shè)計(jì)模式？

• 工廠模式：虛擬 DOM 根據(jù)參數(shù)的不同返回基礎(chǔ)標(biāo)簽的 Vnode 和組件 Vnode

• 單例模式：vuex 和 vue-router 的插件注冊方法 install 判斷如果系統(tǒng)存在實(shí)例就直接返回掉

• 發(fā)布-訂閱模式 (vue 事件機(jī)制)

• 觀察者模式 (響應(yīng)式數(shù)據(jù)原理)

• 裝飾模式: (@裝飾器的用法)

• 策略模式：指對象有某個(gè)行為,但是在不同的場景中,該行為有不同的實(shí)現(xiàn)方案-比如選項(xiàng)的合并策略

4.0.4. 模板編譯原理

Vue 的編譯過程就是將 template 轉(zhuǎn)化為 render 函數(shù)的過程 分為以下三步：

1、將模板字符串 轉(zhuǎn)換成 element ASTs（解析器）
2、對AST進(jìn)行靜態(tài)節(jié)點(diǎn)標(biāo)記，主要用來做虛擬DOM的渲染優(yōu)化（優(yōu)化器）
3、使用 element ASTs 生成 render 函數(shù)代碼字符串（代碼生成器）

export function compileToFunctions(template) {
  // 我們需要把html字符串變成render函數(shù)
  // 1.把html代碼轉(zhuǎn)成ast語法樹  ast用來描述代碼本身形成樹結(jié)構(gòu) 不僅可以描述html 也能描述css以及js語法
  // 很多庫都運(yùn)用到了ast 比如 webpack babel eslint等等
  let ast = parse(template);
  // 2.優(yōu)化靜態(tài)節(jié)點(diǎn)
  // 這個(gè)有興趣的可以去看源碼  不影響核心功能就不實(shí)現(xiàn)了
  //   if (options.optimize !== false) {
  //     optimize(ast, options);
  //   }

  // 3.通過ast 重新生成代碼
  // 我們最后生成的代碼需要和render函數(shù)一樣
  // 類似_c('div',{id:"app"},_c('div',undefined,_v("hello"+_s(name)),_c('span',undefined,_v("world"))))
  // _c代表創(chuàng)建元素 _v代表創(chuàng)建文本 _s代表文Json.stringify--把對象解析成文本
  let code = generate(ast);
  //   使用with語法改變作用域?yàn)閠his  之后調(diào)用render函數(shù)可以使用call改變this 方便code里面的變量取值
  let renderFn = new Function(`with(this){return ${code}}`);
  return renderFn;
}

4.0.5. 響應(yīng)式原理區(qū)別?

Vue3.x 改用 Proxy 替代 Object.defineProperty。因?yàn)?Proxy 可以直接監(jiān)聽對象和數(shù)組的變化，并且有多達(dá) 13 種攔截方法

import { mutableHandlers } from "./baseHandlers"; // 代理相關(guān)邏輯
import { isObject } from "./util"; // 工具方法

export function reactive(target) {
  // 根據(jù)不同參數(shù)創(chuàng)建不同響應(yīng)式對象
  return createReactiveObject(target, mutableHandlers);
}
function createReactiveObject(target, baseHandler) {
  if (!isObject(target)) {
    return target;
  }
  const observed = new Proxy(target, baseHandler);
  return observed;
}

const get = createGetter();
const set = createSetter();

function createGetter() {
  return function get(target, key, receiver) {
    // 對獲取的值進(jìn)行放射
    const res = Reflect.get(target, key, receiver);
    console.log("屬性獲取", key);
    if (isObject(res)) {
      // 如果獲取的值是對象類型，則返回當(dāng)前對象的代理對象
      return reactive(res);
    }
    return res;
  };
}
function createSetter() {
  return function set(target, key, value, receiver) {
    const oldValue = target[key];
    const hadKey = hasOwn(target, key);
    const result = Reflect.set(target, key, value, receiver);
    if (!hadKey) {
      console.log("屬性新增", key, value);
    } else if (hasChanged(value, oldValue)) {
      console.log("屬性值被修改", key, value);
    }
    return result;
  };
}
export const mutableHandlers = {
  get, // 當(dāng)獲取屬性時(shí)調(diào)用此方法
  set, // 當(dāng)修改屬性時(shí)調(diào)用此方法
};

4.0.6. 雙向數(shù)據(jù)綁定如何實(shí)現(xiàn)的？

Vue中的雙向數(shù)據(jù)綁定是通過v-model指令實(shí)現(xiàn)的。v-model可以在表單元素（如、、）上創(chuàng)建雙向數(shù)據(jù)綁定。當(dāng)用戶輸入改變表單元素的值時(shí)，數(shù)據(jù)模型會(huì)自動(dòng)更新；反之，當(dāng)數(shù)據(jù)模型的值改變時(shí)，表單元素也會(huì)自動(dòng)更新

4.0.7. 生命周期鉤子？執(zhí)行順序？

Vue中的生命周期鉤子包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。它們的執(zhí)行順序如下：

beforeCreate、created beforeMount、mounted、beforeUpdate、updated beforeDestroy、destroyed

4.0.8. 路由如何實(shí)現(xiàn)的？

Vue中的路由是通過Vue Router實(shí)現(xiàn)的。Vue Router是Vue.js官方提供的路由管理器，它允許開發(fā)者在Vue應(yīng)用中實(shí)現(xiàn)單頁面應(yīng)用（SPA）。Vue Router通過配置路由映射關(guān)系，將URL路徑與組件進(jìn)行關(guān)聯(lián)，并提供導(dǎo)航功能，使用戶可以在不刷新頁面的情況下切換視圖

4.0.9. watch和computed區(qū)別是什么？

watch和computed都可以用于監(jiān)聽數(shù)據(jù)的變化，但它們的用法和實(shí)現(xiàn)方式略有不同。watch用于監(jiān)聽指定的數(shù)據(jù)變化，并在數(shù)據(jù)變化時(shí)執(zhí)行相應(yīng)的操作。computed用于根據(jù)依賴的數(shù)據(jù)動(dòng)態(tài)計(jì)算得出一個(gè)新的值，并將該值緩存起來，只有在依賴的數(shù)據(jù)發(fā)生變化時(shí)才會(huì)重新計(jì)算

4.1.0. 依賴注入是什么？它的應(yīng)用場景？

依賴注入是一種設(shè)計(jì)模式，用于將依賴關(guān)系從一個(gè)組件傳遞到另一個(gè)組件。在Vue中，依賴注入通過provide和inject選項(xiàng)實(shí)現(xiàn)。父組件通過provide提供數(shù)據(jù)，然后子組件通過inject注入這些數(shù)據(jù)。它在跨多個(gè)層級(jí)的組件通信中非常有用

4.1.1. action和mutation的區(qū)別？

mutation中的操作是一系列的同步函數(shù)，用于修改state中的變量的的狀態(tài)。當(dāng)使用vuex時(shí)需要通過commit來提交需要操作的內(nèi)容。mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      state.count++      // 變更狀態(tài)
    }
  }
})

4.1.2. router和route的區(qū)別？

router是VueRouter的一個(gè)對象，通過Vue.use(VueRouter)和VueRouter構(gòu)造函數(shù)得到一個(gè)router的實(shí)例對象，這個(gè)對象中是一個(gè)全局的對象，包含了所有的路由包含了許多關(guān)鍵的對象和屬性。
route是一個(gè)跳轉(zhuǎn)的路由對象，每一個(gè)路由都會(huì)有一個(gè)route對象，是一個(gè)局部的對象，可以獲取對應(yīng)的name,path,params,query

4.1.3. 插槽是什么？具有命名插槽和作用域插槽的示例？

<!-- 父組件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot :data="data"></slot>
  </div>
</template>

<!-- 子組件 -->
<template>
  <div>
    <slot name="header">默認(rèn)標(biāo)題</slot>
    <slot :data="computedData">{{ computedData }}</slot>
  </div>
</template>

4.1.4. 動(dòng)畫系統(tǒng)是如何工作？簡單示例？

Vue.js的動(dòng)畫系統(tǒng)通過CSS過渡和動(dòng)畫類實(shí)現(xiàn)。通過在元素上添加過渡類或動(dòng)畫類，可以觸發(fā)相應(yīng)的過渡效果或動(dòng)畫效果。示例：

<transition name="fade">
  <div v-if="show">顯示內(nèi)容</div>
</transition>

<!-- CSS樣式 -->
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

4.1.5. 錯(cuò)誤處理機(jī)制？如何捕獲？

Vue.js提供了全局的錯(cuò)誤處理機(jī)制和組件級(jí)別的錯(cuò)誤處理機(jī)制。全局錯(cuò)誤處理可以通過errorCaptured鉤子函數(shù)捕獲和處理錯(cuò)誤。組件級(jí)別的錯(cuò)誤處理可以通過errorCaptured鉤子函數(shù)或errorHandler選項(xiàng)捕獲和處理錯(cuò)誤

4.1.6. 響應(yīng)式數(shù)組有哪些限制？如何解決？

Vue.js的響應(yīng)式系統(tǒng)對于數(shù)組的變異方法（如push、pop、splice等）是無法追蹤的。為了解決這個(gè)限制，Vue提供了一些特殊的方法，如Vue.set、vm.$set和Array.prototype.splice。這些方法可以用于更新數(shù)組并保持響應(yīng)式

4.1.7. Composition API與Options API區(qū)別？

Composition API是Vue.js 3中引入的一種新的組織組件邏輯的方式。它允許開發(fā)者通過函數(shù)的方式組織和重用邏輯，而不是通過選項(xiàng)對象。相比之下，Options API是Vue.js 2中常用的組織組件邏輯的方式，通過選項(xiàng)對象中的屬性來定義組件的數(shù)據(jù)、方法

4.1.8. Suspense是什么？它的作用？

Suspense是Vue.js 3中引入的一種機(jī)制，用于處理異步組件的加載狀態(tài)。它可以在異步組件加載完成之前顯示一個(gè)占位符，并在加載完成后渲染異步組件的內(nèi)容。這樣可以更好地處理異步組件的加載過程，提供更好的用戶體驗(yàn)

4.1.9. provide和inject作用？請給出示例？

provide和inject用于實(shí)現(xiàn)組件之間的依賴注入。通過在父組件中使用provide提供數(shù)據(jù)，然后在子組件中使用inject注入這些數(shù)據(jù)。示例：

// 父組件
const Parent = {
  provide: {
    message: 'Hello Spider！'
  },
  // ...
}

// 子組件
const Child = {
  inject: ['message'],
  created() {
    console.log(this.message); // 輸出：Hello Spider!
  },
  // ...
}

4.2.0. watchEffect和watch區(qū)別？如何使用？

watchEffect用于監(jiān)聽響應(yīng)式數(shù)據(jù)的變化，并在回調(diào)函數(shù)中執(zhí)行相應(yīng)的操作。它會(huì)自動(dòng)追蹤依賴，并在依賴變化時(shí)重新運(yùn)行回調(diào)函數(shù)。watch用于監(jiān)聽指定的響應(yīng)式數(shù)據(jù)，并在其變化時(shí)執(zhí)行相應(yīng)的操作。它可以精確地指定要監(jiān)聽的數(shù)據(jù)，并提供更多的配置選項(xiàng)。一般來說，如果只需要監(jiān)聽一個(gè)響應(yīng)式數(shù)據(jù)的變化并執(zhí)行相應(yīng)操作，可以使用watchEffect；如果需要更細(xì)粒度的控制，可以使用watch

5. React相關(guān)匯總

5.0.1. 核心概念是什么？

React是一個(gè)用于構(gòu)建用戶界面的JavaScript庫。它的核心概念是組件化和聲明式編程。React將用戶界面拆分為獨(dú)立的可重用組件，并使用聲明式語法描述組件的狀態(tài)和UI的關(guān)系，使得構(gòu)建復(fù)雜的UI變得簡單和可維護(hù)

5.0.2. 生命周期方法？列舉一些？

React生命周期方法是在組件不同階段執(zhí)行的特定方法。以下是一些常用的React生命周期方法：

**
componentDidMount：組件掛載后立即調(diào)用
componentDidUpdate：組件更新后調(diào)用
componentWillUnmount：組件卸載前調(diào)用
shouldComponentUpdate：決定組件是否需要重新渲染
getDerivedStateFromProps：根據(jù)props的變化來更新狀態(tài)**

5.0.3. React Context？作用？

React Context是一種用于在組件樹中共享數(shù)據(jù)的機(jī)制。它可以避免通過props一層層傳遞數(shù)據(jù)，使得跨組件的數(shù)據(jù)共享變得更加簡單和高效。React Context提供了一個(gè)Provider和Consumer組件，用于提供和消費(fèi)共享的數(shù)據(jù)

5.0.4. React Router？作用？

React Router是React中用于處理路由的庫。它提供了一種在單頁面應(yīng)用中實(shí)現(xiàn)導(dǎo)航和路由功能的方式。React Router可以幫助開發(fā)者實(shí)現(xiàn)頁面之間的切換、URL參數(shù)的傳遞、嵌套路由等功能

5.0.5. React Hooks？作用？

React Hooks是React 16.8版本引入的一種特性，用于在函數(shù)組件中使用狀態(tài)和其他React特性。Hooks提供了一種無需編寫類組件的方式來管理狀態(tài)和處理副作用，使得函數(shù)組件具有類組件的能力

??好了，到這里又到了跟大家說再見的時(shí)候了。創(chuàng)作不易，幫忙點(diǎn)個(gè)贊再走吧。你的支持是我創(chuàng)作的動(dòng)力，希望能帶給大家更多優(yōu)質(zhì)的文章文章來源地址http://www.zghlxwxcb.cn/news/detail-751841.html

到了這里，關(guān)于【持續(xù)更新】匯總了一份前端領(lǐng)域必看面試題的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！