15道Vue常見面試題解析

1.vue優點？

答案：

• 輕量級框架：只專注於視圖層，是一個建構資料的視圖集合，大小只有幾十 <span style="font-size: 14px;">kb</span> ；

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

• #雙向資料綁定：保留了 <span style="font-size: 14px;">angular</span> 的特點，在資料操作方面更為簡單；

• 元件化：保留了 <span style="font-size: 14px;">react</span><span style="font-size: 14px;"></span><span style="font-size: 14px;"></span># 的優點，實現了 <span style="font-size: 14px;"></span>

  html

•  的封裝與重複使用，在建立單一頁面應用程式方面有著獨特的優勢；<span style="font-size: 14px;"></span>

• #視圖，數據，結構分離：使資料的變更更為簡單，不需要進行邏輯程式碼的修改，只需要操作資料就能完成相關操作；<span style="font-size: 14px;"></span><span style="font-size: 14px;"></span>虛擬DOM：<span style="font-size: 14px;"></span>dom<span style="font-size: 14px;"></span># 作業是非常耗費效能的， 不再使用原生的 <span style="font-size: 14px;"></span> #dom<span style="font-size: 14px;"></span> 作業節點，極大解放 <span style="font-size: 14px;"></span>#dom<span style="font-size: 14px;"></span> 操作，但具體操作的還是 <span style="font-size: 14px;"></span>

  ##dom

•  不過是換了另一種方式;<span style="font-size: 14px;"></span><span style="font-size: 14px;"></span> 跑得更快：比較於<span style="font-size: 14px;"></span>react<span style="font-size: 14px;"></span> 而言，同樣是操作虛擬 <span style="font-size: 14px;"></span>dom<span style="font-size: 14px;"></span> ，就效能而言， <span style="font-size: 14px;"></span>

  vue

 有很大的優點。 <span style="font-size: 14px;"></span>

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的使用情境

#答案：

• <span style="font-size: 14px;">computed </span> : 當屬性受多個屬性影響的時候就需要用到 <span style="font-size: 14px;">computed</span> ，最典型的栗子：購物車商品結算的時候

• <span style="font-size: 14px;">watch</span># : 當一個資料影響多個資料的時候就需要用 <span style="font-size: 14px;">watch</span> ，栗子：搜尋資料

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

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

推薦教學：《JS教學》

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