vue 前端框架面試問題彙總

1 active-class是哪一個組件屬性。嵌套路由怎麼定義？

    解、vue-router 模塊的router-link 組件

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

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

3 Vue-router有幾種導航鉤子？

  解,三種。第一種是全局導航鉤子。router.beforeEach(to,from,next) 做用，調整前進行判斷攔截，第二種：組件內的鉤子，第三種，單獨路由獨享組件。

4 scss 是什麼？安裝使用的步驟是？那幾大特徵？

  解、預處理SCSS 把css 當前 函數的編寫，定義變量，嵌套。先安裝。css-loader node-loader sass-loader 預加載模塊，在webpack-base.config.js 配置文件中加多一個擴展extenstion 在加多一個模塊：Module裏面test loader.

4.1 scss 是什麼？在vue.cli中的安裝使用步驟？那幾大特徵？

   解、css 的預編譯。

    使用步驟 

     1 用npm 下三個loader(sass-loader,css-loader,node-sass)

     2 在build 目錄找到webpack.base.config.js 在哪一個extends 屬性中加擴展.scss

    3  在同一個文件裏面，配置一個module 屬性 

    4  而後在組件的style 標籤加上lang 屬性 列如 lang = 'scss'

  有幾大特色

      能夠用變量，能夠用混合器  能夠嵌套

   5 mint-ul 是什麼。怎麼使用。說出至少三個組件使用的方法

      解, 基於vue的前端組件庫。npm安裝，而後import樣式和js，vue.use（mintUi）全局引入。在單個組件局部引入：import {Toast} from ‘mint-ui’。組件一：Toast(‘登陸成功’)；組件二：mint-header；組件三：mint-swiper

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

     解，能夠實現雙向綁定，指令，（v-class v-for v-if v-else v-on）  vue 的Model 層 data 屬性  綁定事件<input v-on:click = dolog()>

 7 axios 是什麼？怎麼使用？ vue中標籤怎麼綁定事件?

   解，請求後臺資源的模塊。Npm install axios -S 裝好，而後發送的是跨越 須要在配置文件中 config/ index.js 進行配置。後臺若是是tp5 則須要定義一個路由。用js 把import 進來。 而後get post 返回在then 函數若是成功。失敗則是.catch 函數

8 axops+tp5 階段中，調試aixo.post （‘api/user’）進行什麼操做? aixos.pust （‘api/user/8’）

 解 跨域 添加用戶操做。更新操做

9 什麼是restful api 怎麼使用。

   是一個api 標準。 無狀態請求的路由地址是固定的，若是是tp5則先路由配置中把資源路由配置好。標準有：.post .put .delete

10 Vuex 是什麼？ 怎麼使用 ？ 那些場景使用它？

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

11 mvvm 框架是什麼？ 它是其餘框架的區別是什麼？ 那些場景適合。

  解，一個model+view+viewModel 框架。 數據模型model viewModel 連接兩個。

12 mvvm框架是什麼? 其它框架jquery 的區別是什麼。那些場景適合？

 解，一個model+view+viewModel框架，數據模型model，viewModel鏈接兩個、

區別：vue數據驅動，經過數據來顯示視圖層而不是節點操做。

場景：數據操做比較多的場景，更加便捷。

13自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？

  解， 全局定義指令：在vue 對象的directive 方法裏面有兩個參數，一個是指令名稱，另外一個是函數，組件內自定義指令，directvies 鉤子函數，bind 綁定事件觸發，inserted 節點插入的時候觸發。ubdate 組件內相關更新。

鉤子函數參數el binding 

13 說出至少4種，Vue當中的指令和他的方法？

  解， v-if 判斷是否隱藏。v-for 數據循環 v-bind：class 綁定一個屬性v-model 數據雙向綁定  v-bind: style 添加數據樣式

 14 Vue-router 是什麼？ 他有那些組件？

  解，VUE 是用來寫路由的插件，router-link router-view

15 導航鉤子函數有哪些？他們有哪些參數？

 解，自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？

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

   解， vue.js 採用數據劫持結合發佈者，訂閱模式的方式，經過object.defineProperty 來劫持各個屬性的setter,getter 在數據變更的時候發佈消息訂閱者，觸發相應的監聽回調函數。

第一步，須要OBSERVER 的數據對象進行遞歸遍歷，包括紫屬性的對象屬性。

   這樣的話，給對象的某個值賦值。就會觸發seter 那麼監聽聽到了數據變化。

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

第三步，watcher 訂閱者是Observer和Compile 之間通信的橋樑，主要作的事情是，

    1 自身實例化失望屬性訂閱器裏面添加本身

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

    3 待屬性變更dep.notice（）通知時，調用吱聲的Update 方法，並觸發Compile 中 綁定的回調函數

  第四步 Mvvm 做爲數據綁定的入口，整合observer, complie 和 watcher 三者。經過Observer 倆監聽本身的mode 數據變化，經過complie 來解析編譯模板指令，最終利用watcher 打起Observer 和 Complie 以前的通信橋樑。達到數據變化，

   視圖更新，數據變動的雙向綁定效果

17  請詳細說下對你對Vue 生命週期的理解。

  解， 建立前、建立後， 更新前，更新後銷燬前 銷燬後

18 請對封裝的Vue組件的過程

    解 首先組件能夠提高整個項目的開發效率，可以把頁面抽象成多個相對的模板，解決咱們傳統的項目開發，效率低，難維護，複用性。而後，使用Vue.extend 方法建立一個組件，而後使用Vue.component 方法組件，子組件須要數據，能夠在props 中接受

定義，子組件修改好數據後，想把數據傳遞給父組件，能夠採用EMIT方法。

19 你怎麼認識的vuex？

 解，vue能夠理解爲一種開發模式或者框架，好比php 有thinkphp java 有spring 

   經過狀態集中管理驅動組件的變化 應用集中在store中,改變狀態的方式是提交mutations，這是個同步的事物； 異步邏輯應該封裝在action中。

20 vue-loader 是什麼，使用它的用途用那些？

答：解析.vue文件的一個加載器，跟template/js/style轉換成js模塊。

用途：js能夠寫es六、style樣式能夠scss或less、template能夠加jade等
 

2一、請說出vue.cli項目中src目錄每一個文件夾和文件的用法？

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

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

答：第一步：在components目錄新建你的組件文件（smithButton.vue），script必定要export default {

第二步：在須要用的頁面（組件）中導入：import smithButton from ‘../components/smithButton.vue’

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

第四步：在template視圖view中使用，<smith-button>  </smith-button>
問題有：smithButton命名，使用的時候則smith-button。

2三、聊聊你對Vue.js的template編譯的理解？

答：簡而言之，就是先轉化成AST樹，再獲得的render函數返回VNode（Vue的虛擬DOM節點）

詳情步驟：

首先，經過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 源代碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以建立編譯器的。另外compile還負責合併option。

而後，AST會通過generate（將AST語法樹轉化成render funtion字符串的過程）獲得render函數，render的返回值是VNode，VNode是Vue的虛擬DOM節點，裏面有（標籤名、子節點、文本等等）

 

挑戰一下：
一、vue響應式原理？
二、vue-router實現原理？
三、爲何要選vue？與其它框架對比的優點和劣勢？
四、vue如何實現父子組件通訊，以及非父子組件通訊？
五、vuejs與angularjs以及react的區別？
六、vuex是用來作什麼的？
七、vue源碼結構
 

不定項選擇題：

• 下列關於vue的組件說法不正確的是（    ）
  1. 不必定要寫style
  2. template視圖裏能夠寫多個div容器
  3. 父組件給子組件傳值需定義props屬性
  4. 子組件與父組件通訊需定義$emit屬性

 

• 下面關於vue的聲明週期說法不正確的是（    ）
  1. 總共分爲8個階段:建立前/後、載入前/後、更新前/後、銷燬前/後、
  2. updated和beforeUpdate分別是更新完成和更新前
  3. 建立後this才能夠獲取屬性、mounted時$el節點才被渲染
  4. created建立後$el就不是undefined了

• 下面關於js框架說法正確的是（    ）
  1. Vue是一個MVVM框架
  2. Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件
  3. Vue中可使用 v-for 指令來循環對象
  4. 在 input 輸入框中咱們可使用 v-model 指令來實現雙向數據綁定

 若是你們以爲總結的能夠，但願你們能夠點個贊或者讚揚一下 ，謝謝。2018-09-14