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

1、Vue的雙向數(shù)據(jù)綁定原理是什么？

答 ： vue是采用數(shù)據(jù)劫持，并且使用發(fā)布-訂閱者的開發(fā)模式。原理是觀察者observer通過Object.defineProperty()來劫持到各個屬性的getter setter，在數(shù)據(jù)變動的時候，會被observer觀察到，會通過Dep通知數(shù)據(jù)的訂閱者watcher，之后進行相應(yīng)的視圖上面的變化

具體實現(xiàn)步驟，感興趣的可以看看

第一步：需要observe的數(shù)據(jù)對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter
這樣的話，給這個對象的某個值賦值，就會觸發(fā)setter，那么就能監(jiān)聽到了數(shù)據(jù)變化

第二步：compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應(yīng)的節(jié)點綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖

第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:
1、在自身實例化時往屬性訂閱器(dep)里面添加自己
2、自身必須有一個update()方法
3、待屬性變動dep.notice()通知時，能調(diào)用自身的update()方法，并觸發(fā)Compile中綁定的回調(diào)，則功成身退。

第四步：MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果

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

答 ： 創(chuàng)建前/后，DOM渲染前/后，更新前/后，銷毀前/后；
對于各個周期的理解：
創(chuàng)建前/后：
beforeCreated：此時的vue實例還沒有掛載元素$el，數(shù)據(jù)對象data也是undefiend；
created：vue實例的數(shù)據(jù)對象data有了，但是$el還沒有
載入前/后：
beforeMount：vue的實例的$el和data都初始化了，但還是掛載在之前虛擬的DOM節(jié)點上面，data.message還未替換
mounted :vue實例掛載完成，data.message成功渲染。
更新前/后
在data發(fā)生變化的時候，會觸發(fā)beforeUpdate和updated方法。
銷毀前/后：
在destiory之后，對data的改變不會再觸發(fā)周期函數(shù)，說明此時vue實例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結(jié)構(gòu)依然存在

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

首先，組件可以提升整個項目的開發(fā)效率。能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統(tǒng)項目開發(fā)：效率低、難維護、復(fù)用性等問題。
然后，使用Vue.extend方法創(chuàng)建一個組件，然后使用Vue.component方法注冊組件。子組件需要數(shù)據(jù)，可以在props中接受定義。而子組件修改好數(shù)據(jù)后，想把數(shù)據(jù)傳遞給父組件?？梢圆捎胑mit方法。

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

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

5、嵌套路由怎么定義？

當有多層組件嵌套的時候，可以考慮嵌套路由實現(xiàn)
因此我們需要在 VueRouter 的參數(shù)中使用 children 配置，這樣就可以很好的實現(xiàn)路由嵌套。
可能還會問如何實現(xiàn)重定向：
使用redirect配置

6.怎么定義vue-router的動態(tài)路由？怎么獲取傳過來的動態(tài)參數(shù)？

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

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

三種；
最常用的是一個全局導航鉤子，router.beforeEach(to,from,next),可以用作路由跳轉(zhuǎn)前進行判斷攔截
第二種：組件內(nèi)的鉤子
第三種：單獨路由獨享組件

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

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

9、v-model是什么？怎么使用？ vue中標簽怎么綁定事件？

可以實現(xiàn)雙向綁定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model層的data屬性。綁定事件：

10、axios是什么？怎么使用？怎么解決跨域的問題

axios：是請求后臺資源的模塊；
因為vue-cli會建立一個服務(wù)器，那么本地去用axios請求，會造成跨域；解決方法是通過vue-cli生成的框架的結(jié)構(gòu)目錄下的config/index.js，去配置proxyTable配置項；
詳情可參照：https://blog.csdn.net/qq_33559304/article/details/72966028

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

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

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

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