面試問題
今天還是這位小姐姐陪我們來看第二篇 VueJs 的基礎面試題匯總袱箱,方便大家記住和理解面試過程中的一些理論知識點。
這些知識點是平時你可能開發(fā)時會用,也理解粒梦,但具體卻答不上來的場景居多晦嵌,我們快速看一下(部分題來自網(wǎng)絡總結(jié))
一. Vue核心小知識點(可以留言互動回答~簡單)
1同辣、vue中 key
值的作用
2、vue中子組件調(diào)用父組件的方法
3耍铜、vue等單頁面應用及其優(yōu)缺點
二. ****v-show
和v-if
指令的共同點和不同點?
v-show
指令是通過修改元素的display
CSS屬性讓其顯示或者隱藏v-if
指令是直接銷毀和重建DOM達到讓元素顯示和隱藏的效果
三. 如何讓CSS只在當前組件中起作用?
將當前組件的<style>
修改為<style scoped>
四. ****<keep-alive></keep-alive>
的作用是什么?
<keep-alive></keep-alive>
包裹動態(tài)組件時邑闺,會緩存不活動的組件實例,主要用于保留組件狀態(tài)或避免重新渲染。
大白話: 比如有一個列表和一個詳情棕兼,那么用戶就會經(jīng)常執(zhí)行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個頻率很高的頁面陡舅,那么就可以對列表組件使用<keep-alive></keep-alive>
進行緩存,
這樣用戶每次返回列表的時候伴挚,都能從緩存中快速渲染靶衍,而不是重新渲染
五. Vue中引入組件的步驟?
1.采用ES6的import ... from ...
語法
或
CommonJS的require()
方法引入組件
2.對組件進行注冊,代碼如下
<pre class="" style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-size: 17px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">
`注冊
Vue.component('my-component',
{ template: '<div>A custom component!</div>'})`
</pre>
3.使用組件<my-component></my-component>
六. 指令****v-el
的作用是什么?
提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標.可以是 CSS 選擇器,也可以是一個 HTMLElement 實例,
七. 在Vue中使用插件的步驟
采用ES6的
import ... from ...
語法使用全局方法
Vue.use( plugin )
使用插件,可以傳入一個選項對象Vue.use(MyPlugin, { someOption: true })
八. 請列舉出3個Vue中常用的生命周期鉤子函數(shù)?
created: 實例已經(jīng)創(chuàng)建完成之后調(diào)用,在這一步,實例已經(jīng)完成數(shù)據(jù)觀測, 屬性和方法的運算, watch/event事件回調(diào). 然而, 掛載階段還沒有開始,
$el
屬性目前還不可見mounted:
el
被新創(chuàng)建的vm.$el
替換茎芋,并掛載到實例上去之后調(diào)用該鉤子颅眶。如果root
實例掛載了一個文檔內(nèi)元素,當 mounted 被調(diào)用時vm.$el
也在文檔內(nèi)田弥。activated::
keep-alive
組件激活時調(diào)用
九. 請簡述下Vuex的原理和使用方法
數(shù)據(jù)單向流動
一個應用可以看作是由上面三部分組成: View, Actions,State,數(shù)據(jù)的流動也是從View => Actions => State =>View 以此達到數(shù)據(jù)的單向流動.
但是項目較大的, 組件嵌套過多的時候, 多組件共享同一個State會在數(shù)據(jù)傳遞時出現(xiàn)很多問題.Vuex就是為了解決這些問題而產(chǎn)生的.
Vuex可以被看作項目中所有組件的數(shù)據(jù)中心,我們將所有組件中共享的State抽離出來,任何組件都可以訪問和操作我們的數(shù)據(jù)中心
Vuex的組成:一個實例化的Vuex.Store由state, mutations和actions三個屬性組成:
state中保存著共有數(shù)據(jù)
改變state中的數(shù)據(jù)有且只有通過mutations中的方法,且mutations中的方法必須是同步的
如果要寫異步的方法,需要些在actions中, 并通過commit到mutations中進行state中數(shù)據(jù)的更改.
相關閱讀:****Vue常見面試題 標準答案匯總 一