vue面試題

vue-cli工程

---

一、構建的 vue-cli 工程都到了哪些技術，它們的做用分別是什麼？

     node.js  依賴

二、vue-cli 工程經常使用的 npm 命令有哪些？

     npm install;  npm run dev;  npm run build;

三、請說出vue-cli工程中每一個文件夾和文件的用處

     1. build文件夾：存放webpack的相關配置以及腳本文件，在實際開發過程當中只會偶爾用到webpack.base.conf.js，配置less、babel等編譯器

     2.config文件夾：經常使用到此文件夾下 config.js（index.js） 配置開發環境的 端口號、是否開啓熱加載 或者 設置生產環境的靜態資源相對路徑、是否開啓gzip壓縮、npm run build 命令打包生成靜態資源的名稱和路徑等。

     3. node_modules：存放npm install命令下載的開發環境和生產環境的各類依賴

     4.src文件：工程項目的源碼以及資源，包括頁面圖片、路由組件、路由配置、vuex、入口文件等

四、config文件夾 下 index.js 的對於工程 開發環境 和 生產環境 的配置

五、請你詳細介紹一些 package.json 裏面的配置

vue核心知識點

一、對於Vue是一套漸進式框架的理解

二、vue.js的兩個核心是什麼？

     數據驅動、組件系統

三、請問 v-if 和 v-show 有什麼區別

     v-show:css屬性display

     v-if是否渲染

四、vue經常使用的修飾符

1. .stop：用來阻止單擊事件的冒泡
2. .self：表示當前事件發生在元素自己而不是子元素的時候進行觸發
3. .prevent：表示提交事件再也不進行從新加載
4. .capture：表示事件傾聽，在事件發生的時候進行調用

五、v-on能夠監聽多個方法嗎？

     能夠 <button @click="a(),b()">點我ab</button>

             <button v-on="{mouseenter: onEnter,mouseleave: onLeave}">鼠標進來1</button>

六、vue中 key 值的做用

     惟一標識 更高效的渲染虛擬dom

七、vue-cli工程升級vue版本

     npm install -g @vue/cli

八、vue事件中如何使用event對象？

     傳參 <button v-on:click="click($event, 233)">click me</button>

var app = new Vue({ el: '#app', methods: { click(event, val) { console.log(typeof event); // object } } });

九、$nextTick的使用

     Vue 實現響應式並非數據發生變化以後 DOM 當即變化，而是按必定的策略進行 DOM 的更新。

     $nextTick 是在下次 DOM 更新循環結束以後執行延遲迴調，在修改數據以後使用 $nextTick，則能夠在回調中獲取更新後的 DOM。

十、Vue 組件中 data 爲何必須是函數   

     類比引用數據類型，Object是引用數據類型,若是不用function 返回,每一個組件的data 都是內存的同一個地址,一個數據改變了其餘也改變了;

     javascipt只有函數構成做用域(注意理解做用域,只有函數的{}構成做用域,對象的{}以及 if(){}都不構成做用域)，data是一個函數時，每一個組件實例都有本身的做用域，每一個實例相互獨立,不會相互影響

十一、v-for 與 v-if 的優先級

     v-for優先級更高

十二、vue中子組件調用父組件的方法

     this.$parent.event

     this.$emit

1三、vue中 keep-alive 組件的做用

• <keep-alive>包裹動態組件時,會緩存不活動的組件實例,而不是銷燬它們
• <keep-alive>是一個抽象組件:它自身不會渲染一個DOM元素,也不會出如今父組件鏈中
• 當組件在<keep-alive>內被切換,它的activated和deactivated這兩個生命週期鉤子函數將會被對應執行

1四、vue中如何編寫可複用的組件？

     掛載到原型鏈上

1五、什麼是vue生命週期和生命週期鉤子函數？

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

1六、vue生命週期鉤子函數有哪些？

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

1七、vue如何監聽鍵盤事件中的按鍵？

      1 傳入e.keycode

      2 鍵盤事件 .enter; .tab; .space; .esc; .delete; .up; .left; .right; .down等

1八、vue更新數組時觸發視圖更新的方法

• 當你利用索引直接設置一個項時，例如：vm.items[index] = newValue
• 當你修改數組的長度時，例如：vm.items.length = newLength

     this.$set()

1九、vue中對象更改檢測的注意事項

     Vue沒法檢測到對象屬性的添加和刪除。對於已經建立的實例，Vue 不能動態添加根級別的響應式屬性，可使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性。

      vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' });

     this.$set()

20、解決非工程化項目初始化頁面閃動問題

     頁面在加載的時候閃爍花括號{}}，v-cloak指令和css規則如[v-cloak]{display:none}一塊兒用時，這個指令能夠隱藏未編譯的Mustache標籤直到實例準備完畢。

2一、v-for產生的列表，實現active的切換

     :class

2二、v-model語法糖的組件中的使用

     雙向綁定

2三、十個經常使用的自定義過濾器

     表單驗證方面的  拋出就好

2四、vue等單頁面應用及其優缺點

• 用戶體驗好，快，內容的改變不須要從新加載整個頁面，基於這一點spa對服務器壓力較小
• 先後端分離
• 頁面效果會比較炫酷（好比切換頁面內容時的專場動畫）

2五、什麼是vue的計算屬性？

     computed

2六、vue-cli提供的幾種腳手架模板

     webpack-simple與webpack展開的，browserify

2七、vue父組件如何向子組件中傳遞數據？

     props

2八、vue-cli開發環境使用全局常量

2九、vue-cli生產環境使用全局常量

30、vue彈窗後如何禁止滾動條滾動？

3一、計算屬性的緩存和方法調用的區別

     一、咱們能夠將同一函數定義爲一個方法或是一個計算屬性。兩種方式的最終結果確實是徹底相同的。不一樣的是計算屬性是基於它們的依賴進行緩存的。只在相關依賴發生改變時它們纔會從新求值。相比之下，每當觸發從新渲染時，調用方法將總會再次執行函數。

     二、使用計算屬性仍是methods取決因而否須要緩存，當遍歷大數組和作大量計算時，應當使用計算屬性，除非你不但願獲得緩存。

          咱們爲何須要緩存？假設咱們有一個性能開銷比較大的計算屬性 A，它須要遍歷一個巨大的數組並作大量的計算。而後咱們可能有其餘的計算屬性依賴於 A 。若是沒有緩存，咱們將不可避免的屢次執行 A 的 getter！若是你不但願有緩存，請用方法來替代。

     三、計算屬性是根據依賴自動執行的，methods須要事件調用。

3二、vue-cli中自定義指令的使用

var app = new Vue({ el: '#app', data: { }, // 建立指令(能夠多個)
 directives: { // 指令名稱
 dir1: { inserted(el) { // 指令中第一個參數是當前使用指令的DOM
 console.log(el); console.log(arguments); // 對DOM進行操做
                el.style.width = '200px'; el.style.height = '200px'; el.style.background = '#000'; } } } }) Vue.directive('dir2', { inserted(el) { console.log(el); } }) <div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

 

vue-router

一、vue-router如何響應 路由參數 的變化？

 

二、完整的 vue-router 導航解析流程

     1.導航被觸發；

     2.在失活的組件裏調用beforeRouteLeave守衛；

     3.調用全局beforeEach守衛；

     4.在複用組件裏調用beforeRouteUpdate守衛；

     5.調用路由配置裏的beforeEnter守衛；

     6.解析異步路由組件；

     7.在被激活的組件裏調用beforeRouteEnter守衛；

     8.調用全局beforeResolve守衛；

     9.導航被確認；

     10..調用全局的afterEach鉤子；

     11.DOM更新；

     12.用建立好的實例調用beforeRouteEnter守衛中傳給next的回調函數。

 

三、vue-router有哪幾種導航鉤子（ 導航守衛 ）？

     // 路由配置守衛即配置在路由對象中

     // 組件實力的導航守衛：beforeRouteLeave、beforeRouteEnter、beforeRouteUpdate

     // 全局守衛：beforeEach、beforeResolve、afterEach

     // 路由配置守衛：beforeEnter

 

四、vue-router的幾種實例方法以及參數傳遞

// 第一種 get方法
<router-link :to="{path:'/test',query: {name: id}}">跳轉</router-link>
this.$route.query.name // 第二種 post方法
<router-link :to="{path:'/test',push: {name: id}}">跳轉</router-link>
this.$route.params.name (頁面刷新時會消失) // 第三種 路由方法
{ path: 'test/:name?', name: 'test', component: 'test.vue', props: true, }, props:{name:{required:false,default:''}} （頁面刷新不消失，能夠在路由配置中設置參數）

 

 

五、vue-router的動態路由匹配以及使用

 

六、vue-router如何定義嵌套路由？

     children

 

七、<router-link></router-link>組件及其屬性

     to 目標路由 <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

     replace 設置 replace 屬性的話，當點擊時，會調用 router.replace() 而不是 router.push()，因而導航後不會留下 history 記錄 <router-link :to="{ path: '/abc'}" replace></router-link>

     append 設置 append 屬性後，則在當前（相對）路徑前添加基路徑。例如，咱們從 /a 導航到一個相對路徑 b，若是沒有配置 append，則路徑爲 /b，若是配了，則爲 /a/b <router-link :to="{ path: 'relative/path'}" append></router-link>

     tag 有時候想要 <router-link> 渲染成某種標籤，例如 <li>。 因而咱們使用 tag prop 類指定何種標籤，一樣它仍是會監聽點擊，觸發導航 <router-link to="/foo" tag="li">foo</router-link>

     active-class 設置 連接激活時使用的 CSS 類名。默認值能夠經過路由的構造選項 linkActiveClass 來全局配置

 

八、vue-router實現路由懶加載（ 動態加載路由 ）

     參考官網https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

 

九、vue-router路由的兩種模式

     hash、history

 

十、history路由模式與後臺的配合

vuex

---

一、什麼是vuex？

     Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

二、使用vuex的核心概念

     state getters mutations actions

三、vuex在vue-cli中的應用

     store文件夾下建立模塊化vuex狀態管理機制

四、組件中使用 vuex 的值和修改值的地方？

     調用...mapActions()中的方法改變

五、在vuex中使用異步修改

     調用...mapActions()中的方法改變

六、pc端頁面刷新時實現vuex緩存

     localstorage

http請求

---

一、Promise對象是什麼？

     Promise是異步編程的一種解決方案，它是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法上說，Promise 是一個對象，從它能夠獲取異步操做的消息。Promise 提供統一的 API，各類異步操做均可以用一樣的方法進行處理。         promise對象是一個構造函數，用來生成Promise實例；

二、axios、fetch與ajax有什麼區別？

     axios和ajax都是對XMLHttpRequest對象的封裝

     fetch是ES6出現的，使用了promise對象，純原生js

三、什麼是JS的同源策略和跨域問題？

     同源策略指的是瀏覽器對不一樣源的腳本或者文本的訪問方式進行的限制。好比源a的js不能讀取或設置引入的源b的元素屬性。同源是指相同協議、域名、端口

四、如何解決跨域問題？

     設置請求頭 ACCESS-CONTROL-ALLOW-ORIGIN

五、vue-cli中如何使用JSON數據模擬？

     json-sever配置

六、vue-cli中http請求的統一管理。

     建立一個文件，把請求方法拋出

七、axios有什麼特色？

     axios是一個基於promise的HTTP庫，支持promise的全部API；

     它能夠攔截請求和響應；

     它能夠轉換請求數據和響應數據，並對響應回來的內容自動轉換爲json類型的數據；

     它安全性更高，客戶端支持防護XSRF；

生產環境

---

一、vue打包命令是什麼？

      npm run build

二、vue打包後會生成哪些文件？

     dist文件夾

三、如何配置 vue 打包生成文件的路徑？

     config目錄下的index.js中找到build屬性配置

四、vue如何優化首屏加載速度？

     異步路由加載

     不打包庫文件

源碼剖析

---

一、vue內部與運行機制：

• Vue.js 全局運行機制
• 響應式系統的基本原理
• 什麼是 Virtual DOM？
• 如何編譯template 模板？
• diff算法
• 批量異步更新策略及 nextTick 原理？
• proxy代理？

二、vuex工做原理詳解

• Vue.mixin
• Vue.use
• vuex總體思想誕生於flux,可其的實現方式完徹底全的使用了vue自身的響應式設計，依賴監聽、依賴收集都屬於vue對對象Property set get方法的代理劫持。最後一句話結束vuex工做原理，vuex中的store本質就是沒有template的隱藏着的vue組件；