1. 程式人生 > >VUE面試筆記(一)

VUE面試筆記(一)

1.請談談Vue中的MVVM模式
MVVM全稱是Model-View-ViewModel,Vue是以資料為驅動的,Vue自身將DOM和資料進行繫結,一旦建立繫結,DOM和資料將保持同步,每當資料發生變化,DOM會跟著變化。 ViewModel是Vue的核心,它是Vue的一個例項。Vue例項時作用域某個HTML元素上的這個HTML元素可以是body,也可以是某個id所指代的元素。DOMListeners和DataBindings是實現雙向繫結的關鍵。DOMListeners監聽頁面所有View層DOM元素的變化,當發生變化,Model層的資料隨之變化;DataBindings監聽Model層的資料,當資料發生變化,View層的DOM元素隨之變化。

2. v-show和v-if指令的共同點和不同點?
v-show指令是通過修改元素的displayCSS屬性讓其顯示或者隱藏
v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果

3. 如何讓CSS只在當前元件中起作用?
將當前元件的

4. 的作用是什麼?
包裹動態元件時,會快取不活動的元件例項,主要用於保留元件狀態或避免重新渲染。

大白話: 比如有一個列表和一個詳情,那麼使用者就會經常執行開啟詳情=>返回列表=>開啟詳情…這樣的話列表和詳情都是一個頻率很高的頁面,那麼就可以對列表元件使用進行快取,這樣使用者每次返回列表的時候,都能從快取中快速渲染,而不是重新渲染

5. Vue中引入元件的步驟?

  1. 採用ES6的import … from …語法或CommonJS的require()方法引入元件
  2. 對元件進行註冊,程式碼如下
// 註冊 Vue.component('my-component', {   template: '<div>A custom
component!</div>' })
  1. 使用元件

6. 指令v-el的作用是什麼?
提供一個在頁面上已存在的 DOM 元素作為 Vue 例項的掛載目標.可以是 CSS 選擇器,也可以是一個 HTMLElement 例項,

7. 在Vue中使用外掛的步驟
採用ES6的import … from …語法或CommonJSd的require()方法引入外掛
使用全域性方法Vue.use( plugin )使用外掛,可以傳入一個選項物件Vue.use(MyPlugin, { someOption: true })

8. 請列舉出3個Vue中常用的生命週期鉤子函式?
created: 例項已經建立完成之後呼叫,在這一步,例項已經完成資料觀測, 屬性和方法的運算, watch/event事件回撥. 然而, 掛載階段還沒有開始, elmounted:elvm.el屬性目前還不可見 mounted: el被新建立的 vm.el 替換,並掛載到例項上去之後呼叫該鉤子。如果 root 例項掛載了一個文件內元素,當 mounted 被呼叫時 vm.$el 也在文件內。
activated::keep-alive元件啟用時呼叫

9. 請簡述下Vuex的原理和使用方法
資料單向流動
一個應用可以看作是由上面三部分組成: View, Actions,State,資料的流動也是從View => Actions => State =>View 以此達到資料的單向流動.但是專案較大的, 元件巢狀過多的時候, 多元件共享同一個State會在資料傳遞時出現很多問題.Vuex就是為了解決這些問題而產生的.
Vuex可以被看作專案中所有元件的資料中心,我們將所有元件中共享的State抽離出來,任何元件都可以訪問和操作我們的資料中心.
Vuex原理
上圖可以很好的說明Vuex的組成,一個例項化的Vuex.Store由state, mutations和actions三個屬性組成:
state中儲存著共有資料
改變state中的資料有且只有通過mutations中的方法,且mutations中的方法必須是同步的
如果要寫非同步的方法,需要些在actions中, 並通過commit到mutations中進行state中資料的更改