Vue框架的常見面試題

這篇文章將為大家詳細講解有關Vue框架的常見面試題，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

1.vue的優點

答：

• 輕量級框架：只關注視圖層，是一個構建數據的視圖集合，大小只有幾十 kb ；

• 簡單易學：國人開發，中文文檔，不存在語言障礙 ，易于理解和學習；

• 雙向數據綁定：保留了 angular 的特點，在數據操作方面更為簡單；

• 組件化：保留了 react 的優點，實現了 html 的封裝和重用，在構建單頁面應用方面有著獨特的優勢；

• 視圖，數據，結構分離：使數據的更改更為簡單，不需要進行邏輯代碼的修改，只需要操作數據就能完成相關操作；

• 虛擬DOM：dom 操作是非常耗費性能的， 不再使用原生的 dom 操作節點，極大解放 dom 操作，但具體操作的還是 dom 不過是換了另一種方式；

• 運行速度更快：相比較于 react 而言，同樣是操作虛擬 dom ，就性能而言， vue 存在很大的優勢。

2.vue父組件向子組件傳遞數據？

答：通過 props

3.子組件像父組件傳遞事件？

答：$emit 方法

4.v-show 和 v-if指令的共同點和不同點？

答:

共同點： 都能控制元素的顯示和隱藏；

不同點： 實現本質方法不同，v-show 本質就是通過控制 css 中的 display 設置為 none，控制隱藏，只會編譯一次；v-if 是動態的向 DOM 樹內添加或者刪除 DOM 元素，若初始值為 false ，就不會編譯了。而且 v-if 不停的銷毀和創建比較消耗性能。總結：如果要頻繁切換某節點，使用 v-show (切換開銷比較小，初始開銷較大)。如果不需要頻繁切換某節點使用 v-if（初始渲染開銷較小，切換開銷比較大）。

如果你以上的都會了， 說明你 60分及格了，另外現在vue3.0出來了，找工作一般都會問到，如果你還沒學好。可以去小編前端扣扣裙 519293536 交流學習，里面有很多大佬，還有前端新技術資料分享！

5. 如何讓CSS只在當前組件中起作用?

答：在組件中的 style 前面加上 scoped

6. 的作用是什么?

答: keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。

7.如何獲取dom?

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

8.說出幾種vue當中的指令和它的用法？

答：v-model 雙向數據綁定；

v-for 循環；

v-if v-show 顯示與隱藏；

v-on 事件；v-once : 只綁定一次。

9. vue-loader是什么？使用它的用途有哪些？

答：vue 文件的一個加載器，將 template/js/style 轉換成 js 模塊。

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

10.為什么使用key?

答：需要使用 key 來給每個節點做一個唯一標識， Diff 算法就可以正確的識別此節點。作用主要是為了高效的更新虛擬 DOM。

11.axios及安裝?

答：請求后臺資源的模塊。npm install axios —save 裝好， js中使用 import 進來，然后 .get 或 .post 。返回在 .then 函數中如果成功，失敗則是在 .catch 函數中。

12.v-modal的使用

答：v-model 用于表單數據的雙向綁定，其實它就是一個語法糖，這個背后就做了兩個操作：v-bind 綁定一個 value 屬性；v-on 指令給當前元素綁定 input 事件。

13.請說出vue.cli項目中src目錄每個文件夾和文件的用法？

答：assets 文件夾是放靜態資源；components 是放組件；router 是定義路由相關的配置; app.vue 是一個應用主組件；main.js 是入口文件。

14.分別簡述computed和watch的使用場景

答：

• computed : 當一個屬性受多個屬性影響的時候就需要用到 computed ，最典型的栗子：購物車商品結算的時候

• watch : 當一條數據影響多條數據的時候就需要用 watch ，栗子：搜索數據

15.v-on可以監聽多個方法嗎？

答：可以，栗子：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。

關于Vue框架的常見面試題就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。