1、2019 VUE前端面試題1 、 active-class是哪個組件的屬性?嵌套路由怎么定義?答： vue-router模塊的 router-link組件。2 、怎么定義vue-router的動態路由 ?怎么獲取傳過來的動態參數?答：在 router目錄下的index.js文件中， 對 path屬性加上 /:id 。 使用 router對象的params.id3 、 vue-router有哪幾種導航鉤子?答：三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。第二種：組件內的鉤子;第三種：單獨路由獨享組件4 、 scss 是什么

2、?安裝使用的步驟是?有哪幾大特性 ?答：預處理 css，把 css 當前函數編寫， 定義變量 ,嵌套。 先裝 css-loader、node-loader、sass-loader等加載器模塊，在webpack-base.config.js配置文件中加多一個拓展:extenstion ，再加多一個模塊： module 里面 test 、 loader4.1 、 scss 是什么 ?在 vue.cli中的安裝使用步驟是?有哪幾大特性 ?答： css 的預編譯。使用步驟：第一步：用npm下三個 loader(sass-loader、css-loader、node-sass)第二步：在build目錄找

3、到webpack.base.config.js，在那個 extends屬性中加一個拓展 .scss第三步：還是在同一個文件，配置一個module屬性第四步：然后在組件的style 標簽加上 lang 屬性，例如： lang= ” scss”有哪幾大特性 :1 、可以用變量，例如($ 變量名稱 = 值 );2 、可以用混合器，例如()3 、可以嵌套5 、 mint-ui是什么 ?怎么使用 ?說出至少三個組件使用方法?答：基于vue 的前端組件庫。npm安裝，然后import樣式和 js， vue.use(mintUi)全局引入。在單個組件局部引入：import Toast from mint-u

4、i。組件一： Toast( 登錄成功 );組件二： mint-header;組件三： mint-swiper6 、 v-model是什么 ?怎么使用 ? vue中標簽怎么綁定事件?答：可以實現雙向綁定，指令(v-class 、v-for 、v-if 、v-show 、v-on) 。vue 的 model層的 data 屬性。綁定事件：<input click=doLog() />7 、 axios是什么 ?怎么使用 ?描述使用它實現登錄功能的流程?答：請求后臺資源的模塊。npm install axios -S裝好，然后發送的是跨域，需在配置文件中 config/index.js進

5、行設置。 后臺如果是Tp5 則定義一個資源路由。js 中使用 import進來，然后 .get 或 .post 。返回在 .then函數中如果成功，失敗則是在.catch 函數中8 、 axios+tp5進階中，調用axios.post( api/user ) 是進行的什么操作?axios.put( api/user/8)呢 ?答：跨域，添加用戶操作，更新操作。9 、什么是 RESTful API?怎么使用 ?答：是一個api 的標準，無狀態請求。請求的路由地址是固定的，如果是tp5 則先路由配置中把資源路由配置好。標準有：.post .put .delete10 、 vuex是什么 ?怎么使

6、用 ?哪種功能場景使用它?答： vue 框架中狀態管理。在main.js引入 store ，注入。新建了一個目錄store ， .export。場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車11 、 mvvm框架是什么 ?它和其它框架(jquery)的區別是什么?哪些場景適合?答：一個model+view+viewModel框架，數據模型model ， viewModel連接兩個區別： vue 數據驅動，通過數據來顯示視圖層而不是節點操作。場景：數據操作比較多的場景，更加便捷12 、自定義指令 (v-check、v-focus)的方法有哪些 ?它有哪些鉤子函數?還有哪些鉤子

7、函數參數 ?答：全局定義指令： 在 vue 對象的 directive方法里面有兩個參數，一個是指令名稱，另外一個是函數。組件內定義指令：directives鉤子函數： bind( 綁定事件觸發 ) 、inserted(節點插入的時候觸發)、 update(組件內相關更新 )鉤子函數參數：el 、 binding13 、說出至少4 種 vue 當中的指令和它的用法?答：v-if ：判斷是否隱藏;v-for ：數據循環出來;v-bind:class：綁定一個屬性 ;v-model：實現雙向綁定14 、 vue-router是什么 ?它有哪些組件?答： vue 用來寫路由一個插件。router-l

8、ink、router-view15 、導航鉤子有哪些?它們有哪些參數?答：導航鉤子有： a/ 全局鉤子和組件內獨享的鉤子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、 beforeRouteLeave參數：有 to( 去的那個路由 )、 from( 離開的路由 ) 、next( 一定要用這個函數才能去到下一個路由，如果不用就攔截)常用就這幾種16 、 Vue 的雙向數據綁定原理是什么?答： vue.js是采用數據劫持結合發布者- 訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter ，getter

9、 ，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。具體步驟：第一步：需要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上setter和 getter這樣的話，給這個對象的某個值賦值，就會觸發setter ，那么就能監聽到了數據變化第二步： compile解析模板指令，將模板中的變量替換成數據，然后初始化渲染頁面視圖，并將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖第三步： Watcher訂閱者是Observer和 Compile之間通信的橋梁， 主要做的事情是:1 、在自身實例化時往屬性訂閱器(dep) 里面添加自己2 、自身必

10、須有一個update()方法3 、待屬性變動dep.notice()通知時，能調用自身的update()方法，并觸發Compile中綁定的回調，則功成身退。第四步： MVVM作為數據綁定的入口，整合 Observer、Compile和 Watcher三者，通過 Observer來監聽自己的model數據變化， 通過 Compile來解析編譯模板指令，終利用 Watcher搭起 Observer和 Compile之間的通信橋梁，達到數據變化->視圖更新 ;視圖交互變化 (input) ->數據 model變更的雙向綁定效果。ps ： 16 題答案同樣適合”vue data是怎么實現的

11、?”此面試題。17 、請詳細說下你對vue 生命周期的理解?答：總共分為8 個階段創建前/ 后，載入前 / 后，更新前 / 后，銷毀前 / 后。創建前 / 后： 在 beforeCreated階段， vue 實例的掛載元素$el 和數據對象data 都為undefined，還未初始化。 在 created階段， vue 實例的數據對象data 有了， $el 還沒有。載入前 / 后：在 beforeMount階段， vue 實例的 $el 和 data都初始化了，但還是掛載之前為虛擬的dom節點， data.message還未替換。在mounted階段， vue 實例掛載完成， data.me

12、ssage成功渲染。更新前 / 后：當 data 變化時，會觸發beforeUpdate和 updated方法。銷毀前 / 后：在執行destroy方法后，對data的改變不會再觸發周期函數，說明此時vue 實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在18 、請說下封裝vue組件的過程 ?答：首先，組件可以提升整個項目的開發效率。能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統項目開發：效率低、難維護、復用性等問題。然后，使用Vue.extend方法創建一個組件，然后使用Vponent方法注冊組件。子組件需要數據，可以在props中接受定義。而子組件修改好數據后，想把數據

13、傳遞給父組件?？梢圆捎胑mit方法。19 、你是怎么認識vuex的 ?答： vuex 可以理解為一種開發模式或框架。比如PHP 有 thinkphp，java 有 spring等。通過狀態 (數據源 ) 集中管理驅動組件的變化(好比 spring的 IOC 容器對 bean 進行集中管理 )。應用級的狀態集中放在store中 ; 改變狀態的方式是提交mutations，這是個同步的事物; 異步邏輯應該封裝在action中。20 、 vue-loader是什么 ?使用它的用途有哪些?答：解析 .vue 文件的一個加載器，跟template/js/style轉換成 js 模塊。用途： js 可以寫

14、 es6 、 style 樣式可以scss 或 less 、 template可以加 jade 等21 、請說出vue.cli項目中 src 目錄每個文件夾和文件的用法?答： assets 文件夾是放靜態資源;components是放組件 ;router是定義路由相關的配置;view 視圖 ;app.vue是一個應用主組件;main.js是入口文件22 、 vue.cli中怎樣使用自定義的組件?有遇到過哪些問題嗎?答：第一步：在components目錄新建你的組件文件(smithButton.vue)，script一定要 export default 第二步：在需要用的頁面(組件 )中導入： import smithButton from./components/smithButton.vue第三步：注入到 vue 的子組件的components屬性上面 ,components:smithButton第四步：在template視圖 view 中使用，問題有： smithButton命名，使用的時候則smith-button。23 、聊聊你對Vue.js的 template編譯的理解 ?答：簡而言之，就是先轉化成AST 樹，再得到的render函數返回VNode(Vue的虛擬 DOM 節點)詳情步驟：首先，通過 compile編譯器把template編譯成 AST 語法樹 (abs