2019 Vue 面試題彙總(持續更新中...)

Coderfei發表於2019-05-01

1. vue中的MVVM模式

即Model-View-ViewModel。

Vue是以資料為驅動的,Vue自身將DOM和資料進行繫結,一旦建立繫結,DOM和資料將保持同步,每當資料發生變化,DOM會跟著變化。

ViewModel是Vue的核心,它是Vue的一個例項。Vue例項時作用域某個HTML元素上的,這個HTML元素可以是body,也可以是某個id所指代的元素。

DOM Listeners和Data Bindings是實現雙向繫結的關鍵。DOM Listeners監聽頁面所有View層DOM元素的變化,當發生變化,Model層的資料隨之變化;Data Bindings監聽Model層的資料,當資料發生變化,View層的DOM元素隨之變化。

2. v-show指令,v-if的區別

條件渲染指令,與v-if不同的是,無論v-show的值為true或false,元素都會存在於HTML程式碼中;而只有當v-if的值為true,元素才會存在於HTML程式碼中。v-show指令只是設定了元素CSS的style值

3. 如何讓css只在當前元件中起作用

在每一個vue元件中都可以定義各自的css,js,如果希望元件內寫的css只對當前元件起作用,只需要在style中寫入scoped,即:

<style scoped></style>複製程式碼

4. 指令keep-alive

在vue-router寫著keep-alive,keep-alive的含義:

如果把切換出去的元件保留在記憶體中,可以保留它的狀態或避免重新渲染。為此可以新增一個keep-alive指令

<component :is='curremtView' keep-alive></component>

5. Vuejs元件

vuejs構建元件使用

Vue.component('componentName',{
    /*component*/ 
});   
// 這裡注意一點,元件要先註冊再使用
Vue.component('mine',{           
    template:'#mineTpl',          
    props:['name','title','city','content']        
}); 
var v=new Vue({      
    el:'#vueInstance',      
    data:{          
        name:'zhang',          
        title:'this is title',         
        city:'Beijing',         
        content:'these are some desc about Blog'     
    }
});複製程式碼

6. 路由巢狀

路由巢狀會將其他元件渲染到該元件內,而不是進行整個頁面跳轉router-view本身就是將元件渲染到該位置,想要進行頁面跳轉,就要將頁面渲染到根元件,在起始配置路由時候寫到:

var App = Vue.extend({ root });
router.start(App,'#app');複製程式碼

這裡首先將根元件註冊進來,用於將路由中配置好的各個頁面渲染出來,然後將根元件掛載到與#app匹配的元素上。

7. 指令v-el的使用

有時候我們想就像使用jquery那樣去訪問一個元素,此時就可以使用v-el指令,去給這個元素註冊一個索引,方便通過所屬例項的$el訪問這個元素。

注意

HTML不區分大小寫,所以v-el:someEl將轉換為全小寫。可以用v-el:some-el然後設定this.$el.someEl。

示例

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent //-> "hello"
this.$els.otherMsg.textContent// -> "world"
this.$els.msg//-><span>hello</span>複製程式碼

8. vue.js中使用事件名

在vuejs中,我們經常要繫結一些事件,有時候給DOM元素繫結,有時候給元件繫結。繫結事件在HTML中用v-on:click-"event",這時evet的名字不要出現大寫,因為在1.x中不區分大小寫,所以如果我們在HTML寫v-on:click="myEvent"而在js中寫myEvent就出錯誤,所以在vuejs的1.x繫結事件時候,要儘量避免使用大寫字母。在2.0中沒有該限制!

9. Vue.js是什麼

Vue.js(是一套構建使用者介面的 漸進式框架。與其他重量級框架不同的是,Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層,並且非常容易學習,非常容易與其它庫或已有專案整合。另一方面,Vue 完全有能力驅動採用單檔案元件和Vue生態系統支援的庫開發的複雜單頁應用。

Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件

10. VueJS 特性:

I: MVVM模式(資料變數(model)發生改變 檢視(view)也改變, 檢視(view)改變,資料變數(model)也發生改變)

使用MVVM模式有幾大好處:

  1. 低耦合。View可以獨立於Model變化和修改,一個ViewModel可以繫結到不同的View上,當View變化的時候Model可以不變,當Model變化的時候View也可以不變。

  2. 可重用性。可以把一些檢視的邏輯放在ViewModel裡面,讓很多View重用這段檢視邏輯。

  3. 獨立開發。開發人員可以專注與業務邏輯和資料的開發(ViewModel)。設計人員可以專注於介面(View)的設計。

  4. 可測試性。可以針對ViewModel來對介面(View)進行測試

II: 元件化

III 指令系統

IIII: vue2.0開始支援虛擬dom

vue1.0是操作的是真的dom元素而不是虛擬的

虛擬dom:可以提升頁面的重新整理速度

虛擬DOM有利也有弊。

A:大小 - 其中之一就是更多的功能意味著程式碼包中更多行的程式碼。幸運的是,Vue.js 2.0 依舊比 較小(當前版本 21.4kb),並

且也正在刪除很多東西。

B: 記憶體 -同樣,虛擬DOM需要將現有的DOM拷貝後儲存在記憶體中,這是一個在DOM更新速度和記憶體使用中的權衡。

C: 並不適用所有情況 -如果虛擬DOM可以一次性進行批量的修改是非常好的。但是如果是單獨的、稀少的更新呢?這樣的任何

DOM更新都將會使虛擬DOM帶來無意義的預計算

11. Vue.js特點

簡潔:頁面由HTML模板+Json資料+Vue例項組成

資料驅動:自動計算屬性和追蹤依賴的模板表示式

元件化:用可複用、解耦的元件來構造頁面

輕量:程式碼量小,不依賴其他庫

快速:精確有效批量DOM更新

模板友好:可通過npm,bower等多種方式安裝,很容易融入

12. Vue.js 和 AngularJS 之間的區別是什麼?

下面是一些選擇 Vue 而不是 Angular 的可能原因;

Vue.js 是一個更加靈活開放的解決方案。它允許你以希望的方式組織你的應用程式,而不是任何時候都必須遵循 Angular 制定的規則。它僅僅是一個檢視層,所以你可以將它嵌入一個現有頁面而不一定要做成一個龐大的單頁應用。在結合其他庫方面它給了你更大的的空間,但相應,你也需要做更多的架構決策。例如,Vue.js 核心預設不包含路由和 ajax 功能,並且通常假定你在用應用中使用了一個外部的模組構建系統。這可能是最重要的區別

在 API 和內部設計方面,Vue.js 比 Angular 簡單得多, 因此你可以快速地掌握它的全部特性並投入開發。

Vue.js 擁有更好的效能,因為它不使用髒檢查。當 watcher 越來越多時, Angular 會變得越來越慢,因為作用域內的每一次資料變更,所有的 watcher 都需要被重新求值。Vue 則根本沒有這個問題,因為它採用的是基於依賴追蹤的觀察系統,所以所有的資料變更觸發都是獨立的,除非它們之間有明確的依賴關係。

Vue.js 中指令和元件的概念區分得更為清晰。指令只負責封裝 DOM 操作,而元件代表一個自給自足的獨立單元 —— 它擁有自己的檢視和資料邏輯。在 Angular 中它們兩者間有不少概念上的混淆。

13. Vue.js 和 React.js 有什麼區別?

React.js 和 Vue.js 確實有一些相似——它們都提供資料驅動、可組合搭建的檢視元件。然而,它們的內部實現是完全不同的。React 是基於 Virtual DOM——一種在記憶體中描述 DOM 樹狀態的資料結構。React 中的資料通常被看作是不可變的,而 DOM 操作則是通過 Virtual DOM 的 diff 來計算的。與之相比,Vue.js 中的資料預設是可變的,而資料的變更會直接出發對應的 DOM 更新。相比於 Virtual DOM,Vue.js 使用實際的 DOM 作為模板,並且保持對真實節點的引用來進行資料繫結。

Virtual DOM 提供了一個函式式的描述檢視的方法,這很 cool。因為它不使用資料觀察機制,每次更新都會重新渲染整個應用,因此從定義上保證了檢視通與資料的同步。它也開闢了 JavaScript 同構應用的可能性。

實話實說,我自己對 React 的設計理念也是十分欣賞的。但 React 有一個問題就是元件的邏輯和檢視結合得非常緊密。對於部分開發者來說,他們可能覺得這是個優點,但對那些像我一樣兼顧設計和開發的人來說,還是更偏好模板,因為模板能讓我們更好地在視覺上思考設計和 CSS。JSX 和 JavaScript 邏輯的混合干擾了我將程式碼對映到設計的思維過程。相反,Vue.js 通過在模板中加入一個輕量級的 DSL (指令系統),換來一個依舊直觀的模板,且能夠將邏輯封裝進指令和過濾器中。

React 的另一個問題是:由於 DOM 更新完全交由 Virtual DOM 管理,當你真的想要自己控制 DOM 是就有點棘手了(雖然理論上你可以,但這樣做時你本質上在對抗 React 的設計思想)。對於需要複雜時間控制的動畫來說這就變成了一項很討人厭的限制。在這方面,Vue.js 允許更多的靈活性,並且有不少用 Vue.js 構建的富互動例項

14. 請詳細說下你對 Vue 生命週期的理解?

總共分為 8 個階段建立前/後,載入前/後,更新前/後,銷燬前/後。

建立前/後: 在 beforeCreate 階段,vue 例項的掛載元素 el 還沒有。

載入前/後:在 beforeMount 階段,vue 例項的$el 和 data 都初始化了,但還是掛載之前為虛擬的 dom 節點,data.message 還未替換。在 mounted 階段,vue 例項掛載完成,data.message 成功渲染。

更新前/後:當 data 變化時,會觸發 beforeUpdate 和 updated 方法。

銷燬前/後:在執行 destroy 方法後,對 data 的改變不會再觸發周期函式,說明此時 vue 例項已經解除了事件監聽以及和 dom 的繫結,但是 dom 結構依然存在

15. 元件之間如何傳值?

父元件與子元件傳值:Props

子元件向父元件傳遞資料: 子元件通過$emit方法傳遞引數,觸發父元件event

16. vue-router 有哪幾種導航鉤子?

全域性導航鉤子

router.beforeEach(to, from, next),

router.beforeResolve(to, from, next),

router.afterEach(to, from ,next)

元件內鉤子

beforeRouteEnter,

beforeRouteUpdate,

beforeRouteLeave

單獨路由獨享元件

beforeEnter

17. vue 的雙向繫結的原理是什麼

vue.js 是採用資料劫持結合釋出者-訂閱者模式的方式,通過 Object.defineProperty()來劫持各個屬性的 setter,getter,在資料變動時釋出訊息給訂閱者,觸發相應的監聽回撥。

18. vuex 的mutation和action的特性是什麼?有什麼區別?

mutation用於修改state的資料,是同步的。

action 類似於 muation, 不同在於:action 提交的是 mutation,而不是直接變更狀態

action 可以包含任意非同步操作

19. 寫 React / Vue 專案時為什麼要在元件中寫 key,其作用是什麼?

在開發過程中,我們需要保證某個元素的 key 在其同級元素中具有唯一性。在 Diff 演算法中 會藉助元素的 Key 值來判斷該元素是新近建立的還是被移動而來的元素,從而減少不必要的元素重渲染。

20. computed 和 watched 的區別:

computed 是計算屬性,依賴其他屬性計算值,


相關文章