本篇文章給大家談?wù)勄岸藇ue面試題2022，以及前端vue面試題目對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、vue常見(jiàn)面試題（3）
• 2、vue前端面試題有哪些呢？
• 3、史上最全前端vue面試題！推薦收藏
• 4、47道基礎(chǔ)的VueJS面試題(附答案)
• 5、vue常見(jiàn)面試題
• 6、vue面試題大全

vue常見(jiàn)面試題（3）

1. 什么是vue的計(jì)算屬性computed

計(jì)算屬性是需要復(fù)雜的邏輯，可以用方法method代替

2.vue-cli提供的幾種腳手架模板

vue-cli 的腳手架項(xiàng)目模板有browserify 和 webpack；

3.組件中傳遞數(shù)據(jù)？

4. vue-router實(shí)現(xiàn)路由懶加載（ 動(dòng)態(tài)加載路由 ）

5. vue-router 的導(dǎo)航鉤子,主要用來(lái)作用是攔截導(dǎo)航,讓他完成跳轉(zhuǎn)或取消

6. 完整的 vue-router 導(dǎo)航解析流程

7. vue-router如何響應(yīng) 路由參數(shù) 的變化？

原來(lái)的組件實(shí)例會(huì)被復(fù)用。這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用。你可以簡(jiǎn)單地 watch (監(jiān)測(cè)變化) $route 對(duì)象：

8.vue-router的幾種實(shí)例方法以及參數(shù)傳遞

name傳遞

to來(lái)傳遞

采用url傳參

9. is的用法（用于動(dòng)態(tài)組件且基于 DOM 內(nèi)模板的限制來(lái)工作。）

is用來(lái)動(dòng)態(tài)切換組件，DOM模板解析

tabletris="my-row"/tr /table

10.vuex是什么？怎么使用？哪種功能場(chǎng)景使用它？

是什么：vue框架中狀態(tài)管理:有五種，分別是 State、 Getter、Mutation 、Action、 Module

使用：新建一個(gè)目錄store，

場(chǎng)景：?jiǎn)雾?yè)應(yīng)用中，組件之間的狀態(tài)。音樂(lè)播放、登錄狀態(tài)、加入購(gòu)物車

vuex的State特性

A、Vuex就是一個(gè)倉(cāng)庫(kù)，倉(cāng)庫(kù)里面放了很多對(duì)象。其中state就是數(shù)據(jù)源存放地，對(duì)應(yīng)于一般Vue對(duì)象里面的data

B、state里面存放的數(shù)據(jù)是響應(yīng)式的，Vue組件從store中讀取數(shù)據(jù)，若是store中的數(shù)據(jù)發(fā)生改變，依賴這個(gè)數(shù)據(jù)的組件也會(huì)發(fā)生更新

C、它通過(guò)mapState把全局的state和getters映射到當(dāng)前組件的computed計(jì)算屬性中

vuex的Getter特性

A、getters可以對(duì)State進(jìn)行計(jì)算操作，它就是Store的計(jì)算屬性

B、雖然在組件內(nèi)也可以做計(jì)算屬性，但是getters可以在多組件之間復(fù)用

C、如果一個(gè)狀態(tài)只在一個(gè)組件內(nèi)使用，是可以不用getters

vuex的Mutation特性

改變store中state狀態(tài)的唯一方法就是提交mutation，就很類似事件。每個(gè)mutation都有一個(gè)字符串類型的事件類型和一個(gè)回調(diào)函數(shù)，我們需要改變state的值就要在回調(diào)函數(shù)中改變。我們要執(zhí)行這個(gè)回調(diào)函數(shù)，那么我們需要執(zhí)行一個(gè)相應(yīng)的調(diào)用方法：store.commit。

Action類似于mutation，不同在于：Action提交的是mutation，而不是直接變更狀態(tài)；Action可以包含任意異步操作，Action函數(shù)接受一個(gè)與store實(shí)例具有相同方法和屬性的context對(duì)象，因此你可以調(diào)用context.commit提交一個(gè)mutation，或者通過(guò)context.state和context.getters來(lái)獲取state和getters。Action通過(guò)store.dispatch方法觸發(fā)：eg。store.dispatch('increment')

vuex的module特性Module其實(shí)只是解決了當(dāng)state中很復(fù)雜臃腫的時(shí)候，module可以將store分割成模塊，每個(gè)模塊中擁有自己的state、mutation、action和getter

vue前端面試題有哪些呢？

文章中給你列舉了部分的面試題，這些都是公司面試常遇到的，還有需要的還可以自己去查閱一下資料

1、active-class是哪個(gè)組件的屬性？嵌套路由怎么定義？

答：vue-router模塊的router-link組件。

2、怎么定義vue-router的動(dòng)態(tài)路由？怎么獲取傳過(guò)來(lái)的動(dòng)態(tài)參數(shù)？

答：在router目錄下的index.js文件中，對(duì)path屬性加上/:id。 使用router對(duì)象的params.id

3、vue-router有哪幾種導(dǎo)航鉤子？

答：三種，一種是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)，作用：跳轉(zhuǎn)前進(jìn)行判斷攔截。第二種：組件內(nèi)的鉤子；第三種：?jiǎn)为?dú)路由獨(dú)享組件

4、scss是什么？安裝使用的步驟是？有哪幾大特性？

答：預(yù)處理css，把css當(dāng)前函數(shù)編寫(xiě)，定義變量,嵌套。 先裝css-loader、node-loader、sass-loader等加載器模塊，在webpack-base.config.js配置文件中加多一個(gè)拓展:extenstion，再加多一個(gè)模塊：module里面test、loader

4.1、scss是什么？在vue.cli中的安裝使用步驟是？有哪幾大特性？

答：css的預(yù)編譯。

使用步驟：

第一步：用npm 下三個(gè)loader（sass-loader、css-loader、node-sass）

第二步：在build目錄找到webpack.base.config.js，在那個(gè)extends屬性中加一個(gè)拓展.scss

第三步：還是在同一個(gè)文件，配置一個(gè)module屬性

第四步：然后在組件的style標(biāo)簽加上lang屬性 ，例如：lang=”scss”

有哪幾大特性:

1、可以用變量，例如（$變量名稱=值）；

2、可以用混合器，例如（）

3、可以嵌套

5、mint-ui是什么？怎么使用？說(shuō)出至少三個(gè)組件使用方法？

答：基于vue的前端組件庫(kù)。npm安裝，然后import樣式和js，vue.use（mintUi）全局引入。在單個(gè)組件局部引入：import {Toast} from ‘mint-ui’。組件一：Toast(‘登錄成功’)；組件二：mint-header；組件三：mint-swiper

6、v-model是什么？怎么使用？ vue中標(biāo)簽怎么綁定事件？

答：可以實(shí)現(xiàn)雙向綁定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model層的data屬性。綁定事件：input @click=doLog() /

7、axios是什么？怎么使用？描述使用它實(shí)現(xiàn)登錄功能的流程？

答：請(qǐng)求后臺(tái)資源的模塊。npm install axios -S裝好，然后發(fā)送的是跨域，需在配置文件中config/index.js進(jìn)行設(shè)置。后臺(tái)如果是Tp5則定義一個(gè)資源路由。js中使用import進(jìn)來(lái)，然后.get或.post。返回在.then函數(shù)中如果成功，失敗則是在.catch函數(shù)中

8、axios+tp5進(jìn)階中，調(diào)用axios.post(‘a(chǎn)pi/user’)是進(jìn)行的什么操作？axios.put(‘a(chǎn)pi/user/8′)呢？

答：跨域，添加用戶操作，更新操作。

9、什么是RESTful API？怎么使用?

答：是一個(gè)api的標(biāo)準(zhǔn)，無(wú)狀態(tài)請(qǐng)求。請(qǐng)求的路由地址是固定的，如果是tp5則先路由配置中把資源路由配置好。標(biāo)準(zhǔn)有：.post .put .delete

10、vuex是什么？怎么使用？哪種功能場(chǎng)景使用它？

答：vue框架中狀態(tài)管理。在main.js引入store，注入。新建了一個(gè)目錄store，….. export 。場(chǎng)景有：?jiǎn)雾?yè)應(yīng)用中，組件之間的狀態(tài)。音樂(lè)播放、登錄狀態(tài)、加入購(gòu)物車

11、mvvm框架是什么？它和其它框架（jquery）的區(qū)別是什么？哪些場(chǎng)景適合？

答：一個(gè)model+view+viewModel框架，數(shù)據(jù)模型model，viewModel連接兩個(gè)

區(qū)別：vue數(shù)據(jù)驅(qū)動(dòng)，通過(guò)數(shù)據(jù)來(lái)顯示視圖層而不是節(jié)點(diǎn)操作。

場(chǎng)景：數(shù)據(jù)操作比較多的場(chǎng)景，更加便捷

12、自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數(shù)？還有哪些鉤子函數(shù)參數(shù)？

答：全局定義指令：在vue對(duì)象的directive方法里面有兩個(gè)參數(shù)，一個(gè)是指令名稱，另外一個(gè)是函數(shù)。組件內(nèi)定義指令：directives

鉤子函數(shù)：bind（綁定事件觸發(fā)）、inserted(節(jié)點(diǎn)插入的時(shí)候觸發(fā))、update（組件內(nèi)相關(guān)更新）

鉤子函數(shù)參數(shù)：el、binding

13、說(shuō)出至少4種vue當(dāng)中的指令和它的用法？

答：v-if：判斷是否隱藏；v-for：數(shù)據(jù)循環(huán)出來(lái)；v-bind:class：綁定一個(gè)屬性；v-model：實(shí)現(xiàn)雙向綁定

14、vue-router是什么？它有哪些組件？

答：vue用來(lái)寫(xiě)路由一個(gè)插件。router-link、router-view

15、導(dǎo)航鉤子有哪些？它們有哪些參數(shù)？

答：導(dǎo)航鉤子有：a/全局鉤子和組件內(nèi)獨(dú)享的鉤子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

參數(shù)：有to（去的那個(gè)路由）、from（離開(kāi)的路由）、next（一定要用這個(gè)函數(shù)才能去到下一個(gè)路由，如果不用就攔截）最常用就這幾種

16、Vue的雙向數(shù)據(jù)綁定原理是什么？

答：vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)。

具體步驟：

第一步：需要observe的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷，包括子屬性對(duì)象的屬性，都加上 setter和getter

這樣的話，給這個(gè)對(duì)象的某個(gè)值賦值，就會(huì)觸發(fā)setter，那么就能監(jiān)聽(tīng)到了數(shù)據(jù)變化

第二步：compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁(yè)面視圖，并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽(tīng)數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動(dòng)，收到通知，更新視圖

第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:

1、在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己

2、自身必須有一個(gè)update()方法

3、待屬性變動(dòng)dep.notice()通知時(shí)，能調(diào)用自身的update()方法，并觸發(fā)Compile中綁定的回調(diào)，則功成身退。

第四步：MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通過(guò)Observer來(lái)監(jiān)聽(tīng)自己的model數(shù)據(jù)變化，通過(guò)Compile來(lái)解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化 - 視圖更新；視圖交互變化(input) - 數(shù)據(jù)model變更的雙向綁定效果。

ps：16題答案同樣適合”vue data是怎么實(shí)現(xiàn)的？”此面試題。

17、請(qǐng)?jiān)敿?xì)說(shuō)下你對(duì)vue生命周期的理解？

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

創(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方法。

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

18、請(qǐng)說(shuō)下封裝 vue 組件的過(guò)程？

答：首先，組件可以提升整個(gè)項(xiàng)目的開(kāi)發(fā)效率。能夠把頁(yè)面抽象成多個(gè)相對(duì)獨(dú)立的模塊，解決了我們傳統(tǒng)項(xiàng)目開(kāi)發(fā)：效率低、難維護(hù)、復(fù)用性等問(wèn)題。

然后，使用Vue.extend方法創(chuàng)建一個(gè)組件，然后使用Vue.component方法注冊(cè)組件。子組件需要數(shù)據(jù)，可以在props中接受定義。而子組件修改好數(shù)據(jù)后，想把數(shù)據(jù)傳遞給父組件?？梢圆捎胑mit方法。

19、你是怎么認(rèn)識(shí)vuex的？

答：vuex可以理解為一種開(kāi)發(fā)模式或框架。比如PHP有thinkphp，java有spring等。

通過(guò)狀態(tài)（數(shù)據(jù)源）集中管理驅(qū)動(dòng)組件的變化（好比spring的IOC容器對(duì)bean進(jìn)行集中管理）。

應(yīng)用級(jí)的狀態(tài)集中放在store中； 改變狀態(tài)的方式是提交mutations，這是個(gè)同步的事物； 異步邏輯應(yīng)該封裝在action中。

20、vue-loader是什么？使用它的用途有哪些？

答：解析.vue文件的一個(gè)加載器，跟template/js/style轉(zhuǎn)換成js模塊。

用途：js可以寫(xiě)es6、style樣式可以scss或less、template可以加jade等

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

答：assets文件夾是放靜態(tài)資源；components是放組件；router是定義路由相關(guān)的配置;view視圖；app.vue是一個(gè)應(yīng)用主組件；main.js是入口文件

22、vue.cli中怎樣使用自定義的組件？有遇到過(guò)哪些問(wèn)題嗎？

答：第一步：在components目錄新建你的組件文件（smithButton.vue），script一定要export default {

第二步：在需要用的頁(yè)面（組件）中導(dǎo)入：import smithButton from ‘../components/smithButton.vue’

第三步：注入到vue的子組件的components屬性上面,components:{smithButton}

第四步：在template視圖view中使用，smith-button /smith-button

問(wèn)題有：smithButton命名，使用的時(shí)候則smith-button。

23、聊聊你對(duì)Vue.js的template編譯的理解？

答：簡(jiǎn)而言之，就是先轉(zhuǎn)化成AST樹(shù)，再得到的render函數(shù)返回VNode（Vue的虛擬DOM節(jié)點(diǎn)）

詳情步驟：

首先，通過(guò)compile編譯器把template編譯成AST語(yǔ)法樹(shù)（abstract syntax tree 即 源代碼的抽象語(yǔ)法結(jié)構(gòu)的樹(shù)狀表現(xiàn)形式），compile是createCompiler的返回值，createCompiler是用以創(chuàng)建編譯器的。另外compile還負(fù)責(zé)合并option。

然后，AST會(huì)經(jīng)過(guò)generate（將AST語(yǔ)法樹(shù)轉(zhuǎn)化成render funtion字符串的過(guò)程）得到render函數(shù)，render的返回值是VNode，VNode是Vue的虛擬DOM節(jié)點(diǎn)，里面有（標(biāo)簽名、子節(jié)點(diǎn)、文本等等）

史上最全前端vue面試題！推薦收藏

1.為什么會(huì)形成跨域？

不是一個(gè)源的文件操作另一個(gè)源的文件就會(huì)形成跨域。當(dāng)請(qǐng)求端的協(xié)議、域名、端口號(hào)和服務(wù)器的協(xié)議、域名、端口號(hào)有一個(gè)不一致就會(huì)發(fā)生跨域。

解決方法：安裝插件

Pip install django-cors-headers

2.vuex的工作流程？

① 在vue組件里面，通過(guò)dispatch來(lái)出發(fā)actions提交修改數(shù)據(jù)的操作。

② 然后再通過(guò)actions的commit來(lái)出發(fā)mutations來(lái)修改數(shù)據(jù)。

③ mutations接收到commit的請(qǐng)求，就會(huì)自動(dòng)通過(guò)Mutate來(lái)修改state（數(shù)據(jù)中心里面的數(shù)據(jù)狀態(tài)）里面的數(shù)據(jù)。

④ 最后由store觸發(fā)每一個(gè)調(diào)用它的組件更新。

3.vuex是什么？怎么使用？

vuex是一個(gè)專為vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。使用:store,getters,mutations,actions,modules詳細(xì)使用寫(xiě)法請(qǐng)見(jiàn)：

4.vuex中的數(shù)據(jù)在頁(yè)面刷新后數(shù)據(jù)消失怎么解決？

使用sessionStorage或localStorage存儲(chǔ)數(shù)據(jù);也可以引入vuex-persist插件

5.在vue中，如何阻止事件冒泡和默認(rèn)行為？

在綁定事件時(shí)，在指令后邊加上修飾符.stop來(lái)阻止冒泡，.prevent來(lái)阻止默認(rèn)行為

6.深拷貝與淺拷貝？

假設(shè)B復(fù)制A，修改A的時(shí)候，看B是否變化：B變了是淺拷貝（修改堆內(nèi)存中的同一個(gè)值），沒(méi)變是深拷貝（修改堆內(nèi)存中不同的值）。淺拷貝只是增加了一個(gè)指針指向已存在的內(nèi)存地址，深拷貝是增加了一個(gè)指針并申請(qǐng)了一個(gè)新的內(nèi)存，使這個(gè)增加的指針指向這個(gè)新的內(nèi)存。深拷貝和淺拷貝最根本的區(qū)別在于是否真正獲取一個(gè)對(duì)象的復(fù)制實(shí)體，而不是引用。

7.vue的生命周期？

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）組件是否激活調(diào)用

8. keep-alive: 組件緩存

router.js中:

meta: {keepAlive:true} // 需要被緩存

鉤子執(zhí)行順序：created - mounted - actived

include表示需要緩存的頁(yè)面；exclude表示不需要緩存的頁(yè)面。如果兩個(gè)同時(shí)設(shè)置，exclude優(yōu)先級(jí)更 改，則組件不會(huì)被緩存。

應(yīng)用場(chǎng)景： 用戶在某個(gè)列表頁(yè)面選擇篩選條件過(guò)濾出一份數(shù)據(jù)列表，由列表頁(yè)面進(jìn)入數(shù)據(jù)詳情頁(yè)面，再返回 該列表頁(yè)，我們希望列表頁(yè)可以保留用戶的篩選狀態(tài)。

9.vue傳值方式？

props $emit() $on() $parent $children $listener $attr

10. $on 兄弟組件傳值

$emit 分發(fā)

$on 監(jiān)聽(tīng)

$off 取消監(jiān)聽(tīng)

$once 一次性監(jiān)聽(tīng)一個(gè)事件

在js文件中定義一個(gè)中央事件總線Bus，并暴露出來(lái)

具體的實(shí)現(xiàn)方式：

使用Bus的時(shí)候在接收Bus的組件的beforeDestroy函數(shù)中銷毀Bus，否則會(huì)一直疊加調(diào)用這個(gè)方法。

應(yīng)用場(chǎng)景：“退出登錄” - ①點(diǎn)擊退出登錄；②修改密碼后自動(dòng)退出登錄

11.組件跨級(jí)傳值

$attrs a-b-c

$listeners 監(jiān)聽(tīng)

12.vue事件修飾符有哪些？

.stop .prevent .self .once .passive .sync

13.箭頭函數(shù)中的this？

不具有this綁定，但函數(shù)體可以使用this，這個(gè)this指向的是箭頭函數(shù)當(dāng)前所處的詞法環(huán)境中的this對(duì)象。

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

如果不是函數(shù)的話，每個(gè)組件的data都是內(nèi)存的同一個(gè)地址，一個(gè)數(shù)據(jù)改變了其他也改變了，當(dāng)他是一個(gè)函數(shù)時(shí)，每個(gè)組件實(shí)例都有自己的作用域，每個(gè)實(shí)例相互獨(dú)立，就不會(huì)互相影響。

16.v-if 和 v-show區(qū)別？

v-if 是對(duì)標(biāo)簽的創(chuàng)建與銷毀， v-show 則僅在初始化時(shí)加載一次，v-if 開(kāi)銷相對(duì)來(lái)說(shuō)比v-show 大；

v-if 是惰性的；v-show 做的僅是簡(jiǎn)單的css切換。

17.v-text 與 v-html區(qū)別？

v-text 用于普通文本，不能解析html；

v-html 反之。

18.v-for key的作用？

使用v-for更新渲染過(guò)的數(shù)據(jù)，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序改變，vue將不是移動(dòng)DOM元素來(lái)匹配數(shù)據(jù)項(xiàng)的改變，而是簡(jiǎn)單地復(fù)用此處每個(gè)元素，并確保在特定索引下顯示已被渲染過(guò)的每個(gè)元素。key屬性類型只能是string或number。

key的特殊屬性主要用在虛擬DOM算法，在新舊node對(duì)比時(shí)辨識(shí)VNods。如不使用key，vue會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類型元素的算法，它會(huì)基于key的變化重新排列元素順序。

19.Scss是什么？在vue-cli中安裝步驟？有哪幾大特性？

npm 下載loader （sass-loader,css-loader,node-sass）,在webpack中配置extends屬性（加.scss拓展） Vscode中可在擴(kuò)展中下載;

特性：可以用變量，可以用混合器，可以嵌套等。

20.vue獲取dom？

ref

21.vue初始化頁(yè)面閃動(dòng)問(wèn)題？

webpack、vue-router

v-cloak css:[v-cloak]:display:none

22.什么是vue-router？

vue router 是官方路由管理器。

主要功能：路由嵌套，模塊化 基于組件路由配置，路由參數(shù)、查詢、通配符，細(xì)粒度導(dǎo)航控制，自定義的滾動(dòng)條行為等。

23.vue路由傳參，接收？

傳： this.$router.push({path:'', query(params):{}})

接：this.$router.query.xxx

24.防抖和節(jié)流？

節(jié)流是一定時(shí)間內(nèi)執(zhí)行一次函數(shù)，多用在scroll事件上；

防抖是在一定時(shí)間內(nèi)執(zhí)行最后一次的函數(shù)，多用在input輸入操作，表單提交等。

25.如何讓scss只在當(dāng)前組件中起作用？

47道基礎(chǔ)的VueJS面試題(附答案)

1、什么是MVVM框架？它適用于哪些場(chǎng)景？

MVVM框架是一個(gè) Model-View-View Model框架，其中 ViewModel連接模型Model）和視圖（View）。

在數(shù)據(jù)操作比較多的場(chǎng)景中，MVVM框架更合適，有助于通過(guò)操作數(shù)據(jù)渲染頁(yè)面。

2、active- class是哪個(gè)組件的屬性？

它是 vue-router模塊的 router-link組件的屬性。

3、如何定義Vue- router的動(dòng)態(tài)路由？

在靜態(tài)路由名稱前面添加冒號(hào)，例如，設(shè)置id動(dòng)態(tài)路由參數(shù)，為路由對(duì)象的path屬性設(shè)置/:id。

4、如何獲取傳過(guò)來(lái)的動(dòng)態(tài)參數(shù)？

在組件中，使用$router對(duì)象的 params.id，即 $route.params.id 。

5、vue- router有哪幾種導(dǎo)航鉤子？

有3種。

第一種是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)。作用是跳轉(zhuǎn)前進(jìn)行判斷攔截。

第二種是組件內(nèi)的鉤子。

第三種是單獨(dú)路由獨(dú)享組件。

6、mint-ui是什么？如何使用？

它是基于 Vue.js的前端組件庫(kù)。用npm安裝，然后通過(guò) import導(dǎo)入樣式和JavaScript代碼。vue.use(mintUi)用于實(shí)現(xiàn)全局引入， import {Toast} from ' mint-ui'用于在單個(gè)組件局部引入。

7、V-model是什么？有什么作用？

v- model是 Vue. js中的一條指令，可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。

8、Vue.js中標(biāo)簽如何綁定事件？

綁定事件有兩種方式。

第一種，通過(guò)v-on指令， 。

第二種，通過(guò)@語(yǔ)法糖， input@ click= doLog()/。

9、vuex是什么？如何使用？在哪種功能場(chǎng)景中使用它？

vuex是針對(duì) Vue. js框架實(shí)現(xiàn)的狀態(tài)管理系統(tǒng)。

為了使用vuex，要引入 store，并注入Vue.js組件中，在組件內(nèi)部即可通過(guò)$ ostore訪問(wèn) store對(duì)象。

使用場(chǎng)景包括：在單頁(yè)應(yīng)用中，用于組件之間的通信，例如音樂(lè)播放、登錄狀態(tài)管理、加入購(gòu)物車等。

10、如何實(shí)現(xiàn)自定義指令？它有哪些鉤子函數(shù)？還有哪些鉤子函數(shù)參數(shù)？

自定義指令包括以下兩種。

它有如下鉤子函數(shù)。

鉤子函數(shù)的參數(shù)如下。

11、至少說(shuō)出vue.js中的4種指令和它們的用法。

相關(guān)指令及其用法如下。

12、Vue-router是什么？它有哪些組件？

它是 Vue. js的路由插件。組件包括 router-link和 router-vIew。

13、導(dǎo)航鉤子有哪些？它們有哪些參數(shù)？

導(dǎo)航鉤子又稱導(dǎo)航守衛(wèi)，又分為全局鉤子、單個(gè)路由獨(dú)享鈞子和組件級(jí)鈞子。

全局鉤子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。

單個(gè)路由獨(dú)享鉤子有 beforeEnter。

組件級(jí)鉤子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。

它們有以下參數(shù)。

14、Vue.js的雙向數(shù)據(jù)綁定原理是什么？

具體步驟如下。

（1）對(duì)需要觀察的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷，包括子屬性對(duì)象的屬性，設(shè)置set和get特性方法。當(dāng)給這個(gè)對(duì)象的某個(gè)值賦值時(shí)，會(huì)觸發(fā)綁定的set特性方法，于是就能監(jiān)聽(tīng)到數(shù)據(jù)變化。

（4）MVVM是數(shù)據(jù)綁定的入口，整合了 Observer、 Compile和 Watcher三者，通過(guò)Observer來(lái)監(jiān)聽(tīng)自己的 model數(shù)據(jù)變化，通過(guò) Compile來(lái)解析編譯模板指令，最終利用Watcher搭起 Observer和 Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化通知視圖更新的效果。利用視圖交互，變化更新數(shù)據(jù) model變更的雙向綁定效果。

15、請(qǐng)?jiān)敿?xì)說(shuō)明你對(duì)Vue.js生命周期的理解。

總共分為8個(gè)階段，分別為 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。

當(dāng)使用組件的kep- alive功能時(shí)，增加以下兩個(gè)周期。

Vue2.5.0版本新增了一個(gè)周期鉤子：ErrorCaptured，當(dāng)捕獲一個(gè)來(lái)自子孫組件的錯(cuò)誤時(shí)調(diào)用。

16、請(qǐng)描述封裝Vue組件的作用過(guò)程。

組件可以提升整個(gè)項(xiàng)目的開(kāi)發(fā)效率，能夠把頁(yè)面抽象成多個(gè)相對(duì)獨(dú)立的模塊，解決了傳統(tǒng)項(xiàng)目開(kāi)發(fā)中效率低、難維護(hù)、復(fù)用性等問(wèn)題。

使用Vue.extend方法創(chuàng)建一個(gè)組件，使用Vue.component方法注冊(cè)組件。子組件需要數(shù)據(jù)，可以在 props中接收數(shù)據(jù)。而子組件修改妤數(shù)據(jù)后，若想把數(shù)據(jù)傳遞給父組件，可以采用emit方法。

17、你是怎樣認(rèn)識(shí)vuex的？

vuex可以理解為一種開(kāi)發(fā)模式或框架。它是對(duì) Vue. js框架數(shù)據(jù)層面的擴(kuò)展。通過(guò)狀態(tài)（數(shù)據(jù)源）集中管理驅(qū)動(dòng)組件的變化。應(yīng)用的狀態(tài)集中放在 store中。改變狀態(tài)的方式是提交 mutations，這是個(gè)同步的事務(wù)。異步邏輯應(yīng)該封裝在 action中。

18、Vue- loader是什么？它的用途有哪些？

它是解析.vue文件的一個(gè)加載器，可以將 template/js/style轉(zhuǎn)換成 JavaScript模塊。

用途是通過(guò) vue-loader, JavaScript可以寫(xiě) EMAScript 6語(yǔ)法， style樣式可以應(yīng)用scss或less, template可以添加jade語(yǔ)法等。

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

assets文件夾存放靜態(tài)資源；components存放組件；router定義路由相關(guān)的配置；view是視圖；app. vue是一個(gè)應(yīng)用主組件；main.js是入口文件。

20、在Vue.cli中怎樣使用自定義組件？在使用過(guò)程中你遇到過(guò)哪些問(wèn)題？

具體步驟如下。

（1）在 components目錄中新建組件文件，腳本一定要導(dǎo)出暴露的接口。

（2）導(dǎo)入需要用到的頁(yè)面（組件）。

（3）將導(dǎo)入的組件注入uejs的子組件的 components屬性中。

（4）在 template的視圖中使用自定義組件。

21、談?wù)勀銓?duì)vue.js的 template編譯的理解。

簡(jiǎn)而言之，就是首先轉(zhuǎn)化成AST（ Abstract Syntax Tree，抽象語(yǔ)法樹(shù)），即將源代碼語(yǔ)法結(jié)構(gòu)抽象成樹(shù)狀表現(xiàn)形式，然后通過(guò) render函數(shù)進(jìn)行渲染，并返回VNode（ Vue. js的虛擬DOM節(jié)點(diǎn)）。

詳細(xì)步驟如下。

（1）通過(guò) compile編譯器把 template編譯成AST, compile是 create Compiler的返回值， createCompiler用來(lái)創(chuàng)建編譯器。另外， compile還負(fù)責(zé)合并 option。

（2）AST會(huì)經(jīng)過(guò) generate（將AST轉(zhuǎn)化成 render funtion字符串的過(guò)程）得到 render函數(shù)， render的返回值是 VNode, VNode是 Vue.Js的虛擬DOM節(jié)點(diǎn)，里面有標(biāo)簽名子節(jié)點(diǎn)、文本等。

22、說(shuō)一下Vue.js中的MVVM模式。

MVVM模式即 Model- View- ViewModel模式。

Vue.js是通過(guò)數(shù)據(jù)驅(qū)動(dòng)的， Vue. js實(shí)例化對(duì)象將DOM和數(shù)據(jù)進(jìn)行綁定，一旦綁定，和數(shù)據(jù)將保持同步，每當(dāng)數(shù)據(jù)發(fā)生變化，DOM也會(huì)隨著變化。

ViewModel是Vue.js的核心，它是 Vue.js的一個(gè)實(shí)例。Vue.js會(huì)針對(duì)某個(gè)HTML元素進(jìn)行實(shí)例化，這個(gè)HTML元素可以是body，也可以是某個(gè)CSS選擇器所指代的元素。

DOM Listeners和 Data Bindings是實(shí)現(xiàn)雙向綁定的關(guān)鍵。DOM Listeners監(jiān)聽(tīng)頁(yè)面所有View層中的DOM元素，當(dāng)發(fā)生變化時(shí)，Model層的數(shù)據(jù)隨之變化。Data Bindings會(huì)監(jiān)聽(tīng) Model層的數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，View層的DOM元素也隨之變化。

23、v-show指令和v-if指令的區(qū)別是什么？

v-show與v-if都是條件渲染指令。不同的是，無(wú)論v-show的值為true或 false，元素都會(huì)存在于HTML頁(yè)面中；而只有當(dāng)v-if的值為true時(shí)，元素才會(huì)存在于HTML頁(yè)面中。v-show指令是通過(guò)修改元素的 style屬性值實(shí)現(xiàn)的。

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

在每一個(gè)Vue.js組件中都可以定義各自的CSS、 JavaScript代碼。如果希望組件內(nèi)寫(xiě)的CSS只對(duì)當(dāng)前組件起作用，只需要在Style標(biāo)簽添加Scoped屬性，即 。

25、如何創(chuàng)建vue.js組件？

在vue.js中，組件要先注冊(cè)，然后才能使用。具體代碼如下

26、如何實(shí)現(xiàn)路由嵌套？如何進(jìn)行頁(yè)面跳轉(zhuǎn)？

路由嵌套會(huì)將其他組件渲染到該組件內(nèi)，而不是使整個(gè)頁(yè)面跳轉(zhuǎn)到 router-view定義組件渲染的位置。要進(jìn)行頁(yè)面跳轉(zhuǎn)，就要將頁(yè)面渲染到根組件內(nèi)，可做如下配置。

首先，實(shí)例化根組件，在根組件中定義組件渲染容器。然后，掛載路由，當(dāng)切換路由時(shí)，將會(huì)切換整個(gè)頁(yè)面。

27、ref屬性有什么作用？

有時(shí)候，為了在組件內(nèi)部可以直接訪問(wèn)組件內(nèi)部的一些元素，可以定義該屬性此時(shí)可以在組件內(nèi)部通過(guò)this. $refs屬性，更快捷地訪問(wèn)設(shè)置ref屬性的元素。這是一個(gè)原生的DOM元素，要使用原生 DOM API操作它們，例如以下代碼。

注意：在Ve2.0中，ref屬性替代了1.0版本中v-el指令的功能。

28、Vue. js是什么？

Vue. js的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)式的數(shù)據(jù)綁定的組件開(kāi)發(fā)。

29、描述vue.js的一些特性。

Vue.js有以下持性。

（1）MVVM模式。

數(shù)據(jù)模型（ Model）發(fā)生改變，視圖（View）監(jiān)聽(tīng)到變化，也同步改變；視圖（View）發(fā)生改變，數(shù)據(jù)模型（ Model）監(jiān)聽(tīng)到改變，也同步改變。

使用MVVM模式有幾大好處。

（2）組件化開(kāi)發(fā)

（3）指令系統(tǒng)

（4）Vue2.0開(kāi)始支持虛擬DOM。

但在Vue1.0中，操作的是真實(shí)DOM元素而不是虛擬DOM，虛擬DOM可以提升頁(yè)面的渲染性能。

30、描述vue.js的特點(diǎn)。

Vue. js有以下特點(diǎn)。

31、在vue.js中如何綁定事件？

通過(guò)在v-on后跟事件名稱=“事件回調(diào)函數(shù)( )”的語(yǔ)法綁定事件。事件回調(diào)函數(shù)的參數(shù)集合( )可有可無(wú)。如果存在參數(shù)集合( )，事件回調(diào)函數(shù)的參數(shù)需要主動(dòng)傳遞，使用事件對(duì)象要傳遞 $event。當(dāng)然，此時(shí)也可以傳遞一些其他自定義數(shù)據(jù)。如果沒(méi)有參數(shù)集合，此時(shí)事件回調(diào)函數(shù)有一個(gè)默認(rèn)參數(shù)，就是事件對(duì)象。事件回調(diào)函數(shù)要定義在組件的 methods屬性中，作用域是 Vue. js實(shí)例化對(duì)象，因此在方法中，可以通過(guò)this使用 Vue. js中的數(shù)據(jù)以及方法，也可以通過(guò)@語(yǔ)法糖快速綁定事件，如@事件名稱=“事件回調(diào)函數(shù)( )”。

32、請(qǐng)說(shuō)明 組件的作用。

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

keep-alive是一個(gè)抽象組件，它自身不會(huì)渲染一個(gè)DOM元素，也不會(huì)出現(xiàn)在父組件鏈中。

當(dāng)在 內(nèi)切換組件時(shí)，它的 activated和 deactivated這兩個(gè)生命周期鈞子函數(shù)將會(huì)執(zhí)行。

33、axios是什么？如何使用它？

axios是在vue2.0中用來(lái)替換 vue-resource.js插件的一個(gè)模塊，是一個(gè)請(qǐng)求后臺(tái)的模。

用 npm install axios安裝 axios?；?EMAScript 6 的 EMAScript Module規(guī)范，通過(guò) import關(guān)鍵字將 axios導(dǎo)入，并添加到 Vue. js類的原型中。這樣每個(gè)組件（包括vue.js實(shí)例化對(duì)象）都將繼承該方法對(duì)象。它定義了get、post等方法，可以發(fā)送get或者post請(qǐng)求。在then方法中注冊(cè)成功后的回調(diào)函數(shù)，通過(guò)箭頭函數(shù)的作用域特征，可以直接訪問(wèn)組件實(shí)例化對(duì)象，存儲(chǔ)返回的數(shù)據(jù)。

34、在 axios中，當(dāng)調(diào)用 axios.post('api/user'）時(shí)進(jìn)行的是什么操作？

當(dāng)調(diào)用post方法表示在發(fā)送post異步請(qǐng)求。

35、sass是什么？如何在ue中安裝和使用？

sass是一種CSS預(yù)編譯語(yǔ)言安裝和使用步驟如下。

（1）用npm安裝加載程序（ sass-loader、 css-loader等加載程序)。

（2）在 webpack. config. js中配置sass加載程序。

（3）在組件的 style標(biāo)簽中加上lang屬性，例如lang="scss"。

36、如何在 Vue. js中循環(huán)插入圖片？

對(duì)“src”屬性插值將導(dǎo)致404請(qǐng)求錯(cuò)誤。應(yīng)使用 v-bind:src格式代替。

代碼如下：

vue常見(jiàn)面試題

1.什么是vue的生命周期？

Vue實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是生命周期。也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載DOM-渲染、更新-渲染、卸載等一系列過(guò)程，我們稱這是Vue的生命周期。

2.vue生命周期的作用是什么？

它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)vue實(shí)例的過(guò)程時(shí)更容易形成好的邏輯。

3.Vue生命周期總共有幾個(gè)階段？

它可以總共分為8個(gè)階段：創(chuàng)建前/后,載入前/后，更新前/后，銷毀前/銷毀后

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

第一次頁(yè)面加載時(shí)會(huì)觸發(fā)beforeCreate,created,beforeMount,mounted

5.DOM渲染在哪個(gè)周期中就已經(jīng)完成？

DOM渲染在mounted中就已經(jīng)完成了

6.生命周期鉤子的一些使用方法：

1.beforecreate:可以在加個(gè)loading事件，在加載實(shí)例是觸發(fā)

2.created:初始化完成時(shí)的事件寫(xiě)在這里，如在這結(jié)束loading事件，異步請(qǐng)求也適宜在這里調(diào)用

3.mounted:掛載元素，獲取到dom節(jié)點(diǎn)

4.updated:如果對(duì)數(shù)據(jù)統(tǒng)一處理，在這里寫(xiě)上相應(yīng)函數(shù)

5.beforeDestroy:可以一個(gè)確認(rèn)停止事件的確認(rèn)框

6.nextTick:更新數(shù)據(jù)后立即操作dom

7.v-show與v-if的區(qū)別

v-show是css切換，v-if是完整的銷毀和重新創(chuàng)建

使用頻繁切換時(shí)用v-show,運(yùn)行時(shí)較少改變時(shí)用v-if

V-if=’false’v-if是條件渲染，當(dāng)false的時(shí)候不會(huì)渲染

使用v-if的時(shí)候，如果值為false，那么頁(yè)面將不會(huì)有這個(gè)html標(biāo)簽生成

v-show則是不管值是為true還是false，html元素都會(huì)存在，只是css中的display顯示或隱藏

v-show 僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來(lái)回切換；而v-if會(huì)控制這個(gè) DOM 節(jié)點(diǎn)的存在與否。當(dāng)我們需要經(jīng)常切換某個(gè)元素的顯示/隱藏時(shí)，使用v-show會(huì)更加節(jié)省性能上的開(kāi)銷；當(dāng)只需要一次顯示或隱藏時(shí)，使用v-if更加合理。

8.開(kāi)發(fā)中常用的指令有哪些?

v-model:一般用在表達(dá)輸入，很輕松的實(shí)現(xiàn)表單控件和數(shù)據(jù)的雙向綁定

v-html：更新元素的innerHTML

v-show與v-if：條件渲染，注意二者區(qū)別

v-on:click:可以簡(jiǎn)寫(xiě)為@click,@綁定一個(gè)事件。如果事件觸發(fā)了，就可以指定事件的處理函數(shù)

v-for：基于源數(shù)據(jù)多次渲染元素或模板

v-bind:當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于DOM語(yǔ)法

v-bind:title=”msg”簡(jiǎn)寫(xiě)：title="msg"

9.綁定class的數(shù)組用法

1.對(duì)象方法v-bind:class="{'orange':isRipe, 'green':isNotRipe}”

2.數(shù)組方法v-bind:class="[class1,class2]"

3.行內(nèi)v-bind:style="{color:color,fontSize:fontSize+'px'}”

10.路由跳轉(zhuǎn)方式

1.router-link標(biāo)簽會(huì)渲染為標(biāo)簽，咋填template中的跳轉(zhuǎn)都是這種；

2.另一種是編輯是導(dǎo)航，也就是通過(guò)js跳轉(zhuǎn)比如router.push('/home')

12. computed和watch有什么區(qū)別

computed

computed是計(jì)算屬性，也就是計(jì)算值，它更多用于計(jì)算值的場(chǎng)景

computed具有緩存性，computed的值在getter執(zhí)行后是會(huì)緩存的，只有在它依賴的屬性值改變之后，下一次獲取computed的值時(shí)重新調(diào)用對(duì)應(yīng)的getter來(lái)計(jì)算

computed適用于計(jì)算比較消耗性能的計(jì)算場(chǎng)景

watch

watch更多的是[觀察]的作用，類似于某些數(shù)據(jù)的監(jiān)聽(tīng)回調(diào)，用于觀察props $emit或者本組件的值，當(dāng)數(shù)據(jù)變化時(shí)來(lái)執(zhí)行回調(diào)進(jìn)行后續(xù)操作

無(wú)緩存性，頁(yè)面重新渲染時(shí)值不變化也會(huì)執(zhí)行

小結(jié)

當(dāng)我們要進(jìn)行數(shù)值計(jì)算，而且依賴于其他數(shù)據(jù)，那么把這個(gè)數(shù)據(jù)設(shè)計(jì)為computed

如果你需要在某個(gè)數(shù)據(jù)變化時(shí)做一些事情，使用watch來(lái)觀察這個(gè)數(shù)據(jù)變化。

13. vue組件的scoped屬性的作用

在style標(biāo)簽上添加scoped屬性，以表示它的樣式作用于當(dāng)下的模塊，很好的實(shí)現(xiàn)了樣式私有化的目的；

但是也得慎用：樣式不易（可）修改，而很多時(shí)候，我們是需要對(duì)公共組件的樣式做微調(diào)的；

解決辦法：

①：使用混合型的css樣式：（混合使用全局跟本地的樣式） /* 全局樣式 */ /* 本地樣式 */

②：深度作用選擇器（）如果你希望 scoped 樣式中的一個(gè)選擇器能夠作用得“更深”，例如影響子組件，你可以使用 操作符： .a .b { /* ... */ }

14. vue是漸進(jìn)式的框架的理解：( 主張最少,沒(méi)有多做職責(zé)之外的事 )

Vue的核心的功能，是一個(gè)視圖模板引擎，但這不是說(shuō)Vue就不能成為一個(gè)框架。如下圖所示，這里包含了Vue的所有部件，在聲明式渲染（視圖模板引擎）的基礎(chǔ)上，我們可以通過(guò)添加組件系統(tǒng)、客戶端路由、大規(guī)模狀態(tài)管理來(lái)構(gòu)建一個(gè)完整的框架。更重要的是，這些功能相互獨(dú)立，你可以在核心功能的基礎(chǔ)上任意選用其他的部件，不一定要全部整合在一起。可以看到，所說(shuō)的“漸進(jìn)式”，其實(shí)就是Vue的使用方式，同時(shí)也體現(xiàn)了Vue的設(shè)計(jì)的理念

在我看來(lái)，漸進(jìn)式代表的含義是：主張最少。視圖模板引擎

每個(gè)框架都不可避免會(huì)有自己的一些特點(diǎn)，從而會(huì)對(duì)使用者有一定的要求，這些要求就是主張，主張有強(qiáng)有弱，它的強(qiáng)勢(shì)程度會(huì)影響在業(yè)務(wù)開(kāi)發(fā)中的使用方式。

比如說(shuō)，Angular，它兩個(gè)版本都是強(qiáng)主張的，如果你用它，必須接受以下東西：

必須使用它的模塊機(jī)制- 必須使用它的依賴注入- 必須使用它的特殊形式定義組件（這一點(diǎn)每個(gè)視圖框架都有，難以避免）

所以Angular是帶有比較強(qiáng)的排它性的，如果你的應(yīng)用不是從頭開(kāi)始，而是要不斷考慮是否跟其他東西集成，這些主張會(huì)帶來(lái)一些困擾。

Vue可能有些方面是不如React，不如Angular，但它是漸進(jìn)的，沒(méi)有強(qiáng)主張，你可以在原有大系統(tǒng)的上面，把一兩個(gè)組件改用它實(shí)現(xiàn)，當(dāng)jQuery用；也可以整個(gè)用它全家桶開(kāi)發(fā)，當(dāng)Angular用；還可以用它的視圖，搭配你自己設(shè)計(jì)的整個(gè)下層用。也可以函數(shù)式，都可以，它只是個(gè)輕量視圖而已，只做了自己該做的事，沒(méi)有做不該做的事，僅此而已。

漸進(jìn)式的含義，我的理解是：沒(méi)有多做職責(zé)之外的事。

15.vue.js的兩個(gè)核心是什么(數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)。)

數(shù)據(jù)驅(qū)動(dòng):Object.defineProperty和存儲(chǔ)器屬性: getter和setter（所以只兼容IE9及以上版本），可稱為基于依賴收集的觀測(cè)機(jī)制,核心是VM，即ViewModel，保證數(shù)據(jù)和視圖的一致性。

16.vue常用修飾符

修飾符分為：一般修飾符，事件修身符，按鍵、系統(tǒng)

①一般修飾符：

.lazy：v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 。你可以添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change 事件進(jìn)行同步

inputv-model.lazy="msg"

.number

inputv-model.number="age"type="number"

.trim

1.如果要自動(dòng)過(guò)濾用戶輸入的首尾空白字符inputv-model.trim='trim'

② 事件修飾符

av-on:click.stop="doThis"/a!-- 阻止單擊事件繼續(xù)傳播 --

formv-on:submit.prevent="onSubmit"/form !-- 提交事件不再重載頁(yè)面 --

av-on:click.stop.prevent="doThat"/a !-- 修飾符可以串聯(lián) --

formv-on:submit.prevent/form !-- 只有修飾符 --

divv-on:click.capture="doThis".../div !-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 --? !-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理 --

divv-on:click.self="doThat".../div !-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -- !-- 即事件不是從內(nèi)部元素觸發(fā)的 --

av-on:click.once="doThis"/a !-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 --

③按鍵修飾符

全部的按鍵別名:

.enter.tab.delete(捕獲“刪除”和“退格”鍵).esc.space.up.down.left.right.ctrl.alt.shift.meta

inputv-on:keyup.enter="submit"或者input@keyup.enter="submit"

④系統(tǒng)修飾鍵 （可以用如下修飾符來(lái)實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽(tīng)器。）

.ctrl.alt.shift.meta

input@keyup.alt.67="clear"或者div@click.ctrl="doSomething"Dosomething/div!-- Ctrl + Click --

20.Vue 組件中 data 為什么必須是函數(shù)

vue組件中data值不能為對(duì)象，因?yàn)閷?duì)象是引用類型，組件可能會(huì)被多個(gè)實(shí)例同時(shí)引用。

如果data值為對(duì)象，將導(dǎo)致多個(gè)實(shí)例共享一個(gè)對(duì)象，其中一個(gè)組件改變data屬性值，其它實(shí)例也會(huì)受到影響。

vue面試題大全

1. vue生命周期都有哪些？

2. 進(jìn)入頁(yè)面會(huì)執(zhí)行哪些生命周期函數(shù)

beforeCreate、created、beforeMounted、mounted

3. 在哪里可以訪問(wèn) data

beforeCreate中不可以訪問(wèn)

created中有 el

beforeMounte中有 el

mouted中都有，包括之后的生命周期鉤子函數(shù)都有

4、 如果加入了keep-alive會(huì)增加兩個(gè)生命周期函數(shù)

activated和deactivated

進(jìn)入頁(yè)面的時(shí)候觸發(fā)activated，離開(kāi)頁(yè)面觸發(fā) deactivated

5. 如果加入keep-alive組件，第一次進(jìn)入頁(yè)面會(huì)觸發(fā)哪些生命周期

beforeCreate、created、beforeMounted、mounted、activated

6、 如果加入了keep-alive組件后，第二次或第n次進(jìn)入頁(yè)面會(huì)觸發(fā)哪些生命周期？

只觸發(fā)一個(gè)生命周期：activated(因?yàn)樵擁?yè)面已經(jīng)被緩存起來(lái)了)

1.是什么

vue自帶的一個(gè)組件，用來(lái)緩存組件，提升性能，keep-alive可以在組件切換時(shí)，保存其包裹組件的狀態(tài)，使其不被銷毀。

2、參數(shù)

include：表示只有匹配的組件才會(huì)被緩存；

exclude：表示匹配到的組件不會(huì)被緩存；

3、生命周期

有兩個(gè)生命周期函數(shù)，同上

4.使用場(chǎng)景

-列表頁(yè)面跳轉(zhuǎn)詳情頁(yè)的時(shí)候，用戶通過(guò)點(diǎn)擊跳轉(zhuǎn)，那么詳情頁(yè)每次都要去請(qǐng)求數(shù)據(jù)，如果用戶每次點(diǎn)擊的都是同一個(gè)，那么詳情頁(yè)就沒(méi)必要去重新請(qǐng)求，直接緩存起來(lái)就行了，如果點(diǎn)擊的不是同一個(gè)再重新發(fā)起請(qǐng)求；

-在router-view上使用可以緩存路由組件；

1.相同點(diǎn)

都可以控制元素的顯示隱藏

2.區(qū)別

v-if通過(guò)創(chuàng)建/銷毀dom元素來(lái)控制元素的顯示隱藏，v-show通過(guò)css屬性的display:none來(lái)控制元素的顯示隱藏

3.場(chǎng)景

頻繁切換使用v-show，會(huì)節(jié)省性能，反之使用v-if

1、當(dāng)項(xiàng)目使用keep-alive時(shí)，可搭配組件name進(jìn)行緩存過(guò)濾

當(dāng)我們使用keep-alive緩存組件時(shí)，被緩存組件中的mounted函數(shù)只會(huì)執(zhí)行一次，第二次進(jìn)入頁(yè)面不會(huì)重新觸發(fā)，有兩種解決方法，一種是使用activated()，在里面進(jìn)行mounted中的操作；另一種就是在keep-alive中增加一個(gè)過(guò)濾，如下所示：

exclude屬性就是要忽略匹配到的組件。

2、DOM做遞歸組件時(shí)；

當(dāng)組件需要自己調(diào)用自己的時(shí)候

3、使用vue-tools時(shí)；

vue-devtools調(diào)試工具里顯示的組件名稱是由vue中組件name決定的

v-for的優(yōu)先級(jí)比v-if的優(yōu)先級(jí)高，這是在源碼中規(guī)定好的，并且v-for和v-if不可以同時(shí)使用，同時(shí)使用會(huì)很浪費(fèi)性能，比如明知判斷條件是false的情況下，還需要去遍歷一下數(shù)據(jù)，所以通常我們會(huì)把v-if放在v-for的外面。

是用來(lái)獲取更新后的dom內(nèi)容，并且該方法是異步的

作用是將回調(diào)函數(shù)延遲到下次dom更新循環(huán)之后執(zhí)行因?yàn)関ue更新數(shù)據(jù)是異步的，修改data中的數(shù)據(jù)，視圖不會(huì)立刻更新，vue會(huì)將你對(duì)data的修改放到一個(gè)watch隊(duì)列中，當(dāng)同一事件循環(huán)中的所有數(shù)據(jù)更新完以后，再進(jìn)行試圖更新，所以會(huì)產(chǎn)生延遲。

最常見(jiàn)的使用場(chǎng)景就是，在created中獲取dom元素的時(shí)候需要使用$nextTick獲取

組件中的 data 寫(xiě)成一個(gè)函數(shù)，數(shù)據(jù)以函數(shù)返回值形式定義，這樣每復(fù)用一次組件，就會(huì)返回一份新的 data ，相當(dāng)于給每個(gè)組件實(shí)例創(chuàng)建一個(gè)私有的數(shù)據(jù)空間，讓各個(gè)組件實(shí)例維護(hù)各自的數(shù)據(jù)。而單純的寫(xiě)成對(duì)象形式，就使得所有組件實(shí)例共用了一份 data ，就會(huì)造成一個(gè)變了全都會(huì)變的結(jié)果。

當(dāng)父組件給子組件傳遞數(shù)據(jù)的時(shí)候，子組件只允許對(duì)數(shù)據(jù)進(jìn)行讀取，不允許修改數(shù)據(jù)，因?yàn)楫?dāng)子組件修改了父組件傳過(guò)來(lái)的數(shù)據(jù)時(shí)，其他引用父組件數(shù)據(jù)的組件也會(huì)被修改，從而導(dǎo)致報(bào)錯(cuò)，然而也不知道是當(dāng)前組件報(bào)錯(cuò)還是父組件報(bào)錯(cuò)還是修改父組件信息的子組件的錯(cuò)誤；

如果要修改可以通過(guò)this.$emit方法派發(fā)自定義事件，在父組件中修改；

hash模式和history模式，默認(rèn)是hash模式

區(qū)別如下：

1、表現(xiàn)形式不同，hash使用#表示，history用/表示；

2、hash值不會(huì)發(fā)送到服務(wù)端，history會(huì)發(fā)送到服務(wù)端 ，如果沒(méi)有匹配到對(duì)應(yīng)的路由，需要配置對(duì)應(yīng)的頁(yè)面；

3、獲取方式不同，hash值可以通過(guò)location.path獲取，history通過(guò)location.pathname獲??；

4、hash可以通過(guò)window.onhashchange監(jiān)聽(tīng)hash值的改變 ，history

可以通過(guò)onpopstate監(jiān)聽(tīng)變化；

組建中的template標(biāo)簽會(huì)編譯為render函數(shù)，通過(guò)render函數(shù)創(chuàng)建出dom元素，然后轉(zhuǎn)化為虛擬dom最終轉(zhuǎn)化為真實(shí)dom

1、虛擬dom是一個(gè)js對(duì)象，用對(duì)象屬性來(lái)描述節(jié)點(diǎn)，是一層對(duì)真實(shí)dom的抽象

2、因?yàn)閐om的執(zhí)行速度遠(yuǎn)不如js執(zhí)行速度快，因此將真實(shí)的dom抽象成js對(duì)象，然后通過(guò)算法計(jì)算出真正需要更新的節(jié)點(diǎn)，從而減少了大量的dom操作。

3、將直接操作dom轉(zhuǎn)換成了兩個(gè)js對(duì)象中去比較，找出差異項(xiàng)，做局部更新，提高了執(zhí)行效率。

未完待續(xù)...

關(guān)于前端vue面試題2022和前端vue面試題目的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。