vue面試總結

2021-09-27 07:03:53 字數 3707 閱讀 5852

vue

​ 漸進式-可以在單個頁面單獨使用vue,只需要引入vue就行。

​ 使用虛擬dom,減少效能消耗。

​ 響應性-資料變化能在檢視響應(通過object.defindproperty實現資料更新並在檢視響應)

​ 元件化,萬物皆元件,其實每乙個.vue都是乙個個元件,頁面是通過乙個個元件拼接起來的。(元件間的傳值遵循單項資料流)

生命週期

​ beforecreate - 例項初始化完成後

​ created - 例項建立完成後

​ beforemount - 掛載開始前

​ mounted - 掛載到例項後

​ beforeupdate - 資料更新時

​ updated - 資料更新,虛擬dom重新渲染後

​ beforedestroy - 例項銷毀前呼叫

​ destroyed - 例項銷毀後呼叫

元件間傳值

父傳子:

通過引數傳遞,子元件在 props裡面接收。

(注意:遵循單項資料流,子元件不能直接更改props裡面資料,只能通過通知父元件去修改)

provide和inject可以實現父元件個子及孫元件傳值。(父元件把值放在provide裡面,那麼他的子孫元件動能通過inject獲取到父元件給出的值,一般用於公共元件的開發)

vuex傳值

子傳父:

通過派發事件方式 (子元件通過this.$emit(「事件名稱」,要傳的值)派發事件,父元件只需要@事件名稱 就能接收到這個事件)

匯流排模式(利用的是vue物件的emi

t,

emit,

emit

,on來實現; emi

t派發事

件出來,

在其他組

件通

過emit派發事件出來,在其他元件通過

emit派發

事件出來

,在其他

元件通過

on就能接收到)。

vuex

​ 全域性狀態管理模式。一些需要全域性管理的狀態可以放到vuex裡面進行管理。

​ vuex是響應式的,當狀態改變,會通知所有元件進行狀態改變。

​ 不能直接修改狀態,必須通過提交的方式修改。

state: 單一狀態樹 (全域性狀態都存放在這裡)

getter: 計算屬性 (可以對state做修改以後的返回)

mutation: 更改store狀態的唯一方法就是提交mutation;(呼叫 commit)

action: 一般非同步操作在這裡執行,也是通過提交mutation修改store狀態(呼叫dispatch())

graph rl

subgraph 頁面資料

view(vue components)

endsubgraph vuex

actions(actions)

mutations(mutations)

state(state)

endview -->|dispatch非同步操作| actions

actions -->|commit| mutations

view -->|commit| mutations

mutations -->|mutate| state

state -->|render| view

簡化使用:

使用vuex的時候,當要在元件使用的時候,往往要先引入,然後就是在頁面使用:

store.state.***,

store.getters.***,

store.commit(「***」,{})

store.dispatch(「***」,{});

使用 mapstate,mapgetters,mapactions,mapmutations簡化操作

import from 「vuex」;

通過解構操作:

…mapstate([「***」,「***」]);

…mapgetters([「***」,「***」]);

…mapactions([「***」,「***」]);

…mapmutations([「***」,「***」]);

然後就可以直接使用名為***的方法或屬性。

vue-router

路由hash模式和history模式:

hash模式是頁面中帶#的,也是vue預設使用的模式。

history模式類似於正常的頁面路徑。(一般使用該模式是因為頁面帶#感覺不規範,但也有問題存在,只要在history模式下,重新整理頁面是會出現404情況,因為該模式下,位址雖然變了,但是其實是沒有請求後台該位址,重新整理的時候瀏覽器去請求該位址就會返回404;解決方法是然後端將位址重定向到index頁面就行了)

路由傳參:

路徑傳參:(path: 「/user/:id」 宣告user/後面的為id,可以通過this.$route.params.id獲取);

還可以通過路徑上?a=111傳參,但是獲取方式要通過 this.$route.query.a獲取

跳轉是傳參:this.rou

ter.

push

(nam

e:′p

age′

,par

ams:

id:"

xxx"

),通過

this

.router.push(}),通過this.

router

.pus

h(na

me:′

page

′,pa

rams

:id:

"***

"),通

過thi

s.route.params.id獲取;

路由守衛

通過router.beforeeach註冊乙個全域性前置守衛。

const router =

newvuerouter()

router.

beforeeach

((to,

from

, next)

=>

)

to: 要跳轉頁面

from: 來自哪個頁面

next: function 下一步。 帶引數則指定跳轉路徑

axios

​ 是乙個基於 promise 的 http 庫;

​ 請求方法:

​ axios.get(「url」,).then(function(){}).catch(function(){});

​ axios.post(「url」,data).then(function(){}).catch(function(){});

​ axios.all()類似於promise的all方法。

​ axios(config).then(function(){}).catch(function(){})。

element-ui

​ 一套為開發者、設計師和產品經理準備的基於 vue 2.0 的桌面端元件庫;

​ github有 4萬星。 pc端。餓了麼公司團隊開發的

mint-ui

​ 基於 vue.js 的移動端元件庫;

​ github有 1萬星。 移動端。餓了麼公司團隊開發的

​ github有2萬星。 pc端。餓了麼公司團隊開發的

iview

​ 一套基於 vue.js 的高質量ui 元件庫;

vue 面試總結

1.axios 是什麼?怎麼使用?描述使用它實現登入功能的流程?它與 fetch ajax 的區別是什麼?答案如下 2.vuex 是什麼?怎麼使用?哪種功能場景使用它?答案如下所示 3.說出 4個 vue 當中的指令和它的用法,答案如下所示 4.導航鉤子有哪些?它們有哪些引數?答案如下所示 5.v ...

vue面試總結 2022

特點 初始化例項,不能使用data和methods ref 示例beforecreate function 結果 特點 data和methods都已經被初始化好了,可以呼叫,但ref還是不行 示例created function 結果 特點 開始掛載之前呼叫,相關的render函式首次被呼叫 此時的...

Vue面試題總結

v show和v if之間的區別 為何v for中要用key 描述vue元件生命週期 有父子元件的情況 父子元件生命週期關係 子元件更新過程 父元件更新過程 銷毀過程 vue元件如何通訊 描述元件渲染和更新的過程 雙向資料繫結v model的實現原理 對mvvm的理解 computed有何特點 為何...