首頁 >web前端 >js教程 >15道Vue常見面試題解析

15道Vue常見面試題解析

hzc原創: 2020-06-22 11:10:072276瀏覽

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, }">。

推薦教學：《JS教學》

以上是15道Vue常見面試題解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css less scss html es6 npm angular if for 封装 catch 循环 JS 事件 dom this display input 算法

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript中Number()方法的兩種用法下一篇：JavaScript中Number()方法的兩種用法

看更多