總結一些vue相關的知識，將筆記整理跟你們分享，有些知識會常常在前端面試的時候會問到，因此作個記錄，但願對你們有所幫助，若是有什麼問題，能夠指出，會積極修正。
若是你們喜歡，能夠點贊或留言我再繼續更新面試題~~~~，謝謝你們~~~css
一、那首先談談你對Vue的理解吧？vue.js是什麼？
Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。 vue是一個漸進式框架，至關於view層, 雙向數據綁定, 他更輕量, 性能上更高效, 比其餘框架更容易上手, 學習成本低, vue須要一個el對象進行實例化,html
二、Vue與Angular以及React的區別？
angular是mvvm框架, 而vue是一個漸進式的框架, 至關於view層, 都有雙向數據綁定, 可是angular中的雙向數據綁定是基於髒檢查機制, vue的雙向數據綁定是基於ES5的getter和setter來實現, 而angular是有本身實現一套模板編譯規則,vue比angular更輕量, 性能上更高效, 比angular更容易上手, 學習成本低, vue須要一個el對象進行實例化, 而angular是整個html頁面下的,單頁面應用, 而vue能夠有個vue實例
1.與AngularJS的區別
相同點： 都支持指令：內置指令和自定義指令；都支持過濾器：內置過濾器和自定義過濾器；都支持雙向數據綁定；都不支持低端瀏覽器。
不一樣點： AngularJS的學習成本高，好比增長了Dependency Injection特性，而Vue.js自己提供的API都比較簡單、直觀；在性能上，AngularJS依賴對數據作髒檢查，因此Watcher越多越慢；Vue.js使用基於依賴追蹤的觀察而且使用異步隊列更新，全部的數據都是獨立觸發的。
2.與React的區別
相同點： React採用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，二者都須要編譯後使用；中心思想相同：一切都是組件，組件實例之間能夠嵌套；都提供合理的鉤子函數，可讓開發者定製化地去處理需求；都不內置列數AJAX，Route等功能到核心包，而是以插件的方式加載；在組件開發中都支持mixins的特性。
不一樣點： React採用的Virtual DOM會對渲染出來的結果作髒檢查；Vue.js在模板中提供了指令，過濾器等，能夠很是方便，快捷地操做Virtual DOM。前端
三、vue 的生命週期？
實例從建立到銷燬的過程，就是生命週期。也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，咱們稱這是 Vue 的生命週期。
應用場景
beforeCreate：在new一個vue實例後，只有一些默認的生命週期鉤子和默認事件，其餘的東西都還沒建立。在beforeCreate生命週期執行的時候，data和methods中的數據都尚未初始化。不能在這個階段使用data中的數據和methods中的方法
create：data 和 methods都已經被初始化好了，若是要調用 methods 中的方法，或者操做 data 中的數據，最先能夠在這個階段中操做
beforeMount：執行到這個鉤子的時候，在內存中已經編譯好了模板了，可是尚未掛載到頁面中，此時，頁面仍是舊的
mounted：執行到這個鉤子的時候，就表示Vue實例已經初始化完成了。此時組件脫離了建立階段，進入到了運行階段。 若是咱們想要經過插件操做頁面上的DOM節點，最先能夠在和這個階段中進行
beforeUpdate： 當執行這個鉤子時，頁面中的顯示的數據仍是舊的，data中的數據是更新後的， 頁面尚未和最新的數據保持同步
updated：頁面顯示的數據和data中的數據已經保持同步了，都是最新的
beforeDestory：Vue實例從運行階段進入到了銷燬階段，這個時候上全部的 data 和 methods ， 指令， 過濾器 ……都是處於可用狀態。尚未真正被銷燬
destroyed： 這個時候上全部的 data 和 methods ， 指令， 過濾器 ……都是處於不可用狀態。組件已經被銷燬了。vue
四、vue生命週期的做用是什麼？
它的生命週期中有多個事件鉤子，讓咱們在控制整個Vue實例的過程時更容易造成好的邏輯。node
五、vue生命週期總共有幾個階段？
它能夠總共分爲8個階段：建立前/後, 載入前/後,更新前/後,銷燬前/銷燬後ios
六、第一次頁面加載會觸發哪幾個鉤子？
beforeCreate， created， beforeMount， mountedgit
七、vue獲取數據在哪一個周期函數？
通常 created/beforeMount/mounted 皆可.
好比若是你要操做 DOM , 那確定 mounted 時候才能操做.github
八、mvvm 框架是什麼？
vue是實現了雙向數據綁定的mvvm框架，當視圖改變動新模型層，當模型層改變動新視圖層。在vue中，使用了雙向綁定技術，就是View的變化能實時讓Model發生變化，而Model的變化也能實時更新到View。面試
九、Vue中雙向數據綁定是如何實現的？
vue 雙向數據綁定是經過 數據劫持 結合 發佈訂閱模式的方式來實現的， 也就是說數據和視圖同步，數據發生變化，視圖跟着變化，視圖變化，數據也隨之發生改變；
核心：關於VUE雙向數據綁定，其核心是 Object.defineProperty()方法。ajax
十、vue是如何實現響應式數據的呢？（響應式數據原理）❗
參考：https://ym.baisou.ltd/post/829.html
原理：
相信用過vue的都知道，vue中data中定義的數據會隨着咱們經過方法改變該數據的同時，頁面上相關此數據的也會相應的刷新，實現響應式數據。可你知道它是如何實現這一功能的嗎？下面讓咱們來了解了解它是如何作到這神奇操做的。
Object.defineProperty 監聽修改讀取數據：
Object.defineProperty(obj, prop, descriptor) 可傳入三個值，其做用是該方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，並返回此對象。
第一個值傳入要修改的對象
第二個值傳入該對象中要修改的key
第三個值是一個對象，裏面有set 和get兩種方法 set爲值發生修改是所作的操做 get爲讀取改值時的操做
默認配置以下
如今咱們來研究下vue是如何利用Object.defineProperty 監聽修改讀取數據的
咱們建立一個對象，並利用Object.keys（）將對象中的key返回到一個數組中，並對該數組forEach遍歷
將key對應值先取過來，對這個對象中每一個不一樣的key經過Object.defineProperty修改並監聽數據的變化，在修改該 key對應的value值時，調用set方法 打印下監聽xxxx數據改變 並將修改值賦給value
在讀取該key對應的value值時，調用get方法 打印下獲取xxxx對應的值 並直接返回當前value值
十一、vue中是如何檢測數組變化的呢？
vue.set()
十二、vue組件中的data爲何是函數？
由於JavaScript的特性所致使，在component中，data必須以函數的形式存在，不能夠是對象。 組建中的data寫成一個函數，數據以函數返回值的形式定義，這樣每次複用組件的時候，都會返回一份新的data，至關於每一個組件實例都有本身私有的數據空間，它們只負責各自維護的數據，不會形成混亂。而單純的寫成對象形式，就是全部的組件實例共用了一個data，這樣改一個全都改了。
1三、分別簡述computed和watch的使用場景?
computed:
當一個屬性受多個屬性影響的時候就須要用到computed
最典型的栗子： 購物車商品結算的時候
watch:
當一條數據影響多條數據的時候就須要用watch
栗子：搜索數據
1四、created和mounted的區別?
created:在模板渲染成html前調用，即一般初始化某些屬性值，而後再渲染成視圖。
mounted:在模板渲染成html後調用，一般是初始化頁面完成後，再對html的dom節點進行一些須要的操做。
1五、vue-router的兩種模式？
hash模式：即地址欄 URL 中的 # 符號；
history模式：window.history對象打印出來能夠看到裏邊提供的方法和記錄長度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（須要特定瀏覽器支持）。
1六、params和query的區別?
用法：query要用path來引入，params要用name來引入，接收參數都是相似的，分別是this.route.query.name和this.route.query.name和this.route.query.name和this.route.params.name。
url地址顯示：query更加相似於咱們ajax中get傳參，params則相似於post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，後者則不顯示
注意點：query刷新不會丟失query裏面的數據、params刷新會丟失params裏面的數據。
//query語法： this.$router.push({path:"地址",query:{id:"123"}}); //這是傳遞參數 this.$route.query.id； //這是接受參數 //params語法： this.$router.push({name:"地址",params:{id:"123"}}); //這是傳遞參數 this.$route.params.id; //這是接受參數 複製代碼
1七、組件之間傳值？
父傳子：props
子傳父：$emit方法
1八、$nextTick的使用?
當你修改了data的值而後立刻獲取這個dom元素的值，是不能獲取到更新後的值， 你須要使用$nextTick這個回調，讓修改後的data值渲染更新到dom元素以後在獲取，才能成功。
// 修改數據 vm.msg = 'Hello' // DOM 還未更新 Vue.nextTick(function () { // DOM 更新 }) 複製代碼
1九、< keep-alive></ keep-alive>的做用是什麼?
keep-alive 是 Vue 內置的一個組件，可使被包含的組件保留狀態，或避免從新渲染。
20、爲何使用key?
須要使用key來給每一個節點作一個惟一標識，Diff算法就能夠正確的識別此節點。
做用主要是爲了高效的更新虛擬DOM。
2一、v-show和v-if指令的共同點和不一樣點？
共同點：都能控制元素的顯示和隱藏；
不一樣點：實現本質方法不一樣，v-show本質就是經過控制css中的display設置爲none，控制隱藏，只會編譯一次；v-if是動態的向DOM樹內添加或者刪除DOM元素，若初始值爲false，就不會編譯了。並且v-if不停的銷燬和建立比較消耗性能。
總結：若是要頻繁切換某節點，使用v-show(切換開銷比較小，初始開銷較大)。若是不須要頻繁切換某節點使用v-if（初始渲染開銷較小，切換開銷比較大）。
2二、如何讓CSS只在當前組件中起做用？
在組件中的style前面加上scoped
2三、如何獲取dom?
ref="domName" 用法：this.$refs.domName
2四、說出幾種vue當中的指令和它的用法？
v-model雙向數據綁定；
v-for循環；
v-if v-show 顯示與隱藏；
v-on事件；v-once: 只綁定一次。
2五、v-modal的使用？
v-model用於表單數據的雙向綁定，其實它就是一個語法糖，這個背後就作了兩個操做：
v-bind綁定一個value屬性；
v-on指令給當前元素綁定input事件。
2六、請說出vue.cli項目中src目錄每一個文件夾和文件的用法？
assets文件夾是放靜態資源；components是放組件；router是定義路由相關的配置; app.vue是一個應用主組件；main.js是入口文件。
2七、assets和static的區別？
相同點：assets和static兩個都是存放靜態資源文件。項目中所須要的資源文件圖片，字體圖標，樣式文件等均可以放在這兩個文件下，這是相同點
不一樣點：assets中存放的靜態資源文件在項目打包時，也就是運行npm run build時會將assets中放置的靜態資源文件進行打包上傳，所謂打包簡單點能夠理解爲壓縮體積，代碼格式化。而壓縮後的靜態資源文件最終也都會放置在static文件中跟着index.html一同上傳至服務器。static中放置的靜態資源文件就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至服務器。由於避免了壓縮直接進行上傳，在打包時會提升必定的效率，可是static中的資源文件因爲沒有進行壓縮等操做，因此文件的體積也就相對於assets中打包後的文件提交較大點。在服務器中就會佔據更大的空間。
建議：將項目中template須要的樣式文件js文件等均可以放置在assets中，走打包這一流程。減小體積。而項目中引入的第三方的資源文件如iconfoont.css等文件能夠放置在static中，由於這些引入的第三方文件已經通過處理，咱們再也不須要處理，直接上傳。
2八、v-on能夠監聽多個方法嗎？
能夠，例子：< input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。
2九、vue的兩個核心點
數據驅動、組件系統
數據驅動：ViewModel，保證數據和視圖的一致性。
組件系統：應用類UI能夠看做所有是由組件樹構成的。
30、vue和jQuery的區別
jQuery是使用選擇器($)選取DOM對象，對其進行賦值、取值、事件綁定等操做，其實和原生的HTML的區別只在於能夠更方便的選取和操做DOM對象，而數據和界面是在一塊兒的。好比須要獲取label標籤的內容：$("lable").val();,它仍是依賴DOM元素的值。
Vue則是經過Vue對象將數據和View徹底分離開來了。對數據進行操做再也不須要引用相應的DOM對象，能夠說數據和View是分離的，他們經過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。
3一、delete和Vue.delete刪除數組的區別
delete只是被刪除的元素變成了 empty/undefined 其餘的元素的鍵值仍是不變。Vue.delete 直接刪除了數組 改變了數組的鍵值。
3二、axios的特色有哪些
從瀏覽器中建立XMLHttpRequests；
node.js建立http請求；
支持Promise API；
攔截請求和響應；
轉換請求數據和響應數據；
取消請求；
自動換成json。
axios中的發送字段的參數是data跟params兩個，二者的區別在於params是跟請求地址一塊兒發送的，data的做爲一個請求體進行發送
params通常適用於get請求，data通常適用於post put 請求。
3三、vue初始化頁面閃動問題
使用vue開發時，在vue初始化以前，因爲div是不歸vue管的，因此咱們寫的代碼在尚未解析的狀況下會容易出現花屏現象，看到相似於{{message}}的字樣，雖然通常狀況下這個時間很短暫，可是咱們仍是有必要讓解決這個問題的。
首先：在css里加上[v-cloak] { display: none; }。 若是沒有完全解決問題，則在根元素加上style="display: none;" :style="{display: 'block'}"
3四、vue更新數組時觸發視圖更新的方法
push()；pop()；shift()；unshift()；splice()； sort()；reverse()
3五、vue經常使用的修飾符?
.stop：等同於JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同於JavaScript中的event.preventDefault()，防止執行預設的行爲（若是事件可取消，則取消該事件，而不中止事件的進一步傳播）；
.capture：與事件冒泡的方向相反，事件捕獲由外到內；
.self：只會觸發本身範圍內的事件，不包含子元素；
.once：只會觸發一次。
3六、vuex相關問題
參考：https://ym.baisou.ltd/post/830.html
3七、vuex是什麼？怎麼使用？哪一種功能場景使用它？
vue框架中狀態管理。在main.js引入store，注入。
新建了一個目錄store.js，….. export 。
場景有：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車
3八、關於VueX
VueX是適用於在Vue項目開發時使用的狀態管理工具。試想一下，若是在一個項目開發中頻繁的使用組件傳參的方式來同步data中的值，一旦項目變得很龐大，管理和維護這些值將是至關棘手的工做。爲此，Vue爲這些被多個組件頻繁使用的值提供了一個統一管理的工具——VueX。在具備VueX的Vue項目中，咱們只須要把這些值定義在VueX中，便可在整個Vue項目的組件中使用。
3九、使用Vuex的目的
實現多組件狀態管理。多個組件之間須要數據共享時，Vuex是個很好的幫手哦
40、Vuex 的五大核心
其中state和mutation是必須的，其餘可根據需求來加
一、state：負責狀態管理，相似於vue中的data，用於初始化數據 //狀態管理
二、mutation：專用於修改state中的數據，經過commit觸發 //修改state
三、action：能夠處理異步，經過dispatch觸發，不能直接修改state，首先在組件中經過dispatch觸發action，而後在action函數內部commit觸發mutation，經過mutation修改state狀態值 //異步操做
四、getter：Vuex中的計算屬性，至關於vue中的computed,依賴於state狀態值，狀態值一旦改變，getter會從新計算，也就是說，當一個數據依賴於另外一個數據發生變化時，就要使用getter
五、module：模塊化管理 //模塊
// 導入vue及vuex import Vue from 'vue' import Vuex from 'vuex' // 掛載vuex Vue.use(Vuex) // 建立vuex對象並向外暴露 export default new Vuex.Store({ // 全局屬性變量 state: { }, // 全局同步方法, 調用方法,this.$store.commit("xxx") mutations: { }, // 異步方法 調用方法,this.$store.dispatch("xxx") actions: { }, // Vuex屬性計算,在視圖裏面當變量使用 getters: { }, // 模塊化註冊 modules: { } }) 複製代碼
action與mutation的區別？
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } }) 複製代碼
一、流程順序
「相應視圖—>修改State」拆分紅兩部分，視圖觸發Action，Action再觸發Mutation。
二、角色定位
基於流程順序，兩者扮演不一樣的角色。
Mutation：專一於修改State，理論上是修改State的惟一途徑。
Action：業務代碼、異步請求。
三、限制
角色不一樣，兩者有不一樣的限制。
Mutation：必須同步執行。
Action：能夠異步，但不能直接操做State。
結語
創做不易，若是對你們有所幫助，但願你們點贊支持，有什麼問題也能夠在評論區裏討論😄～