js面試題

1、js數(shù)據(jù)類型

基本數(shù)據(jù)類型

Number、String、Boolean、Null、Undefined、Symbol、bigInt

引用數(shù)據(jù)類型

object、Array、Date、Function、RegExp

2、js變量和函數(shù)聲明的提升

在js中變量和函數(shù)的聲明會(huì)提升到最頂部執(zhí)行

函數(shù)的提升高于變量的提升

函數(shù)內(nèi)部如果用 var 聲明了相同名稱的外部變量，函數(shù)將不再向上尋找。

匿名函數(shù)不會(huì)提升。

3、閉包

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)

閉包基本上就是一個(gè)函數(shù)內(nèi)部返回一個(gè)函數(shù)

好處

可以讀取函數(shù)內(nèi)部的變量

將變量始終保持在內(nèi)存中

可以封裝對(duì)象的私有屬性和私有方法

壞處

比較耗費(fèi)內(nèi)存、使用不當(dāng)會(huì)造成內(nèi)存溢出的問(wèn)題

4、== 和 ===的區(qū)別

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

值相等就相等

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

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

5、this

this總是指向函數(shù)的直接調(diào)用者

如果有new關(guān)鍵字，this指向new出來(lái)的對(duì)象

在事件中，this指向觸發(fā)這個(gè)事件的對(duì)象

6、js數(shù)組和對(duì)象的遍歷方式

for in

for

forEach

for-of

7、map與forEach的區(qū)別

forEach 方法，是最基本的方法，就是遍歷與循環(huán)，默認(rèn)有 3 個(gè)傳參：分別是遍歷的數(shù)組內(nèi)

容 item、數(shù)組索引 index、和當(dāng)前遍歷數(shù)組 Array

map 方法，基本用法與 forEach 一致，但是不同的，它會(huì)返回一個(gè)新的數(shù)組，所以 callback

需要有 return 值，如果沒(méi)有，會(huì)返回 undefined

8、箭頭函數(shù)與普通函數(shù)的區(qū)別?

函數(shù)體內(nèi)的 this 對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象

不可以當(dāng)作構(gòu)造函數(shù)，也就是說(shuō)，不可以使用 new 命令，否則會(huì)拋出一個(gè)錯(cuò)誤

不可以使用 arguments 對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。如果要用，可以用 Rest 參數(shù)代替

不可以使用 yield 命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)

9、同源策略

同源指的是域名、協(xié)議、端口號(hào)相同

10、如何解決跨域

jsonp跨域

document.domain + iframe 跨域

nodejs中間件代理跨域

后端在頭部信息里面設(shè)置安全域名

11、嚴(yán)格模式的限制

變量必須聲明后再使用

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

不能使用 with 語(yǔ)句

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

12、es6新增

新增模板字符串

箭頭函數(shù)

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

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

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

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

13、attribute 和 property 的區(qū)別是什么?

attribute 是 dom 元素在文檔中作為 html 標(biāo)簽擁有的屬性

property 就是 dom 元素在 js 中作為對(duì)象擁有的屬性。

對(duì)于 html 的標(biāo)準(zhǔn)屬性來(lái)說(shuō)，attribute 和 property 是同步的，是會(huì)自動(dòng)更新的

但是對(duì)于自定義的屬性來(lái)說(shuō)，他們是不同步的

14、let和const 的區(qū)別是什么?

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

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

不允許重復(fù)聲明

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

15、內(nèi)存泄漏

定義：程序中己動(dòng)態(tài)分配的堆內(nèi)存由于某種原因程序未釋放或無(wú)法釋放引發(fā)的各種問(wèn)題。

js中可能出現(xiàn)的內(nèi)存泄漏情況：結(jié)果：變慢，崩潰，延遲大等

js中可能出現(xiàn)的內(nèi)存泄漏原因

全局變量

dom 清空時(shí)，還存在引用

定時(shí)器未清除

子元素存在引起的內(nèi)存泄露

16、script 引入方式?

html 靜態(tài) <script> 引入

js 動(dòng)態(tài)插入 <script>

<script defer> : 異步加載，元素解析完成后執(zhí)行

<script async> : 異步加載，但執(zhí)行時(shí)會(huì)阻塞元素渲染

17、數(shù)組(array)方法

map : 遍歷數(shù)組，返回回調(diào)返回值組成的新數(shù)組

forEach : 無(wú)法 break ，可以用 try/catch 中 throw new Error 來(lái)停止

filter : 過(guò)濾

some : 有一項(xiàng)返回 true ，則整體為 true

every : 有一項(xiàng)返回 false ，則整體為 false

join : 通過(guò)指定連接符生成字符串

push / pop : 末尾推入和彈出，改變?cè)瓟?shù)組， 返回推入/彈出項(xiàng)

unshift / shift : 頭部推入和彈出，改變?cè)瓟?shù)組，返回操作項(xiàng)

sort(fn) / reverse : 排序與反轉(zhuǎn)，改變?cè)瓟?shù)組

concat : 連接數(shù)組，不影響原數(shù)組， 淺拷貝

slice(start, end) : 返回截?cái)嗪蟮男聰?shù)組，不改變?cè)瓟?shù)組

splice(start,number,value…): 返回刪除元素組成的數(shù)組，value 為插入項(xiàng)，改變?cè)瓟?shù)組

indexOf / lastIndexOf(value, fromIndex) : 查找數(shù)組項(xiàng)，返回對(duì)應(yīng)的下標(biāo)

reduce / reduceRight(fn(prev, cur) ，defaultPrev) : 兩兩執(zhí)行，prev 為上次化簡(jiǎn)函數(shù)的return 值，cur 為當(dāng)前值(從第二項(xiàng)開(kāi)始)

18、JavaScript 深淺拷貝?

淺拷貝

Object.assign

深拷貝

可以通過(guò) JSON.parse(JSON.stringify(object)) 來(lái)解決

19、說(shuō)說(shuō)異步編程的實(shí)現(xiàn)方式?

回調(diào)函數(shù)

優(yōu)點(diǎn)：簡(jiǎn)單、容易理解

缺點(diǎn)：不利于維護(hù)、代碼耦合高

事件監(jiān)聽(tīng)

優(yōu)點(diǎn)：容易理解，可以綁定多個(gè)事件，每個(gè)事件可以指定多個(gè)回調(diào)函數(shù)

缺點(diǎn)：事件驅(qū)動(dòng)型，流程不夠清晰

發(fā)布/訂閱(觀察者模式)

類似于事件監(jiān)聽(tīng)，但是可以通過(guò)‘消息中心’，了解現(xiàn)在有多少發(fā)布者，多少訂閱者

Promise 對(duì)象

優(yōu)點(diǎn)：可以利用 then 方法，進(jìn)行鏈?zhǔn)綄?xiě)法；可以書(shū)寫(xiě)錯(cuò)誤時(shí)的回調(diào)函數(shù)

缺點(diǎn)：編寫(xiě)和理解，相對(duì)比較難

Generator 函數(shù)

優(yōu)點(diǎn)：函數(shù)體內(nèi)外的數(shù)據(jù)交換、錯(cuò)誤處理機(jī)制

缺點(diǎn)：流程管理不方便

async 函數(shù)

優(yōu)點(diǎn)：內(nèi)置執(zhí)行器、更好的語(yǔ)義、更廣的適用性、返回的是 Promise、結(jié)構(gòu)清晰

缺點(diǎn)：錯(cuò)誤處理機(jī)制

20、說(shuō)說(shuō)面向?qū)ο缶幊趟枷?

基本思想是使用對(duì)象，類，繼承，封裝等基本概念來(lái)進(jìn)行程序設(shè)計(jì)

優(yōu)點(diǎn)

易維護(hù)

易擴(kuò)展

開(kāi)發(fā)工作的重用性、繼承性高，降低重復(fù)工作量。

縮短了開(kāi)發(fā)周期

21、項(xiàng)目性能優(yōu)化

減少 HTTP 請(qǐng)求數(shù)

減少 DNS 查詢

使用 CDN

避免重定向

圖片懶加載

減少 DOM 元素?cái)?shù)量

減少 DOM 操作

使用外部 JavaScript 和 CSS

壓縮 JavaScript、CSS、字體、圖片等

優(yōu)化 CSS Sprite

使用 iconfont

多域名分發(fā)劃分內(nèi)容到不同域名

盡量減少 iframe 使用

避免圖片 src 為空

把樣式表放在 link 中

把 JavaScript 放在頁(yè)面底部

22、什么是單線程，和異步的關(guān)系？

單線程 ：只有一個(gè)線程，只能做一件事

原因 ： 避免 DOM 渲染的沖突

瀏覽器需要渲染 DOM

JS 可以修改 DOM 結(jié)構(gòu)

JS 執(zhí)行的時(shí)候，瀏覽器 DOM 渲染會(huì)暫停

兩段 JS 也不能同時(shí)執(zhí)行（都修改 DOM 就沖突了）

webworker 支持多線程，但是不能訪問(wèn) DOM

解決方案 ：異步

23、說(shuō)說(shuō)負(fù)載均衡？

單臺(tái)服務(wù)器共同協(xié)作，不讓其中某一臺(tái)或幾臺(tái)超額工作，發(fā)揮服務(wù)器的最大作用

http 重定向負(fù)載均衡：調(diào)度者根據(jù)策略選擇服務(wù)器以 302 響應(yīng)請(qǐng)求，缺點(diǎn)只有第一次有效果，后續(xù)操作維持在該服務(wù)器 dns 負(fù)載均衡：解析域名時(shí)，訪問(wèn)多個(gè) ip 服務(wù)器中的一個(gè)（可監(jiān)控性較弱）原因 - 避免 DOM 渲染的沖突

反向代理負(fù)載均衡：訪問(wèn)統(tǒng)一的服務(wù)器，由服務(wù)器進(jìn)行調(diào)度訪問(wèn)實(shí)際的某個(gè)服務(wù)器，對(duì)統(tǒng)一的服務(wù)器要求大，性能受到 服務(wù)器群的數(shù)量

24、作用域鏈？

作用域鏈可以理解為一組對(duì)象列表，包含 父級(jí)和自身的變量對(duì)象，因此我們便能通過(guò)作用域鏈訪問(wèn)到父級(jí)里聲明的變量或者函數(shù)

25、什么是原型、原型鏈、繼承？

所有的函數(shù)都有prototype屬性（原型）

所有的對(duì)象都有__proto__屬性

在Javascript中，每個(gè)函數(shù)都有一個(gè)原型屬性prototype指向自身的原型，而由這個(gè)函數(shù)創(chuàng)建的對(duì)象也有一個(gè)proto屬性指向這個(gè)原型，而函數(shù)的原型是一個(gè)對(duì)象，所以這個(gè)對(duì)象也會(huì)有一個(gè)proto指向自己的原型，這樣逐層深入直到Object對(duì)象的原型，這樣就形成了原型鏈。

26、JS垃圾回收機(jī)制是怎樣的？

1.概述

js的垃圾回收機(jī)制是為了防止內(nèi)存泄漏（已經(jīng)不需要的某一塊內(nèi)存還一直存在著），垃圾回收機(jī)制就是不停歇的尋找這些不再使用的變量，并且釋放掉它所指向的內(nèi)存。

在JS中，JS的執(zhí)行環(huán)境會(huì)負(fù)責(zé)管理代碼執(zhí)行過(guò)程中使用的內(nèi)存。

2.變量的生命周期

當(dāng)一個(gè)變量的生命周期結(jié)束之后，它所指向的內(nèi)存就會(huì)被釋放。js有兩種變量，局部變量和全局變量，局部變量是在他當(dāng)前的函數(shù)中產(chǎn)生作用，當(dāng)該函數(shù)結(jié)束之后，該變量?jī)?nèi)存會(huì)被釋放，全局變量的話會(huì)一直存在，直到瀏覽器關(guān)閉為止。

3.js垃圾回收方式

有兩種方式： 標(biāo)記清除、引用計(jì)數(shù)

標(biāo)記清除：大部分瀏覽器使用這種垃圾回收，當(dāng)變量進(jìn)入執(zhí)行環(huán)境(聲明變量）的時(shí)候，垃圾回收器將該變量進(jìn)行了標(biāo)記，當(dāng)該變量離開(kāi)環(huán)境的時(shí)候，將其再度標(biāo)記，隨之進(jìn)行刪除。

引用計(jì)數(shù)：這種方式常常會(huì)引起內(nèi)存的泄露，主要存在于低版本的瀏覽器。它的機(jī)制就是跟蹤某一個(gè)值得引用次數(shù)，當(dāng)聲明一個(gè)變量并且將一個(gè)引用類型賦值給變量得時(shí)候引用次數(shù)加1，當(dāng)這個(gè)變量指向其他一個(gè)時(shí)引用次數(shù)減1，當(dāng)為0時(shí)出發(fā)回收機(jī)制進(jìn)行回收。

27、逐進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

逐進(jìn)增強(qiáng)

針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高版本瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

優(yōu)雅降級(jí)

一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容

vue面試題

1、vue優(yōu)點(diǎn)

輕量級(jí)

速度快

簡(jiǎn)單易學(xué)

低耦合

可重用性

獨(dú)立開(kāi)發(fā)

文檔齊全，且文檔為中文文檔

2、vue父組件向子組件傳遞數(shù)據(jù)

props

3、子組件向父組件傳遞事件

$emit

4、v-show和v-if指令的共同點(diǎn)和不同點(diǎn)

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

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

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

5、如何讓CSS只在當(dāng)前組件中起作用

scoped

6、<keep-alive></keep-alive>的作用是什么

主要是用于需要頻繁切換的組件時(shí)進(jìn)行緩存，不需要重新渲染頁(yè)面

7、如何獲取dom

給dom元素加ref=‘refname’,然后通過(guò)this.$refs.refname進(jìn)行獲取dom元素

8、說(shuō)出幾種vue當(dāng)中的指令和它的用法

v-model

v-on

v-html

v-text

v-once

v-if

v-show

9、vue-loader是什么？它的用途是什么？

vue文件的一個(gè)加載器，將template/js/style轉(zhuǎn)換為js模塊

用途:js可以寫(xiě)es6、style樣式

10、為什么用key

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

11、axios及安裝？

vue項(xiàng)目中使用ajax時(shí)需要axios插件

下載方式cnpm install axios --save

12、v-model的使用

v-model用于表單的雙向綁定，可以實(shí)時(shí)修改數(shù)據(jù)

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

components存放組件

app.vue主頁(yè)面入口

index.js主文件入口

ass存放靜態(tài)資源文件

14、分別簡(jiǎn)述computed和watch的使用場(chǎng)景

用官網(wǎng)的一句話來(lái)說(shuō)，所有需要用到計(jì)算的都應(yīng)該使用計(jì)算屬性。多條數(shù)據(jù)影響一條數(shù)據(jù)時(shí)使用計(jì)算屬性，使用場(chǎng)景購(gòu)物車(chē)。

如果是一條數(shù)據(jù)更改，影響多條數(shù)據(jù)時(shí)，使用watch，使用場(chǎng)景搜索框。

15、v-on可以監(jiān)聽(tīng)多個(gè)方法嗎？

可以，比如 v-on=“onclick,onbure”

16、$nextTick的使用

在data()中的修改后，頁(yè)面中無(wú)法獲取data修改后的數(shù)據(jù)，使用$nextTick時(shí)，當(dāng)data中的數(shù)據(jù)修改后，可以實(shí)時(shí)的渲染頁(yè)面

17、vue組件中data為什么必須是一個(gè)函數(shù)？

因?yàn)閖avaScript的特性所導(dǎo)致，在component中，data必須以函數(shù)的形式存在，不可以是對(duì)象。

組件中的data寫(xiě)成一個(gè)函數(shù)，數(shù)據(jù)以函數(shù)返回值的形式定義，這樣每次復(fù)用組件的時(shí)候，都會(huì)返回一份新的data，相當(dāng)于每個(gè)組件實(shí)例都有自己私有的數(shù)據(jù)空間，他們值負(fù)責(zé)各自維護(hù)數(shù)據(jù)，不會(huì)造成混亂。而單純的寫(xiě)成對(duì)象形式，就是所有組件實(shí)例共用了一個(gè)data，這樣改一個(gè)全部都會(huì)修改。

18、漸進(jìn)式框架的理解

主張最少

可以根據(jù)不同的需求選擇不同的層級(jí)

19、vue在雙向數(shù)據(jù)綁定是如何實(shí)現(xiàn)的？

vue雙向數(shù)據(jù)綁定是通過(guò)數(shù)據(jù)劫持、組合、發(fā)布訂閱模式的方式來(lái)實(shí)現(xiàn)的，也就是說(shuō)數(shù)據(jù)和視圖同步，數(shù)據(jù)發(fā)生變化，視圖跟著變化，視圖變化，數(shù)據(jù)也隨之發(fā)生改變

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

20、單頁(yè)面應(yīng)用和多頁(yè)面應(yīng)用區(qū)別及缺點(diǎn)

單頁(yè)面應(yīng)用（SPA），通俗的說(shuō)就是指只有一個(gè)主頁(yè)面的應(yīng)用，瀏覽器一開(kāi)始就加載所有的js、html、css。所有的頁(yè)面內(nèi)容都包含在這個(gè)主頁(yè)面中。但在寫(xiě)的時(shí)候，還是分開(kāi)寫(xiě)，然后再加護(hù)的時(shí)候有路由程序動(dòng)態(tài)載入，單頁(yè)面的頁(yè)面跳轉(zhuǎn)，僅刷新局部資源。多用于pc端。

多頁(yè)面（MPA），就是一個(gè)應(yīng)用中有多個(gè)頁(yè)面，頁(yè)面跳轉(zhuǎn)時(shí)是整頁(yè)刷新

單頁(yè)面的優(yōu)點(diǎn)：用戶體驗(yàn)好，快，內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面，基于這一點(diǎn)spa對(duì)服務(wù)器壓力較?。磺昂蠖朔蛛x，頁(yè)面效果會(huì)比較酷炫

單頁(yè)面缺點(diǎn)：不利于seo；導(dǎo)航不可用，如果一定要導(dǎo)航需要自行實(shí)現(xiàn)前進(jìn)、后退。初次加載時(shí)耗時(shí)多；頁(yè)面復(fù)雜度提高很多。

21、Vue 項(xiàng)目中為什么要在列表組件中寫(xiě) key，其作用是什么？

key是給每一個(gè)vnode的唯一id,可以依靠key,更準(zhǔn)確, 更快的拿到oldVnode中對(duì)應(yīng)的vnode節(jié)點(diǎn)。

更準(zhǔn)確

因?yàn)閹ey就不是就地復(fù)用了，在sameNode函數(shù) a.key === b.key對(duì)比中可以避免就地復(fù)用的情況。所以會(huì)更加準(zhǔn)確。

更快

利用key的唯一性生成map對(duì)象來(lái)獲取對(duì)應(yīng)節(jié)點(diǎn)，比遍歷方式更快。

22、父組件和子組件生命周期鉤子執(zhí)行順序是什么？

加載渲染過(guò)程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子組件更新過(guò)程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父組件更新過(guò)程

父 beforeUpdate -> 父 updated

銷(xiāo)毀過(guò)程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

23、談一談你對(duì) nextTick 的理解？

當(dāng)你修改了data的值然后馬上獲取這個(gè)dom元素的值，是不能獲取到更新后的值，你需要使用$nextTick這個(gè)回調(diào)，讓修改后的data值渲染更新到dom元素之后在獲取，才能成功。

24、vue組件中data為什么必須是一個(gè)函數(shù)？

因?yàn)镴avaScript的特性所導(dǎo)致，在component中，data必須以函數(shù)的形式存在，不可以是對(duì)象。

組建中的data寫(xiě)成一個(gè)函數(shù)，數(shù)據(jù)以函數(shù)返回值的形式定義，這樣每次復(fù)用組件的時(shí)候，都會(huì)返回一份新的data，相當(dāng)于每個(gè)組件實(shí)例都有自己私有的數(shù)據(jù)空間，它們只負(fù)責(zé)各自維護(hù)的數(shù)據(jù)，不會(huì)造成混亂。而單純的寫(xiě)成對(duì)象形式，就是所有的組件實(shí)例共用了一個(gè)data，這樣改一個(gè)全都改了。

25、vue和jQuery的區(qū)別

jQuery是使用選擇器（$）選取DOM對(duì)象，對(duì)其進(jìn)行賦值、取值、事件綁定等操作，其實(shí)和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對(duì)象，而數(shù)據(jù)和界面是在一起的。比如需要獲取label標(biāo)簽的內(nèi)容：$("lable").val();,它還是依賴DOM元素的值。

Vue則是通過(guò)Vue對(duì)象將數(shù)據(jù)和View完全分離開(kāi)來(lái)了。對(duì)數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM對(duì)象，可以說(shuō)數(shù)據(jù)和View是分離的，他們通過(guò)Vue對(duì)象這個(gè)vm實(shí)現(xiàn)相互的綁定。這就是傳說(shuō)中的MVVM。

26、delete和Vue.delete刪除數(shù)組的區(qū)別

delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了數(shù)組 改變了數(shù)組的鍵值。

27、SPA首屏加載慢如何解決

安裝動(dòng)態(tài)懶加載所需插件；使用CDN資源。

28、vue項(xiàng)目是打包了一個(gè)js文件，一個(gè)css文件，還是有多個(gè)文件？

根據(jù)vue-cli腳手架規(guī)范，一個(gè)js文件，一個(gè)CSS文件。

29、vue更新數(shù)組時(shí)觸發(fā)視圖更新的方法

push()；

pop()；

shift()；

unshift()；

splice()；

sort()；

reverse()

30、什么是 vue 生命周期？有什么作用？

每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過(guò)一系列的初始化過(guò)程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽(tīng)、編譯模板、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過(guò)程中也會(huì)運(yùn)行一些叫做 生命周期鉤子 的函數(shù)，這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)。

31、第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子？

beforeCreate， created， beforeMount， mounted

32、vue獲取數(shù)據(jù)在一般在哪個(gè)周期函數(shù)

created

beforeMount

mounted

33、created和mounted的區(qū)別

created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。

mounted:在模板渲染成html后調(diào)用，通常是初始化頁(yè)面完成后，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。

34、vue生命周期的理解

總共分為8個(gè)階段創(chuàng)建前/后，載入前/后，更新前/后，銷(xiāo)毀前/后。

創(chuàng)建前/后： 在beforeCreated階段，vue實(shí)例的掛載元素$el和數(shù)據(jù)對(duì)象data都為undefined，還未初始化。在created階段，vue實(shí)例的數(shù)據(jù)對(duì)象data有了，$el還沒(méi)有。

載入前/后：在beforeMount階段，vue實(shí)例的$el和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點(diǎn)，data.message還未替換。在mounted階段，vue實(shí)例掛載完成，data.message成功渲染。

更新前/后：當(dāng)data變化時(shí)，會(huì)觸發(fā)beforeUpdate和updated方法。

銷(xiāo)毀前/后：在執(zhí)行destroy方法后，對(duì)data的改變不會(huì)再觸發(fā)周期函數(shù)，說(shuō)明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽(tīng)以及和dom的綁定，但是dom結(jié)構(gòu)依然存在。

35、vuex是什么？

vue框架中狀態(tài)管理。

36、vuex有哪幾種屬性？

有五種，State、 Getter、Mutation 、Action、 Module

state： 基本數(shù)據(jù)(數(shù)據(jù)源存放地)

getters： 從基本數(shù)據(jù)派生出來(lái)的數(shù)據(jù)

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

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

modules ： 模塊化Vuex

37、vue全家桶

vue-cli、vuex、vueRouter、Axios

38、vue-cli 工程常用的 npm 命令有哪些?

npm install 下載 node_modules 資源包的命令

npm run dev 啟動(dòng) vue-cli 開(kāi)發(fā)環(huán)境的 npm 命令

npm run build vue-cli 生成 生產(chǎn)環(huán)境部署資源 的 npm 命令

npm run build–report 用于查看 vue-cli 生產(chǎn)環(huán)境部署資源文件大小的 npm 命令

39、請(qǐng)說(shuō)出 vue-cli 工程中每個(gè)文件夾和文件的用處?

build 文件夾是保存一些 webpack 的初始化配置。

config 文件夾保存一些項(xiàng)目初始化的配置

node_modules 是 npm 加載的項(xiàng)目依賴的模塊

src 目錄是我們要開(kāi)發(fā)的目錄:

assets 用來(lái)放置圖片

components 用來(lái)放組件文件

app.vue 是項(xiàng)目入口文件

main.js 項(xiàng)目的核心文件

40、v-if 和 v-show 有什么區(qū)別

共同點(diǎn)：都是動(dòng)態(tài)顯示 DOM 元素

區(qū)別點(diǎn)：

v-if 是動(dòng)態(tài)的向 DOM 樹(shù)內(nèi)添加或者刪除 DOM 元素

v-show 是通過(guò)設(shè)置 DOM 元素的 display 樣式屬性控制顯隱

v-if 切換有一個(gè)局部編譯/卸載的過(guò)程，切換過(guò)程中合適地銷(xiāo)毀和重建內(nèi)部的事件監(jiān)聽(tīng)和子組件

v-show 只是簡(jiǎn)單的基于 css 切換

性能消耗

v-if 有更高的切換消耗

v-show 有更高的初始渲染消耗

使用場(chǎng)景

v-if 適合運(yùn)營(yíng)條件不大可能改變

v-show 適合頻繁切換

41、v-for 與 v-if 的優(yōu)先級(jí)?

v-for 和 v-if 同時(shí)使用，有一個(gè)先后運(yùn)行的優(yōu)先級(jí)，v-for 比 v-if 優(yōu)先級(jí)更高，這就說(shuō)明在

v-for 每次的循環(huán)賦值中每一次調(diào)用 v-if 的判斷，所以不推薦 v-if 和 v-for 在同一個(gè)標(biāo)簽中同時(shí)使用。

42、 vue 常用的修飾符?

事件修飾符

.stop 阻止事件繼續(xù)傳播

.prevent 阻止標(biāo)簽?zāi)J(rèn)行為

.capture 使用事件捕獲模式，即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理

.self 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)

.once 事件只會(huì)觸發(fā)一次

.passive 告訴瀏覽器你不想阻止事件的默認(rèn)行為

v-model 的修飾符

.lazy 通過(guò)這個(gè)修飾符，轉(zhuǎn)變?yōu)樵?change 事件再同步

.number 自動(dòng)將用戶輸入值轉(zhuǎn)化為數(shù)值類型

.trim 自動(dòng)過(guò)濾用戶輸入的收尾空格

鍵盤(pán)事件修飾符

.enter

.tab

.delete (捕獲“刪除”和“退格”鍵)

.esc

.space

.up

.down

.left

.right

系統(tǒng)修飾符

.ctrl

.alt

.shift

.meta

鼠標(biāo)按鈕修飾符

.left

.right

.middle

43、vue 事件中如何使用 event 對(duì)象?

獲取事件對(duì)象，方法參數(shù)傳遞 $event 。注意在事件中要使用 $ 符號(hào)

<button @click="Event($event)">事件對(duì)象</button>

1

44、組件傳值方式有哪些

父?jìng)髯樱鹤咏M件通過(guò)props[‘xx’] 來(lái)接收父組件傳遞的屬性 xx 的值

子傳父：子組件通過(guò) this.$emit(‘fnName’,value) 來(lái)傳遞,父組件通過(guò)接收 fnName 事件方法來(lái)接收回調(diào)

其他方式：通過(guò)創(chuàng)建一個(gè)bus，進(jìn)行傳值

使用Vuex

45、vue 中子組件調(diào)用父組件的方法?

直接在子組件中通過(guò) this.$parent.event 來(lái)調(diào)用父組件的方法。

在子組件里用$emit()向父組件觸發(fā)一個(gè)事件，父組件監(jiān)聽(tīng)這個(gè)事件就行了。

父組件把方法傳入子組件中，在子組件里直接調(diào)用這個(gè)方法。

46、 如何讓 CSS 只在當(dāng)前組件中起作用？

在組件中的 style 前面加上 scoped

47、如何獲取 dom?

ref="domName" 用法：this.$refs.domName

48、vue路由跳轉(zhuǎn)

獲取方式：點(diǎn)贊+評(píng)論學(xué)習(xí)