VUE知識點

一、vue的生命週期

初始化：

beforeCreate：通常沒啥用，數據沒掛載，DOM 沒有渲染出來

created：數據已經掛載，可是 DOM 沒有渲染出來，這個鉤子函數裏面能夠作一些異步的操做，而且在這個鉤子函數裏面更改數據不會影響到運行時鉤子函數。

beforeMounte：這個函數表明着 DOM 快要被渲染出來了，可是尚未被渲染出來，跟 created 同樣，作一些異步的操做

mounted：數據已經掛載，真實 DOM 也已經渲染出來了。

運行中：

beforeUpdate：當數據改變的時候纔會執行這個函數，在這個函數裏面拿到的是改變以前的數據，千萬不能在這個裏面更改數據，不然會形成死循環

updated：拿到的是更新以後的數據，在這函數裏面，生成新的 DOM ，跟上一次的虛擬 DOM 作對比，比較出差別以後，而後再渲染真實的 DOM ，當數據引起 DOM 從新渲染的時候，在這個鉤子函數裏面就能夠獲取到真實的 DOM。

銷燬時：

beforeDestroy：銷燬前，作一些善後的操做

destroyed：數據的雙向綁定，監聽都刪除了，可是真實的 DOM 仍是存在的

二、什麼是 MVVM？與 MVM 的區別。

mvvm 是一種簡化用戶界面的事件驅動編程方式

View是視圖層，也是用戶交互層，主要是由 html 和 css 構建

Model是視圖層，泛指後端進行的各類邏輯處理和數據操控

ViewModel是指視圖數據層，在這一層，前端開發者對從後端獲取到的 Model 數據進行轉換處理，作二次封裝，以生成符合 View 層使用預期的視圖數據模型。

MVVM 主要是解決 MVM 的反饋不即便的問題。

三、完整的生命週期函數究竟是什麼？

beforeCreate：基本什麼都幹不了，data 沒有注入到 vue 裏面，獲取不到 data 信息，作一些預處理功能，

created：數據能夠獲取，而且在鉤子函數中更改數據不會調用鉤子函數的執行

beforeMount：此時尚未生成 html 到頁面中。

mounted：初始化階段最後一個鉤子函數，能夠操做真實 DOM 了

數據更新的時候，先調用 beforeUpdate，而後數據更新引起視圖渲染完成以後，纔會執行 updated

四、VUE 中如何封裝組件？什麼組件，爲何要封裝組件？組件中 data 爲何是一個函數？

爲何要封裝組件？

主要就是爲了解耦，提升代碼複用率。

什麼是組件？

頁面上能夠複用的都稱之爲組件

它是 HTML、CSS、JS 的聚合體。

組件就至關於庫，把一些能在項目裏或者不一樣項目裏能夠複用的代碼進行需求性的封裝。

組件中的 data 爲何是一個函數

讓每一個返回的實例均可以維護一份被返回對象的獨立的拷貝。

（延申）

什麼是模塊？

至關於業務邏輯塊，把同一類的項目裏的功能邏輯進行需求性的封裝。

模塊化開發：就是將 js 文件按照功能分離，根據需求引入不一樣的文件，源於服務端

組件化開發：具有單個可移植性，即「隨用隨加載」，不須要爲其準備複雜的基礎條件，組件是聲明式，非命令式

五、axios 是什麼？

axios 主要是用來向後臺發送請求。支持promise

axios 支持併發請求，能夠同時請求多個接口

axios 提供了攔截器。

axios 能夠防止 跨站請求僞造。也就是釣魚網站

axios 攔截器：

分爲 request 請求攔截和 response 響應攔截

request 請求攔截：發送請求前統一處理。例如：設置請求頭 headers

response 相應攔截：是根據響應的代碼來進行下一步的操做。例如：因爲當前的 token 過時，接口返回 401 未受權。那麼咱們就要跳轉到登錄界面

axios/fetch 是基於 promise。後者主要利用 callback 的形式

fetch 脫離了 xhr，是新的語法，默認不傳 cookie。另外也監聽不到請求進度

六、VUEX 是什麼？怎麼使用？那種場合能用？

vuex 是一個專門爲 vue 構建的狀態管理工具，主要是爲了解決 多組間之間狀態共享問題。強調的是集中式管理，（組件與組件之間的關係變成了組件與倉庫之間的關係）

vuex 的核心包括：state（存放狀態）、mutations（同步的更改狀態）、actions（發送異步請求，拿到數據）、getters（根據以前的狀態派發新的狀態）、modules（模塊劃分）

state 發佈一條新的數據，在 getters 裏面根據狀態派發新的狀態，actions 發送異步請求獲取數據，而後在 mutations 裏面同步的更改數據

應用場合：購物車的數據共享、登入註冊

七、vue 的指令用法

v-if　　條件渲染指令

v-bind　　綁定屬性指令

v-on　　監聽事件指令

v-for　　循環渲染指令

v-text　　渲染文本

八、導航鉤子？

vur-router

spa 單頁面應用：指的是根據檢測地址欄的變化將對應的路由組建進行切換

也就是說，一個項目裏面只有一個完整的 HTML 頁面。其他的都是 HTML 組件，頁面之間跳轉刷新，都是組件之間切換，減小了 http 請求的發送，提升了用戶體驗，

原理就是 js 感知到 url 的變化，經過這一點，能夠用 js 動態的將當前頁面內容清除，而後將下一個頁面的內容掛載到當前頁面上，這個時候路由不是後端作，而是前端完成，判斷究竟是顯示哪一個頁面，清除不須要的，顯示須要的，這個過程就是單頁面應用。

好處就是:良好的交互體驗，良好的先後端分離模式，減輕了服務器的壓力，公用一套代碼。

history hash

聲明式導航：router-link

history：這個模式會直接改變 url 地址，須要後端給咱們配置。

hash：這個模式檢測到 url 地址欄 # 後面的路徑標識符的更改，從而觸發瀏覽器的 hashchange 事件，而後經過 location.hash 獲得當前的路徑標識符，在進行路由跳轉操做。

一級路由、二級路由？ children

路由跳轉、兩種方式：router-link to this.$router.push()

路由守衛 攔截器

​ 攔截器：request請求攔截器和response響應攔截器

request 請求攔截：發送請求前同一處理，

例如：設置請求頭 headers、應用的版本號、終端類型等

response 響應式攔截：有時候咱們要根據響應式的狀態來進行下一步操做，

例如：因爲當前的 token 過時，接口返回 401 未受權，咱們就須要進行從新登陸的操做。

導航鉤子就是 vue 中路由 vue-router

​ 分類：

​ beforeEach 在路由切換開始的時候調用

​ afterEach 在路由切換離開的時候調用

​ 局部到單個路由

​ beforeEnter

​ 組件的鉤子函數

​ beforeRouterEnter

​ beforeRouterUpdata

​ beforeRouteLeave

​ 三個參數：

​ to 即將進入的目標對象

​ from 導航要離開的導航對象

​ next 是一個函數，調用 resolve 執行下一步

​ $router：是路由操做對象，只寫對象

​ $route：路由信息對象，只讀對象

九、v-model 是什麼？

用於表單的數據雙向綁定的指令

有兩個操做：

一、v-bind 綁定了一個 value 的屬性

二、v-on 把當前元素綁定到一個事件上

十、swiper 插件從後臺獲取數據沒有問題，css 代碼啥的也沒有問題，可是圖片沒動，怎麼解決。

主要是由於 swiper 提早初始化了 ，可是數據尚未徹底出來。

this.$nextTick() 主要做用就是等數據改變引起 DOM 從新渲染完成以後纔會執行。

十一、keep-alive

當在這些組件之間切換的時候，想保持這麼組建的狀態，以免反覆渲染致使的性能問題

原理：在 created 的時候，將須要緩存的虛擬 DOM 節點放到 cache 中，在 reader 的時候根據 name 再進行取出。

路由懶加載：

就是當你須要的時候纔會加載，按需加載。

單頁面應用的問題就是全部的頁面都須要引入一個 js 文件，wepback 打包的時候生成一個 js ，這個 js 會再全部組件切換的時候調用

單頁引入了全部的一個 js ，日誌也會引入全部的一個 js ，這樣首頁加載速度變慢。解決方法就是路由懶加載。

十二、單頁應用

原理就是經過檢測地址欄的變化將對應路由組件進行組件之間的切換。

一個項目只有一個完整的 html 頁面，其餘部分都是 html 組件組成，頁面的跳轉只是局部的刷新，不會從新加載所有的資源，組件之間的之間的切換快，比較容易實現轉場動畫。頁面每次跳轉時候，並不須要作 html 文件請求，這樣就節約了不少 http 發送請求，咱們的切換頁面的時候，速度會很快。

優勢：良好的交互體驗、良好的先後端工做分離模式、減輕服務器的壓力、公用一套後端程序代碼

缺點：SEO 難度較大、頁面上不能進行前進後退管理、初次加載耗時多。

1三、什麼是vue-loader？

vue-loder 就是一個加載器，把 vue 組件轉換成 js 模式。

爲何要轉譯此模塊？

能夠動態的渲染一些數據，對三個標籤作了優化

template 寫虛擬 DOM

script 寫 es6 語法

style 默承認以用 scss 語法，提供了做用域

而且開發階段提供了熱加載器

1四、slot 是什麼？如何使用？

插槽：具名插槽、匿名插槽、做用域插槽

在引用子組件開始標籤和結束標籤之間，插入一個任意一個元素，用 slot 標籤包裹一下，在父組件調用子組件的時候，這個插槽就會插入到子組件對應的具名插槽的位置。slot 有一個 name 屬性，加 name 屬性就是具名插槽，不加就是匿名插槽。

1五、什麼是虛擬 DOM ？與 key 值得關係？

DOM 是用 js 對象記錄一個 dom 節點得副本，當 dom 發生更改的時候，先用虛擬 dom 進行 diff 算法，算出最小差別，而後再修改真實 dom。

當用傳統得方式操做 DOM 得時候，瀏覽器會從構建 DOM 樹開始從頭至尾執行一邊流程，效率很低，而虛擬 DOM 是用 javascrit 對象表示的，而操做 javascriot 是很簡便高效的。虛擬 dom 和真實的 dom 有一層映射關係，不少須要操做 dom 的地方都會去操做虛擬 dom ，最後一次更新 dom，於是能夠提升性能。

虛擬 dom 的缺點：

一、代碼更多，體積更大

二、內存佔用增大

三、小量的單一的 DOM 修改使用 虛擬 DOM 成本反而更高，不如直接修改真實 dom 快

1六、如何理解 vue 的 mvvm 框架？

是一種簡化用戶界面的事件驅動編程方程式。

view 層是視圖層，使用戶交互層，主要是 HTML 和 CSS 來構建

moedl 層數據模型層，泛指後端進行的各類邏輯處理和數據操控

viewmodel 層是指視圖數據層。在這一層，前端開發者對從後端獲取的 model 數據進行轉換處理，作二次封裝，以生成符合 view 層使用預期的視圖數據模型。

數據雙向綁定：

當視圖改變動新模型層，當模型層改變動新視圖

vue 的數據雙向綁定：

vue 採用數據劫持&訂閱者發佈模式的方法：vue 在建立 vm 的時候，會將數配置在實例中，而後會使用 object.defineproperty 對這些數據進行處理，而且會將數據進行處理，而且會爲這些數據添加 getter 與 setter 方法，當數據改變以後，就會觸發數據的 setter 方法，從而觸發 vm 的 watcher 方法，而後數據改變了， vm 進一步渲染 view 視圖。

1七、active-class 是哪一個組件的屬性。

vue-router 模塊提供的 router-link 組件的屬性

在 vue-router 中要使用 active-class 有兩種方式

一、直接在路由 js 文件中配置 linkActiveClass

二、在 router-link 中寫入 active-class

1八、scss 是什麼？

scss 是一種預編譯器。

1九、vue 的第三方插件：

miui-ui element-ui vuex

20、axios 是什麼？

axios 是用來發送請求的。get 和 post 兩種

get：經過定義一個 get 函數，他有兩個參數，第一個參數就表示咱們請求的 url 地址，第二個參數就是咱們要攜帶的請求參數，get 函數返回的是一個 promise 對象，當axios 請求成功的時候服務器返回給咱們的是 reslove 返回值，請求錯誤的時候返回給咱們的是 reject 錯誤值，最後經過 export 拋出 get 函數

post：方法基本與 get 方法一致，可是須要設置請求頭。

2一、promise 的瞭解

promise 是異步函數的解決方案，從語法上講 promise 是一個對象，從他能夠獲取異步操做的消息， promise 有三個狀態，pending 等待狀態、fulfilled 成功狀態、rejected 失敗狀態，狀態一旦更改，就不會在變，創造出 promise 實例後，他會馬上執行，promise 有兩個API 方法：resolve 和 reject，resolve 表明的是回調成功後的函數，reject 表明的是失敗後返回的結果，原型上有兩個放法：.then 和 .catch 方法，例如請求接口 .then 拿到的是數據，經過 .catch 捕獲錯誤異常

2二、自定義指令的方法：

vue.directive

鉤子：bind、inserted、update、unbind

參數：el、binding、vnode

2三、vue 之間的通訊

父子：子組件用 props，接受父組件傳遞過來的值

子父：父組件聲明一條數據，再寫一個改變自身的方法，傳遞給子組件，而後把子組件添加到點擊事件上

兄弟之間傳值：

ref 鏈：父組件要給子組件傳值，在子組件上定義一個 ref 屬性，這樣經過父組件的 $refs 屬性就能夠獲取子組件的值了，也能夠進行父子，兄弟之間的傳值

even.bus 事件總線：簡單的場景下，使用一個 空的 VUE 實例做爲事件總線，能夠實現兄弟之間的通訊。

2四、異步函數

async　　await

async 函數的返回值是一個 Promise 對象。當這個 async 函數返回一個值時，Promise的 resolve 方法會負責傳遞這個值（至關於Promise.resolve(value)）；當 async 函數拋出異常時，Promise 的 reject 方法也會傳遞這個異常值（至關於Promise.reject(value)）。

async 函數中可能會有 await 表達式，await 表達式會暫停當前 async function 的執行，等待 Promise 處理完成。若 Promise 正常處理(fulfilled)，其處理結果做爲 await 表達式的值，繼續執行 async function

2五、VUE 路由之間的傳值

使用$router.push 拼接參數傳參

使用name來肯定匹配的路由，經過params來傳遞參數

使用path來匹配路由，而後經過query來傳遞參數

2六、模塊化開發

一個模塊就是實現特定功能的文件

好處：

一、避免了變量污染，命名衝突

二、提升代碼複用率

三、提升維護性

四、依賴關係的管理

2七、vue 的計算屬性

在模板中放入太多的邏輯會讓模板太重且難以維護，在須要對數據進行復雜處理，且可能屢次使用的狀況下，儘可能採用計算屬性的方法

好處

一、是數據處理結構清晰

二、依賴於數據，數據更新，處理結果自動更新，

三、計算屬性內部 this 指向vm實例

四、在 template 調用時，直接寫計算屬性姓名便可

五、經常使用的是 getter 方法，獲取數據，也可使用 set方法改變數據，

六、相較於methods，無論依賴的數據變不變，methods都會從新計算，可是依賴數據不變的時候conputed從緩存中獲取，不會從新計算，