這篇文章主要介紹了web前端高頻面試題及答案有哪些的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇web前端高頻面試題及答案有哪些文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出青田免費(fèi)做網(wǎng)站回饋大家。

1.vue雙向數(shù)據(jù)綁定的原理？

mvvm場(chǎng)景：數(shù)據(jù)操作比較多的場(chǎng)景，需要大量使用DOM元素時(shí)，采用mvvm的開放方式，會(huì)更加便捷，讓開發(fā)者更多的經(jīng)歷放在數(shù)據(jù)的變化上，解放繁瑣的DOM元素

• MVVM 模型，

• M 數(shù)據(jù) 從后臺(tái)獲取的商品數(shù)據(jù)

• V 視圖 就是寫好的頁(yè)面，每一個(gè)div，每一個(gè)input 都是視圖

• VM 視圖模型，

• 數(shù)據(jù)發(fā)生變化，通過(guò)視圖模型會(huì)改變視圖的顯示，視圖上的改變，也會(huì)通過(guò)視圖模型進(jìn)而影響數(shù)據(jù)的變化 

• 核心：關(guān)于VUE雙向數(shù)據(jù)綁定，其核心是 Object.defineProperty()方法。

2.vue的生命周期有哪些

beforeCreate（創(chuàng)建前）、created（創(chuàng)建后）、beforeMount(載入前)、mounted（載入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（銷毀前）、destroyed（銷毀后）

mounted 真實(shí)dom掛載完成 updated只要data數(shù)據(jù)被改變 就會(huì)自動(dòng)更新觸發(fā) destroy銷毀全局計(jì)時(shí)器和自定義事件

如果使用了keep-alive會(huì)在多兩個(gè)：activated、deactivated當(dāng)組件初次加載會(huì)執(zhí)行前4個(gè)生命周期，分別為： beforeCreate、created、beforeMount、mounted

3.v-if 和v-show有什么區(qū)別？

• 相同點(diǎn):都可以控制dom元素的顯示和隱藏

• 不同點(diǎn):v-show只是改變display屬性，dom元素并未消失，切換時(shí)不需要重新渲染頁(yè)面

• v-if直接將dom元素從頁(yè)面刪除，再次切換需要重新渲染頁(yè)面

4.async await 是什么？它有哪些作用？

async await 是ES7的新增，async用于聲明一個(gè)函數(shù)，await用于等待一個(gè)異步方法執(zhí)行完成。async函數(shù)返回的是一個(gè)promise對(duì)象,可以用.then方法添加回調(diào)函數(shù)，在函數(shù)執(zhí)行的中，一旦遇到await就回先返回,等到這個(gè)異步操作完成之后，它再進(jìn)行函數(shù)體內(nèi)后面的這個(gè)語(yǔ)句

5、數(shù)組常用的方法？哪些方法會(huì)改變?cè)瓟?shù)組，哪些不會(huì)

• 會(huì)改變?cè)瓟?shù)組：

• pop (刪除數(shù)組的最后一個(gè)元素并返回刪除的元素)

• push(向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度)

• shift(刪除并返回?cái)?shù)組的第一個(gè)元素）

• unshift(向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度)

• reverse(反轉(zhuǎn)數(shù)組的元素順序)

• sort(對(duì)數(shù)組的元素進(jìn)行排序)

• splice(用于插入、刪除或替換數(shù)組的元素)

• 不會(huì)改變?cè)瓟?shù)組：

• concat---連接兩個(gè)或更多的數(shù)組，并返回結(jié)果。

• every---檢測(cè)數(shù)組元素的每個(gè)元素是否都符合條件。

• some---檢測(cè)數(shù)組元素中是否有元素符合指定條件。

• filter---檢測(cè)數(shù)組元素，并返回符合條件所有元素的數(shù)組。

• indexOf---搜索數(shù)組中的元素，并返回它所在的位置。

• join---把數(shù)組的所有元素放入一個(gè)字符串。

• toString---把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。

• lastIndexOf---返回一個(gè)指定的字符串值最后出現(xiàn)的位置，在一個(gè)字符串中的指定位置從后向前搜索。

• map---通過(guò)指定函數(shù)處理數(shù)組的每個(gè)元素，并返回處理后的數(shù)組。

• slice---選取數(shù)組的的一部分，并返回一個(gè)新數(shù)組。

• valueOf---返回?cái)?shù)組對(duì)象的原始值

6.什么是原型鏈？

每一個(gè)實(shí)例對(duì)象上有一個(gè)proto屬性，指向的構(gòu)造函數(shù)的原型對(duì)象，構(gòu)造函數(shù)的原型對(duì)象也是一個(gè)對(duì)象，也有proto屬性，這樣一層一層往上找的過(guò)程就形成了原型鏈。

7.什么是閉包？閉包有哪些優(yōu)缺點(diǎn)？

• 概念：函數(shù)嵌套函數(shù)，內(nèi)部變量能訪問(wèn)外部變量，這個(gè)變量稱為自由變量

• 解決的問(wèn)題：保存變量

• 帶來(lái)的問(wèn)題：會(huì)造成內(nèi)存泄漏問(wèn)題

• 閉包的應(yīng)用：防抖節(jié)流

8.es6有哪些新特性？

• 新增模板字符串

• 箭頭函數(shù)

• for-of（用來(lái)遍歷數(shù)據(jù)—例如數(shù)組中的值。）

• ES6 將 Promise 對(duì)象納入規(guī)范，提供了原生的 Promise 對(duì)象。

• 增加了 let 和 const 命令，用來(lái)聲明變量。

• 還有就是引入 module 模塊的概念

9.v-for 循環(huán)為什么一定要綁定key ?

給每個(gè)dom元素加上key作為唯一標(biāo)識(shí) ，diff算法可以正確的識(shí)別這個(gè)節(jié)點(diǎn)，使頁(yè)面渲染更加迅速!

10.組件中的data為什么要定義成一個(gè)函數(shù)而不是一個(gè)對(duì)象？

每個(gè)組件都是 Vue 的實(shí)例。組件共享 data 屬性，當(dāng) data 的值是同一個(gè)引用類型的值時(shí)，改變其中一個(gè)會(huì)影響其他

11.常見的盒子垂直居中的方法有哪些請(qǐng)舉例3種？

利用子絕父相定位方式來(lái)實(shí)現(xiàn)

利用Css3的transform，可以輕松的在未知元素的高寬的情況下實(shí)現(xiàn)元素的垂直居中。

flex

12.js數(shù)據(jù)類型有哪些，區(qū)別是什么

• 基本類型：string，number，boolean，null，undefined，symbol，bigInt

• 引用類型： object，array

• 基本類型存儲(chǔ)在棧中，空間小，操作頻繁

• 引用數(shù)據(jù)類型存放在堆中，它的地址在棧中，一般我們?cè)L問(wèn)就是它的地址

13.什么是symbol

是es6引入新的原始數(shù)據(jù)類型Symbol，表示獨(dú)一無(wú)二的值

14.什么是同源策略

所謂同源策略就是瀏覽器的一種安全機(jī)制，來(lái)限制不同源的網(wǎng)站不能通信（域名、協(xié)議、端口號(hào)相同）

15.promise是什么，有什么作用

• promise 是一個(gè)對(duì)象， 可以從改變對(duì)象獲取異步操作信息

• 他可以解決回調(diào)地獄的問(wèn)題，也就是異步深層嵌套問(wèn)題

16.什么是遞歸，遞歸有哪些優(yōu)缺點(diǎn)？

• 遞歸：如果函數(shù)在內(nèi)部可以調(diào)用其本身，那么整函數(shù)就是遞歸函數(shù)，簡(jiǎn)單理解：函數(shù)內(nèi)部自己調(diào)用自己，這個(gè)函數(shù)就是遞歸函數(shù)，

• 優(yōu)點(diǎn)：機(jī)構(gòu)清晰，可讀性強(qiáng)

• 缺點(diǎn)：效率低，調(diào)用站可能溢出，其實(shí)每一次函數(shù)調(diào)用會(huì)在內(nèi)存棧中分配空間，而每個(gè)進(jìn)程的棧的內(nèi)容糧食有限的。當(dāng)調(diào)用的層次太多時(shí)，就會(huì)超出棧的容量，從而導(dǎo)致棧溢出

17.let和const 的區(qū)別是什么

• let 命令不存在變量提升，如果在 let 前使用，會(huì)導(dǎo)致報(bào)錯(cuò)

• 如果塊區(qū)中存在 let 和 const 命令，就會(huì)形成封閉作用域

• 不允許重復(fù)聲明

• const定義的是常量，不能修改，但是如果定義的是對(duì)象，可以修改對(duì)象內(nèi)部的數(shù)據(jù)

18.vue性能優(yōu)化

• 函數(shù)式組件

• 路由懶加載

• v-for要綁定key key是虛擬dom唯一標(biāo)志,能幫vue高效的動(dòng)態(tài)渲染頁(yè)面,渲染頁(yè)面時(shí)會(huì)使用diff算法,會(huì)比較新舊dom,在比較時(shí)只比較同一級(jí),不進(jìn)行跨級(jí)比較,key發(fā)生變化節(jié)點(diǎn)進(jìn)行銷毀,并且是子節(jié)點(diǎn)先銷毀。

• computed緩存數(shù)據(jù)和watch keep-alive緩存組件

• v-if和v-for不要同時(shí)使用,v-show是display,銷毀是display-none.v-if為true創(chuàng)建.false銷毀。

• 設(shè)計(jì)vue響應(yīng)式數(shù)據(jù)時(shí)不能設(shè)計(jì)太深.會(huì)做全量遞歸的計(jì)算.

• 組件的顆粒度不能設(shè)計(jì)太細(xì).合理劃分.層級(jí)越深性能消耗越大

• 防抖節(jié)流

• ui組件庫(kù)按需引入

19..mvvm和mvc

• m（數(shù)據(jù)層）v（視圖層）vm（數(shù)據(jù)視圖交互層）簡(jiǎn)化了大量dom操作 ,只用于單頁(yè)面,通過(guò)數(shù)據(jù)來(lái)顯示視圖層而不是節(jié)點(diǎn)操作。

• mvc還需要獲取dom,使頁(yè)面渲染性能低且加載速度慢

• 面試可以說(shuō)的項(xiàng)目?jī)?yōu)化：

• 設(shè)計(jì)vue響應(yīng)式數(shù)據(jù)時(shí)不能設(shè)計(jì)太深.會(huì)做全量遞歸的計(jì)算.

• 組件的顆粒度不能設(shè)計(jì)太細(xì).合理劃分.層級(jí)越深性能消耗越大

20.路由模式：hash和history

• 實(shí)現(xiàn)的功能：

• 改變url且不讓瀏覽器向服務(wù)器發(fā)請(qǐng)求

• 檢測(cè)url的變化

• 截獲url地址 并解析出需要的信息匹配路由規(guī)則

• hash基于url傳參 會(huì)有體積限制,不會(huì)包括在http請(qǐng)求中對(duì)后端完全沒有影響,改變hash不會(huì)重新加載頁(yè)面; history可以在url里放參數(shù) 還可以將數(shù)據(jù)存放在一個(gè)特定對(duì)象中.history模式瀏覽器白屏解決方法是在服務(wù)端加一個(gè)覆蓋所有的情況候選資源,必須要服務(wù)端在服務(wù)器上有對(duì)應(yīng)的模式才能使用,如果服務(wù)器沒配置,可以先使用默認(rèn)的hash。

21.常用的塊與行屬性內(nèi)標(biāo)簽有哪些？有什么特征

• 塊標(biāo)簽：div、h2~h7、ul、li、table、p、br、form。

• 特征：獨(dú)占一行，換行顯示，可以設(shè)置寬高，可以嵌套塊和行

• 行標(biāo)簽：span、a、img、textarea、select、option、input。

• 特征：只有在行內(nèi)顯示，內(nèi)容撐開寬、高，不可以設(shè)置寬、高（img、input、textarea等除外）

22.== 和 ===的區(qū)別

• ==是非嚴(yán)格意義上的相等

• 值相等就相等

• ===是嚴(yán)格意義上的相等，會(huì)比較兩邊的數(shù)據(jù)類型和值大小

• 值和引用地址都相等才相等

23.嚴(yán)格模式的限制

• 變量必須聲明后再使用

• 函數(shù)的參數(shù)不能有同名屬性，否則報(bào)錯(cuò)

• 不能使用 with 語(yǔ)句

• 禁止 this 指向全局對(duì)象

24.git

• git init 初始化倉(cāng)庫(kù)

• git clone 克隆

• git status 檢查文件狀態(tài)

• git add. 將文件添加到暫存區(qū)

• git commit -m 描述信息

25.tcp和udp協(xié)議

• tcp安全性更高 http協(xié)議是建立在tcp基礎(chǔ)上的

• udp效率比tcp高 容易丟數(shù)據(jù)

26.vuex的五種狀態(tài)

• mutations（修改state里面的數(shù)據(jù)，但是他只能執(zhí)行同步的操作，異步必須寫在action里面）

• state（放數(shù)據(jù)）

• action（執(zhí)行異步操作）

• getter（計(jì)算屬性）

• moudel（允許將單一store拆分多個(gè)store并且同時(shí)保存在單一的狀態(tài)中）

傳遞過(guò)程

頁(yè)面通過(guò)mapAction異步提交事件到action。action通過(guò)commit把對(duì)應(yīng)參數(shù)同步提交到mutation，mutation會(huì)修改state中對(duì)應(yīng)的值。 最后通過(guò)getter把對(duì)應(yīng)值跑出去，在頁(yè)面的計(jì)算屬性中，通過(guò)，mapGetter來(lái)動(dòng)態(tài)獲取state中的值

27.什么是防抖和節(jié)流，js 如何處理防抖和節(jié)流

• 首先 防抖就是觸發(fā)下一個(gè)事件時(shí)停止掉上一個(gè)事件

• 節(jié)流是 觸發(fā)當(dāng)前事件需要在上一個(gè)事件結(jié)束以后

• 通過(guò)設(shè)置節(jié)流閥(定時(shí)器)

28.什么是重繪和回流

• 重繪：當(dāng)元素內(nèi)容以及布局沒有發(fā)生改變，只是元素外觀發(fā)生改變（background-color），就會(huì)重繪

• 回流：當(dāng)一部分內(nèi)容或者布局發(fā)生了改變，重新構(gòu)建頁(yè)面就會(huì)產(chǎn)生回流

• 產(chǎn)生回流一定會(huì)造成重繪，但是重繪不一定造成回流

29.Css優(yōu)先級(jí)

!importent>行內(nèi)> id> 類，偽類，屬性>標(biāo)簽，偽元素選擇器 > 繼承和通配符

30.如何解決盒子塌陷

• 父盒子設(shè)置上邊距

• overflow：hidden

• 子盒子脫標(biāo)

• 父盒子上 padding

31.清楚浮動(dòng)的方法

一共有5中方法

• 父盒子設(shè)置高度

• overflow：hidden

• 偽元素

• 雙偽元素

• 在父盒子末尾添加一個(gè)空盒子，設(shè)置 clear:both

32.Split（）和 join（）的區(qū)別？

• split 字符串轉(zhuǎn)換為數(shù)組，參數(shù)為以某個(gè)字符串分隔

• join 數(shù)組轉(zhuǎn)換為字符串 參數(shù)表示轉(zhuǎn)換為的字符串以什么連接

33.數(shù)組去重

1.利用雙重for循環(huán)，再利用數(shù)組方法splice方法去重（es5常用）

2.set去重:準(zhǔn)備一個(gè)數(shù)組，數(shù)組解構(gòu)newset,再準(zhǔn)備一個(gè)函數(shù)存放數(shù)組的變量作為函數(shù)的判斷值，return Array.from(new set(arr))即可

3.數(shù)組方法indexof

4.數(shù)組方法sort Obj[a]-Obj[b]

34.什么原因會(huì)造成內(nèi)存泄露

• 全局變量使用不當(dāng)（沒有聲明的變量）

• 閉包使用不當(dāng)

• 定時(shí)器/延時(shí)器沒有清理

• 沒有清理的DOM元素引用(dom清空或刪除時(shí)，事件未清除)

35.第一次加載頁(yè)面會(huì)觸發(fā)哪幾個(gè)鉤子函數(shù)？

• beforeCreate

• created 數(shù)據(jù)初始化完成，方法也調(diào)用，但是DOM未渲染

• beforeMount

• mounted DOM和數(shù)據(jù)掛在完成

36.Vuex 的 5 個(gè)核心屬性是什么?

• state => 基本數(shù)據(jù)

• getters => 從基本數(shù)據(jù)(state)派生的數(shù)據(jù)，相當(dāng)于state的計(jì)算屬性

• mutations => 提交更改數(shù)據(jù)的方法，同步！

• actions => 像一個(gè)裝飾器，包裹mutations，使之可以異步。

• modules => 模塊化Vuex

• 簡(jiǎn)述vuex數(shù)據(jù)傳遞過(guò)程

  頁(yè)面通過(guò)mapAction異步提交事件到action。action通過(guò)commit把對(duì)應(yīng)參數(shù)同步提交到mutation，mutation會(huì)修改state中對(duì)應(yīng)的值。 最后通過(guò)getter把對(duì)應(yīng)值跑出去，在頁(yè)面的計(jì)算屬性中，通過(guò)，mapGetter來(lái)動(dòng)態(tài)獲取state中的值

37.get和post區(qū)別

相同點(diǎn)
get請(qǐng)求和post請(qǐng)求底層都是基于TCP/IP協(xié)議實(shí)現(xiàn)的，使用二者中的任意一個(gè)，都可以實(shí)現(xiàn)客戶端和服務(wù)器端的雙向交互

最本質(zhì)的區(qū)別

• 約定和規(guī)范：

• 規(guī)范：定義GET請(qǐng)求是用來(lái)獲取資源的，也就是進(jìn)行查詢操作的，POST請(qǐng)求是用來(lái)傳輸實(shí)體對(duì)象的， 用于 增刪改操作

• 約定：GET請(qǐng)求 將參數(shù)拼接到URL上進(jìn)行參數(shù)傳遞 POST請(qǐng)求將參數(shù)寫入請(qǐng)求正文中傳遞

非本質(zhì)區(qū)別

• 緩存不同 ，get會(huì)緩存

• 參數(shù)長(zhǎng)度限制不同，get請(qǐng)求的參數(shù)是通過(guò)URL傳遞的，而URL的長(zhǎng)度是有限制的，通常為2K；post請(qǐng)求參數(shù)存放在請(qǐng)求正文中，沒有大小限制

• 回退和刷新不同，get請(qǐng)求可以直接回退和刷新，不會(huì)對(duì)用戶和程序產(chǎn)生影響；post請(qǐng)求如果直接回滾和刷新，數(shù)據(jù)將會(huì)再次提交

• 歷史記錄不同，get請(qǐng)求的參數(shù)會(huì)保存在歷史記錄中，post請(qǐng)求的參數(shù)不會(huì)

• 書簽不同，get請(qǐng)求的地址可以被收藏為書簽，post不會(huì)

38.跨域

• 跨域原因：瀏覽器出于安全考慮保護(hù)資源，同源策略。(協(xié)議、域名、端口號(hào))

• 解決跨域：

• jsonP 但只能使用get 原理-將請(qǐng)求的接口設(shè)置給script標(biāo)簽的src屬性傳遞一個(gè)函數(shù)給后臺(tái)實(shí)現(xiàn)跨域。后臺(tái)響應(yīng)的是一個(gè)函數(shù)調(diào)用

• cors：最常用。

• 反向代理:本地前端發(fā)送到本地后端,不會(huì)跨域,（同源）本地后端接收請(qǐng)求后轉(zhuǎn)發(fā)到其他服務(wù)器（服務(wù)器和服務(wù)器之間不會(huì)跨域）代理是需要路徑中的特殊標(biāo)志。

39.三種存儲(chǔ)的區(qū)別

• cookie  設(shè)置過(guò)期時(shí)間刪除，即使窗口或?yàn)g覽器關(guān)閉

• localStorage 存儲(chǔ)量大，存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不會(huì)丟失除非手動(dòng)刪除

• sessionStorage臨時(shí)存儲(chǔ)，關(guān)閉瀏覽器是存儲(chǔ)內(nèi)容自動(dòng)清除

  存儲(chǔ)大?。?/strong>

• cookie 數(shù)據(jù)大小不能超過(guò)4k

• sessionStorage和localStorage雖然也有存儲(chǔ)大小的限制，單筆cookie大得多，可達(dá)到5m或更大

40.dom如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信

• websocket.SharedWoeket;

• 也可以調(diào)用localStorage、cookies等本地存儲(chǔ)方式；localStorage另一個(gè)瀏覽器上下文里被添加、修改或刪除時(shí)，他都會(huì)觸發(fā)一個(gè)事件，我們通過(guò)監(jiān)聽事件，控制他的值進(jìn)行頁(yè)面信息通信；

• 注意quirks：Safari在無(wú)痕模式下設(shè)置localStorage值時(shí)會(huì)拋出，quotaExceededError的異常

41.請(qǐng)說(shuō)出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法？

• assets文件夾是放靜態(tài)資源；

• components是方組件；

• router是定義路由相關(guān)的配置

• view是視圖

• app.vue是一個(gè)應(yīng)用主組件

• main.js是入口文件

42.$route和$router的區(qū)別

router為VueRouter的實(shí)例，相當(dāng)于一個(gè)全局的路由器對(duì)象，里面含有很多屬性和子對(duì)象，例如history對(duì)象。。。經(jīng)常用的跳轉(zhuǎn)鏈接就可以用this.$router.push，和router-link跳轉(zhuǎn)一樣。

route相當(dāng)于當(dāng)前正在跳轉(zhuǎn)的路由對(duì)象。?？梢詮睦锩娅@取name,path,params,query等

43.虛擬dom實(shí)現(xiàn)原理

• 用JavaScript對(duì)象模擬真實(shí)DOM樹，對(duì)真實(shí)DOM進(jìn)行抽象

• diff算法：比較兩棵虛擬樹的差異

• pach算法：將兩個(gè)虛擬DOM對(duì)象的差異應(yīng)用到真實(shí)的DOM樹

44.普通函數(shù)和箭頭函數(shù)的區(qū)別

• 箭頭函數(shù)沒有原型，原型是undefined

• 箭頭函數(shù)this指向全局對(duì)象，而函數(shù)指向引用對(duì)象

• call，apply，bind方法改變不了箭頭函數(shù)的指向

45.怎樣理解vue單項(xiàng)數(shù)據(jù)流

數(shù)據(jù)總是從父組件傳到子組件，子組件沒有權(quán)利修改父組件傳過(guò)來(lái)的數(shù)據(jù)，只能請(qǐng)求父組件對(duì)原數(shù)據(jù)進(jìn)行修改

46.slot插槽

• slot插槽，可以理解為slot在組件模板中提前占據(jù)了位置，當(dāng)復(fù)用組件時(shí)，使用相關(guān)的slot標(biāo)簽時(shí)，標(biāo)簽里的內(nèi)容就會(huì)自動(dòng)替換組件模板中對(duì)應(yīng)slot標(biāo)簽的位置，作為承載分發(fā)內(nèi)容的出口

• 主要作用是：復(fù)用和擴(kuò)展組件，做一些定制化組件的處理

47.vue常見指令

• v-model 多用于表單元素實(shí)現(xiàn)雙向數(shù)據(jù)綁定

• v-bind：簡(jiǎn)寫為：，動(dòng)態(tài)綁定一些元素的屬性，類型可以是：字符串、對(duì)象或數(shù)組。

• v-on:click 給標(biāo)簽綁定函數(shù)，可以縮寫為@，例如綁定一個(gè)點(diǎn)擊函數(shù) 函數(shù)必須寫在methods里面

• v-for 格式： v-for="字段名 in(of) 數(shù)組json" 循環(huán)數(shù)組或json

• v-show 顯示內(nèi)容

• v-else指令：和v-if指令搭配使用，沒有對(duì)應(yīng)的值。當(dāng)v-if的值false，v-else才會(huì)被渲染出來(lái)

• v-if指令：取值為true/false，控制元素是否需要被渲染

• v-else-if 必須和v-if連用

• v-else指令：和v-if指令搭配使用，沒有對(duì)應(yīng)的值。當(dāng)v-if的值false，v-else才會(huì)被渲染出來(lái)

• v-text 解析文本

• v-html 解析html標(biāo)簽

• v-bind:class 三種綁定方法 1、對(duì)象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、數(shù)組型 '[{red:"isred"},{blue:"isblue"}]'

• v-once 進(jìn)入頁(yè)面時(shí) 只渲染一次 不在進(jìn)行渲染

• v-cloak 防止閃爍

• v-pre 把標(biāo)簽內(nèi)部的元素原位輸出

48.vue中keep-alive 的作用

• < keep-alive >是Vue的內(nèi)置組件，能在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。

• < keep-alive > 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。

關(guān)于“web前端高頻面試題及答案有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“web前端高頻面試題及答案有哪些”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。