vue 面試題 2019


vue核心知識點

1、對於Vue是一套漸進式框架的理解

漸進式代表的含義是:主張最少。

Vue可能有些方面是不如React,不如Angular,但它是漸進的,沒有強主張,你可以在原有大系統的上面,把一兩個組件改用它實現,當jQuery用;也可以整個用它全家桶開發,當Angular用;還可以用它的視圖,搭配你自己設計的整個下層用。你可以在底層數據邏輯的地方用OO和設計模式的那套理念,也可以函數式,都可以,它只是個輕量視圖而已,只做了自己該做的事,沒有做不該做的事,僅此而已。 
漸進式的含義,我的理解是:沒有多做職責之外的事。

 

2、vue.js的兩個核心是什么?

數據驅動和組件化

 

3、請問 v-if 和 v-show 有什么區別?

相同點: 兩者都是在判斷DOM節點是否要顯示

不同點:

a.實現方式: v-if是根據后面數據的真假值判斷直接從Dom樹上刪除或重建元素節點。  v-show只是在修改元素的css樣式,也就是display的屬性值,元素始終在Dom樹上。

b.編譯過程:v-if切換有一個局部編譯/卸載的過程,切換過程中合適地銷毀和重建內部的事件監聽和子組件;  v-show只是簡單的基於css切換;

c.編譯條件:v-if是惰性的,如果初始條件為假,則什么也不做;只有在條件第一次變為真時才開始局部編譯; v-show是在任何條件下(首次條件是否為真)都被編譯,然后被緩存,而且DOM元素始終被保留;

d.性能消耗:v-if有更高的切換消耗,不適合做頻繁的切換;  v-show有更高的初始渲染消耗,適合做頻繁的額切換;

 

4、vue常用的修飾符

a、按鍵修飾符

如:.delete(捕獲“刪除”和”退格“鍵)      用法上和事件修飾符一樣,掛載在v-on:后面,語法:v-on:keyup.xxx=’yyy’  <input class = 'aaa' v-model="inputValue" @keyup.delete="onKey"/>

b、系統修飾符

可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器

  • .ctrl
  • .alt
  • .shift
  • .meta

c、鼠標按鈕修飾符

  • .left
  • .right
  • .middle
    這些修飾符會限制處理函數僅響應特定的鼠標按鈕。如:<button @click.middle ="onClick">A</button>  鼠標滾輪單擊觸發   Click默認是鼠標左鍵單擊
d、其他修飾符
  • .lazy
    在默認情況下,v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步 ,我們可以添加 lazy 修飾符,從而轉變為使用 change事件進行同步:
<!-- 在“change”時而非“input”時更新 --> <input v-model.lazy="msg" > 
  • .number
    如果想自動將用戶的輸入值轉為數值類型,可以給 v-model 添加 .number修飾符:
<input v-model.number="age" type="number"> 

這通常很有用,因為即使在type="number"時,HTML 輸入元素的值也總會返回字符串。如果這個值無法被 parseFloat()解析,則會返回原始的值。

  • .trim
    如果要自動過濾用戶輸入的首尾空白字符,可以給 v-model 添加 trim 修飾符:
<input v-model.trim="msg"> 
 
 

同樣前面都有空格加上.trim后 將前后空格都去掉了

 

5、v-on可以監聽多個方法嗎?

可以

 

6、vue中 key 值的作用

 使用key來給每個節點做一個唯一標識

key的作用主要是為了高效的更新虛擬DOM。另外vue中在使用相同標簽名元素的過渡切換時,也會使用到key屬性,其目的也是為了讓vue可以區分它們,

否則vue只會替換其內部屬性而不會觸發過渡效果。

 

7、Vue 組件中 data 為什么必須是函數

new Vue() 中,data 是可以作為一個對象進行操作的,然而在 component 中,data 只能以函數的形式存在,不能直接將對象賦值給它。

當data選項是一個函數的時候,每個實例可以維護一份被返回對象的獨立的拷貝,這樣各個實例中的data不會相互影響,是獨立的

 

8、v-for 與 v-if 的優先級

v-for的優先級比v-if高

 

9、vue中子組件調用父組件的方法

參考: https://www.cnblogs.com/jin-zhe/p/9523782.html

第一種方法是直接在子組件中通過this.$parent.event來調用父組件的方法

第二種方法是在子組件里用$emit向父組件觸發一個事件,父組件監聽這個事件就行了。

第三種是父組件把方法傳入子組件中,在子組件里直接調用這個方法

 

10、vue生命周期鈎子函數有哪些?

參考: https://www.jianshu.com/p/8b7373362b4c

總共分為8個階段創建前/后,載入前/后,更新前/后,銷毀前/后。

  創建前/后

  在beforeCreated階段,vue實例的掛載元素$el和數據對象data都為undefined,還未初始化。

  在created階段,vue實例的數據對象data有了,$el還沒有。

  載入前/后

  在beforeMount階段,vue實例的$el和data都初始化了,但還是掛載之前為虛擬的dom節點,data.message還未替換。

  在mounted階段,vue實例掛載完成,data.message成功渲染。

  更新前/后

  當data變化時,會觸發beforeUpdate和updated方法。

  銷毀前/后

  在執行destroy方法后,對data的改變不會再觸發周期函數,說明此時vue實例已經解除了事件監聽以及和dom的綁定,但是dom結構依然存在

 

11、說出至少 4 種 vue 當中的指令和它的用法

    v-if(判斷是否隱藏)、v-for(把數據遍歷出來)、v-bind(綁定屬性)、v-model(實現雙向綁定)

 

12、vue 的雙向綁定的原理是什么

參考:https://www.cnblogs.com/libin-1/p/6893712.html

vue數據雙向綁定是通過數據劫持結合發布者-訂閱者模式的方式來實現的。

 

還有其他vue相關面試題參考:

https://blog.csdn.net/liangjielaoshi/article/details/84064095

https://segmentfault.com/a/1190000016351284

 



 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM