vue面試常被問到的問題整理

一、Vue的雙向數據綁定原理是什麼？

答 ： vue是採用數據劫持，而且使用發佈-訂閱者的開發模式。原理是觀察者observer經過Object.defineProperty()來劫持到各個屬性的getter setter，在數據變更的時候，會被observer觀察到，會經過Dep通知數據的訂閱者watcher，以後進行相應的視圖上面的變化

具體實現步驟，感興趣的能夠看看

第一步：須要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter 
這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化

第二步：compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖

第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是: 
一、在自身實例化時往屬性訂閱器(dep)裏面添加本身 
二、自身必須有一個update()方法 
三、待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。

第四步：MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變動的雙向綁定效果

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

答 ： 建立前/後，DOM渲染前/後，更新前/後，銷燬前/後； 
對於各個週期的理解： 
建立前/後： 
beforeCreated：此時的vue實例尚未掛載元素$el，數據對象data也是undefiend； 
created：vue實例的數據對象data有了，可是$el尚未 
載入前/後： 
beforeMount：vue的實例的$el和data都初始化了，但仍是掛載在以前虛擬的DOM節點上面，data.message還未替換 
mounted :vue實例掛載完成，data.message成功渲染。 
更新前/後 
在data發生變化的時候，會觸發beforeUpdate和updated方法。 
銷燬前/後： 
在destiory以後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，可是dom結構依然存在

3.請說下封裝 vue 組件的過程？

首先，組件能夠提高整個項目的開發效率。可以把頁面抽象成多個相對獨立的模塊，解決了咱們傳統項目開發：效率低、難維護、複用性等問題。 
而後，使用Vue.extend方法建立一個組件，而後使用Vue.component方法註冊組件。子組件須要數據，能夠在props中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。能夠採用emit方法。

四、active-class是哪一個組件的屬性？

vue-router模塊的router-link組件。

五、嵌套路由怎麼定義？

當有多層組件嵌套的時候，能夠考慮嵌套路由實現 
所以咱們須要在 VueRouter 的參數中使用 children 配置，這樣就能夠很好的實現路由嵌套。 
可能還會問如何實現重定向： 
使用redirect配置

6.怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？

在router目錄下的index.js文件中，對path屬性加上/:id。 
使用router對象的params.id。

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

三種； 
最經常使用的是一個全局導航鉤子，router.beforeEach(to,from,next),能夠用做路由跳轉前進行判斷攔截 
第二種：組件內的鉤子 
第三種：單獨路由獨享組件

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

css的預編譯。 
使用步驟： 
第一步：用npm 下三個loader（sass-loader、css-loader、node-sass） 
第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss 
第三步：仍是在同一個文件，配置一個module屬性 
第四步：而後在組件的style標籤加上lang屬性 ，例如：lang=」scss」

九、v-model是什麼？怎麼使用？ vue中標籤怎麼綁定事件？

能夠實現雙向綁定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model層的data屬性。綁定事件：

十、axios是什麼？怎麼使用？怎麼解決跨域的問題

axios：是請求後臺資源的模塊； 
由於vue-cli會創建一個服務器，那麼本地去用axios請求，會形成跨域；解決方法是經過vue-cli生成的框架的結構目錄下的config/index.js，去配置proxyTable配置項； 
詳情可參照：https://blog.csdn.net/qq_33559304/article/details/72966028

11.vuex是什麼？怎麼使用？哪一種功能場景使用它？

vue框架中狀態管理。在main.js引入store，注入。新建了一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車

12.vuex的store有幾個屬性值？

state、mutations、actions、getters四個屬性值