Vue常見的面試題

Joanne. ?發表於2018-10-18
Vue面試題

1、Vue的雙向資料繫結原理是什麼？

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

具體步驟：

第一步：需要observe的資料物件進行遞迴遍歷，包括子屬性物件的屬性，都加上setter和getter這樣的話，給這個物件的某個值賦值，就會觸發setter，那麼就能監聽到了資料變化；

第二步：compile解析模板指令，將模板中的變數替換成資料，然後初始化渲染頁面檢視，並將每個指令對應的節點繫結更新函式，新增監聽資料的訂閱者，一旦資料有變動，收到通知，更新檢視；

第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要做的事情是:

（1）、在自身例項化時往屬性訂閱器(dep)裡面新增自己

（2）、自身必須有一個update()方法

（3）、待屬性變動dep.notice()通知時，能呼叫自身的update()方法，並觸發Compile中繫結的回撥，則功成身退。

第四步：MVVM作為資料繫結的入口，整合Observer、Compile和Watcher三者，通過Observer來監聽自己的model資料變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到資料變化->檢視更新；檢視互動變化(input) ->資料model變更的雙向繫結效果。


2、請詳細說下你對vue生命週期的理解？

答：Vue 例項從建立到銷燬的過程，就是生命週期。也就是從開始建立、初始化資料、編譯模板、掛載Dom→渲染、更新→渲染、解除安裝等一系列過程，我們稱這是 Vue 的生命週期。

總共分為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結構依然存在

生命週期一些鉤子的使用方法：

  • beforecreate : 可以在這加個loading事件，在載入例項時觸發
  • created : 初始化完成時的事件寫在這裡，如在這結束loading事件，非同步請求也適宜在這裡呼叫
  • mounted : 掛載元素，獲取到DOM節點
  • updated : 如果對資料統一處理，在這裡寫上相應函式
  • beforeDestroy : 可以做一個確認停止事件的確認框
  • nextTick : 更新資料後立即操作dom

生命週期的作用：它的生命週期中有多個事件鉤子，讓我們在控制整個Vue例項的過程時更容易形成好的邏輯。

列舉出3個Vue中常用的生命週期鉤子函式

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


3.元件之間的傳值通訊？ 

 父元件向子元件傳值： 

 1）子元件在props中建立一個屬性，用來接收父元件傳過來的值； 

 2）在父元件中註冊子元件； 

 3）在子元件標籤中新增子元件props中建立的屬性； 

 4）把需要傳給子元件的值賦給該屬性 

 子元件向父元件傳值： 

 1）子元件中需要以某種方式（如點選事件）的方法來觸發一個自定義的事件； 

 2）將需要傳的值作為$emit的第二個引數，該值將作為實參傳給響應事件的方法； 

 3）在父元件中註冊子元件並在子元件標籤上繫結自定義事件的監聽。


4、請說下封裝 vue 元件的過程？

答：首先，元件可以提升整個專案的開發效率。能夠把頁面抽象成多個相對獨立的模組，解決了我們傳統專案開發：效率低、難維護、複用性等問題。

使用Vue.extend方法建立一個元件，然後使用Vue.component方法註冊元件。子元件需要資料，可以在props中接受定義。而子元件修改好資料後，想把資料傳遞給父元件。可以採用emit方法


5、什麼是MVVM？

MVVM是Model-View-ViewModel的縮寫。MVVM是一種設計思想。Model 層代表資料模型，也可以在Model中定義資料修改和操作的業務邏輯；View 代表UI 元件，它負責將資料模型轉化成UI 展現出來，ViewModel 是一個同步View 和 Model的物件。

在MVVM架構下，View 和 Model 之間並沒有直接的聯絡，而是通過ViewModel進行互動，Model 和 ViewModel 之間的互動是雙向的， 因此View 資料的變化會同步到Model中，而Model 資料的變化也會立即反應到View 上。

ViewModel 通過雙向資料繫結把 View 層和 Model 層連線了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注資料狀態的同步問題，複雜的資料狀態維護完全由 MVVM 來統一管理。


6、你是怎麼認識vuex的？

答：vuex可以理解為一種開發模式或框架。比如PHP有thinkphp，java有spring等。
通過狀態（資料來源）集中管理驅動元件的變化（好比spring的IOC容器對bean進行集中管理）。

應用級的狀態集中放在store中； 改變狀態的方式是提交mutations，這是個同步的事物； 非同步邏輯應該封裝在action中。

vuex有五種屬性，分別是 State、 Getter、Mutation 、Action、 Module

  • vuex的State特性
    A、Vuex就是一個倉庫，倉庫裡面放了很多物件。其中state就是資料來源存放地，對應於一般Vue物件裡面的data
    B、state裡面存放的資料是響應式的，Vue元件從store中讀取資料，若是store中的資料發生改變，依賴這個資料的元件也會發生更新
    C、它通過mapState把全域性的 state 和 getters 對映到當前元件的 computed 計算屬性中
  • vuex的Getter特性
    A、getters 可以對State進行計算操作，它就是Store的計算屬性
    B、 雖然在元件內也可以做計算屬性，但是getters 可以在多元件之間複用
    C、 如果一個狀態只在一個元件內使用，是可以不用getters
  • vuex的Mutation特性
    Action 類似於 mutation，不同在於：Action 提交的是 mutation，而不是直接變更狀態；Action 可以包含任意非同步操作。


7.vue-loader是什麼？使用它的用途有哪些？

答：解析.vue檔案的一個載入器，跟template/js/style轉換成js模組。

用途：js可以寫es6、style樣式可以scss或less、template可以加jade等


8.請說出vue.cli專案中src目錄每個資料夾和檔案的用法？

答：assets資料夾是放靜態資源；components是放元件；router是定義路由相關的配置;view檢視；app.vue是一個應用主元件；main.js是入口檔案


9、vue-router是什麼？它有哪些元件？

答：vue用來寫路由一個外掛。router-link、router-view


10、怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態引數？
答：在router目錄下的index.js檔案中，對path屬性加上/:id。 使用router物件的params.id


11.vue-router有哪幾種導航鉤子？

答：三種，一種是全域性導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。第二種：元件內的鉤子；第三種：單獨路由獨享元件


12、active-class是哪個元件的屬性？巢狀路由怎麼定義？
答：vue-router模組的router-link元件。


13、scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？

答：css的預編譯。

使用步驟：

第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）

第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個擴充.scss

第三步：還是在同一個檔案，配置一個module屬性

第四步：然後在元件的style標籤加上lang屬性 ，例如：lang=”scss”

有哪幾大特性:

1、可以用變數，例如（$變數名稱=值）；

2、可以用混合器，例如（）

3、可以巢狀


14、vue.cli中怎樣使用自定義的元件？有遇到過哪些問題嗎？

第一步：在components目錄新建你的元件檔案（indexPage.vue），script一定要export default {}

第二步：在需要用的頁面（元件）中匯入：import indexPage from '@/components/indexPage.vue'

第三步：注入到vue的子元件的components屬性上面,components:{indexPage}

第四步：在template檢視view中使用，

例如有indexPage命名，使用的時候則index-page


15、v-show和v-if指令的共同點和不同點

  • v-show指令是通過修改元素的display的CSS屬性讓其顯示或者隱藏
  • v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果


16、如何讓CSS只在當前元件中起作用

將當前元件的<style>修改為<style scoped>


17、<keep-alive></keep-alive>的作用是什麼?

<keep-alive></keep-alive> 包裹動態元件時，會快取不活動的元件例項，主要用於保留元件狀態或避免重新渲染。


18、為什麼使用key？

當有相同標籤名的元素切換時，需要通過 key 特性設定唯一的值來標記以讓 Vue 區分它們，否則 Vue 為了效率只會替換相同標籤內部的內容。


19、為什麼避免 v-if 和 v-for 用在一起

當 Vue 處理指令時，v-for 比 v-if 具有更高的優先順序，通過v-if 移動到容器元素，不會再重複遍歷列表中的每個值。取而代之的是，我們只檢查它一次，且不會在 v-if 為否的時候運算 v-for。


20、VNode是什麼？虛擬 DOM是什麼？

Vue在 頁面上渲染的節點，及其子節點稱為“虛擬節點 (Virtual Node)”，簡寫為“VNode”。“虛擬 DOM”是由 Vue 元件樹建立起來的整個 VNode 樹的稱呼


21、在Vue中使用外掛的步驟

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





相關文章