面試問題
今天還是這位小姐姐陪我們來看第二篇 VueJs 的基礎(chǔ)面試題匯總，方便大家記住和理解面試過程中的一些理論知識點(diǎn)。
這些知識點(diǎn)是平時(shí)你可能開發(fā)時(shí)會用，也理解，但具體卻答不上來的場景居多，我們快速看一下（部分題來自網(wǎng)絡(luò)總結(jié)）
一. Vue核心小知識點(diǎn)（可以留言互動回答~簡單）
1、vue中 key 值的作用
2、vue中子組件調(diào)用父組件的方法
3、vue等單頁面應(yīng)用及其優(yōu)缺點(diǎn)
二. ****v-show和v-if指令的共同點(diǎn)和不同點(diǎn)?
v-show指令是通過修改元素的displayCSS屬性讓其顯示或者隱藏v-if指令是直接銷毀和重建DOM達(dá)到讓元素顯示和隱藏的效果
三. 如何讓CSS只在當(dāng)前組件中起作用?
將當(dāng)前組件的<style>修改為<style scoped>
四. ****<keep-alive></keep-alive>的作用是什么?
<keep-alive></keep-alive> 包裹動態(tài)組件時(shí)，會緩存不活動的組件實(shí)例,主要用于保留組件狀態(tài)或避免重新渲染。
大白話: 比如有一個(gè)列表和一個(gè)詳情，那么用戶就會經(jīng)常執(zhí)行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個(gè)頻率很高的頁面，那么就可以對列表組件使用<keep-alive></keep-alive>進(jìn)行緩存，
這樣用戶每次返回列表的時(shí)候，都能從緩存中快速渲染，而不是重新渲染
五. Vue中引入組件的步驟?
1.采用ES6的import ... from ...語法
或
CommonJS的require()方法引入組件
2.對組件進(jìn)行注冊,代碼如下
<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的作用是什么?
提供一個(gè)在頁面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo).可以是 CSS 選擇器，也可以是一個(gè) HTMLElement 實(shí)例,
七. 在Vue中使用插件的步驟
采用ES6的
import ... from ...語法使用全局方法
Vue.use( plugin )使用插件,可以傳入一個(gè)選項(xiàng)對象Vue.use(MyPlugin, { someOption: true })
八. 請列舉出3個(gè)Vue中常用的生命周期鉤子函數(shù)?
created: 實(shí)例已經(jīng)創(chuàng)建完成之后調(diào)用,在這一步,實(shí)例已經(jīng)完成數(shù)據(jù)觀測, 屬性和方法的運(yùn)算, watch/event事件回調(diào). 然而, 掛載階段還沒有開始,
$el屬性目前還不可見mounted:
el被新創(chuàng)建的vm.$el替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果root實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時(shí)vm.$el也在文檔內(nèi)。activated::
keep-alive組件激活時(shí)調(diào)用
九. 請簡述下Vuex的原理和使用方法
數(shù)據(jù)單向流動
一個(gè)應(yīng)用可以看作是由上面三部分組成: View, Actions,State,數(shù)據(jù)的流動也是從View => Actions => State =>View 以此達(dá)到數(shù)據(jù)的單向流動.
但是項(xiàng)目較大的, 組件嵌套過多的時(shí)候, 多組件共享同一個(gè)State會在數(shù)據(jù)傳遞時(shí)出現(xiàn)很多問題.Vuex就是為了解決這些問題而產(chǎn)生的.
Vuex可以被看作項(xiàng)目中所有組件的數(shù)據(jù)中心,我們將所有組件中共享的State抽離出來,任何組件都可以訪問和操作我們的數(shù)據(jù)中心
Vuex的組成：一個(gè)實(shí)例化的Vuex.Store由state, mutations和actions三個(gè)屬性組成:
state中保存著共有數(shù)據(jù)
改變state中的數(shù)據(jù)有且只有通過mutations中的方法,且mutations中的方法必須是同步的
如果要寫異步的方法,需要些在actions中, 并通過commit到mutations中進(jìn)行state中數(shù)據(jù)的更改.
相關(guān)閱讀：****Vue常見面試題 標(biāo)準(zhǔn)答案匯總 一
