Vue基礎(chǔ)面試題

1.vue優(yōu)點(diǎn)?

  • 輕量級(jí)框架:只關(guān)注視圖層,是一個(gè)構(gòu)建數(shù)據(jù)的視圖集合,大小只有幾十 kb ;

  • 簡(jiǎn)單易學(xué):國(guó)人開發(fā),中文文檔,不存在語言障礙 ,易于理解和學(xué)習(xí);

  • 雙向數(shù)據(jù)綁定:保留了 angular 的特點(diǎn),在數(shù)據(jù)操作方面更為簡(jiǎn)單;

  • 組件化:保留了 react 的優(yōu)點(diǎn),實(shí)現(xiàn)了 html 的封裝和重用,在構(gòu)建單頁面應(yīng)用方面有著獨(dú)特的優(yōu)勢(shì);

  • 視圖,數(shù)據(jù),結(jié)構(gòu)分離:使數(shù)據(jù)的更改更為簡(jiǎn)單,不需要進(jìn)行邏輯代碼的修改,只需要操作數(shù)據(jù)就能完成相關(guān)操作;

  • 虛擬DOM:dom 操作是非常耗費(fèi)性能的, 不再使用原生的 dom 操作節(jié)點(diǎn),極大解放 dom 操作,但具體操作的還是 dom 不過是換了另一種方式;

  • 運(yùn)行速度更快:相比較與 react 而言,同樣是操作虛擬 dom ,就性能而言, vue 存在很大的優(yōu)勢(shì)。

2.vue父組件向子組件傳遞數(shù)據(jù)?

答:通過 props

3.子組件像父組件傳遞事件?

答:$emit 方法

4.v-show 和 v-if指令的共同點(diǎn)和不同點(diǎn)?

  • 共同點(diǎn): 都能控制元素的顯示和隱藏;

  • 不同點(diǎn):
    實(shí)現(xiàn)本質(zhì)方法不同,v-show 本質(zhì)就是通過控制 css 中的 display 設(shè)置為 none ,控制隱藏,只會(huì)編譯一次;v-if 是動(dòng)態(tài)的向 DOM 樹內(nèi)添加或者刪除 DOM 元素,若初始值為 false ,就不會(huì)編譯了。而且 v-if 不停的銷毀和創(chuàng)建比較消耗性能??偨Y(jié):如果要頻繁切換某節(jié)點(diǎn),使用 v-show (切換開銷比較小,初始開銷較大)。如果不需要頻繁切換某節(jié)點(diǎn)使用 v-if(初始渲染開銷較小,切換開銷比較大)。

5. 如何讓CSS只在當(dāng)前組件中起作用?

答:在組件中的 style 前面加上 scoped

6. <keep-alive></keep-alive> 的作用是什么?

答: keep-alive 是 Vue 內(nèi)置的一個(gè)組件,可以使被包含的組件保留狀態(tài),或避免重新渲染。

7.如何獲取dom?

答:ref="domName" 用法:this.$refs.domName

8.說出幾種vue當(dāng)中的指令和它的用法?

答:v-model 雙向數(shù)據(jù)綁定;

v-for 循環(huán);

v-if v-show 顯示與隱藏;

v-on 事件;v-once : 只綁定一次。

9. vue-loader是什么?使用它的用途有哪些?

答:vue 文件的一個(gè)加載器,將 template/js/style 轉(zhuǎn)換成 js 模塊。

用途:js 可以寫 es6 、 style樣式可以 scss 或 less 、 template 可以加 jade 等

10.為什么使用key?

答:需要使用 key 來給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí), Diff 算法就可以正確的識(shí)別此節(jié)點(diǎn)。作用主要是為了高效的更新虛擬 DOM。

11.axios及安裝?

答:請(qǐng)求后臺(tái)資源的模塊。npm install axios —save 裝好, js中使用 import 進(jìn)來,然后 .get 或 .post 。返回在 .then 函數(shù)中如果成功,失敗則是在 .catch 函數(shù)中。

12.v-modal的使用

答:v-model 用于表單數(shù)據(jù)的雙向綁定,其實(shí)它就是一個(gè)語法糖,這個(gè)背后就做了兩個(gè)操作:v-bind 綁定一個(gè) value 屬性;v-on 指令給當(dāng)前元素綁定 input 事件。

13.請(qǐng)說出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法?

答:assets 文件夾是放靜態(tài)資源;components 是放組件;router 是定義路由相關(guān)的配置; app.vue 是一個(gè)應(yīng)用主組件;main.js 是入口文件。

14.分別簡(jiǎn)述computed和watch的使用場(chǎng)景

答:

computed : 當(dāng)一個(gè)屬性受多個(gè)屬性影響的時(shí)候就需要用到 computed ,最典型的栗子:購(gòu)物車商品結(jié)算的時(shí)候

watch : 當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時(shí)候就需要用 watch ,栗子:搜索數(shù)據(jù)

15.v-on可以監(jiān)聽多個(gè)方法嗎?

答:可以,eg:

<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">

16.$nextTick的使用

答:當(dāng)你修改了data 的值然后馬上獲取這個(gè) dom 元素的值,是不能獲取到更新后的值, 你需要使用 $nextTick 這個(gè)回調(diào),讓修改后的 data 值渲染更新到 dom 元素之后在獲取,才能成功。

17.vue組件中data為什么必須是一個(gè)函數(shù)?

答:因?yàn)?JavaScript 的特性所導(dǎo)致,在 component 中,data 必須以函數(shù)的形式存在,不可以是對(duì)象。組建中的 data 寫成一個(gè)函數(shù),數(shù)據(jù)以函數(shù)返回值的形式定義,這樣每次復(fù)用組件的時(shí)候,都會(huì)返回一份新的 data ,相當(dāng)于每個(gè)組件實(shí)例都有自己私有的數(shù)據(jù)空間,它們只負(fù)責(zé)各自維護(hù)的數(shù)據(jù),不會(huì)造成混亂。而單純的寫成對(duì)象形式,就是所有的組件實(shí)例共用了一個(gè) data ,這樣改一個(gè)全都改了。

18.漸進(jìn)式框架的理解

答:主張最少;可以根據(jù)不同的需求選擇不同的層級(jí);

19.Vue中雙向數(shù)據(jù)綁定是如何實(shí)現(xiàn)的?

答:vue 雙向數(shù)據(jù)綁定是通過 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來實(shí)現(xiàn)的, 也就是說數(shù)據(jù)和視圖同步,數(shù)據(jù)發(fā)生變化,視圖跟著變化,視圖變化,數(shù)據(jù)也隨之發(fā)生改變;核心:關(guān)于VUE雙向數(shù)據(jù)綁定,其核心是 Object.defineProperty() 方法。

20.單頁面應(yīng)用和多頁面應(yīng)用區(qū)別及優(yōu)缺點(diǎn)

答:?jiǎn)雾撁鎽?yīng)用(SPA),通俗一點(diǎn)說就是指只有一個(gè)主頁面的應(yīng)用,瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內(nèi)容都包含在這個(gè)所謂的主頁面中。但在寫的時(shí)候,還是會(huì)分開寫(頁面片段),然后在交互的時(shí)候由路由程序動(dòng)態(tài)載入,單頁面的頁面跳轉(zhuǎn),僅刷新局部資源。多應(yīng)用于pc端。

多頁面(MPA),就是指一個(gè)應(yīng)用中有多個(gè)頁面,頁面跳轉(zhuǎn)時(shí)是整頁刷新

單頁面的優(yōu)點(diǎn):用戶體驗(yàn)好,快,內(nèi)容的改變不需要重新加載整個(gè)頁面,基于這一點(diǎn)spa對(duì)服務(wù)器壓力較??;前后端分離;頁面效果會(huì)比較炫酷(比如切換頁面內(nèi)容時(shí)的專場(chǎng)動(dòng)畫)。

單頁面缺點(diǎn):不利于seo;導(dǎo)航不可用,如果一定要導(dǎo)航需要自行實(shí)現(xiàn)前進(jìn)、后退。(由于是單頁面不能用瀏覽器的前進(jìn)后退功能,所以需要自己建立堆棧管理);初次加載時(shí)耗時(shí)多;頁面復(fù)雜度提高很多。

21.v-if和v-for的優(yōu)先級(jí)

答:當(dāng) v-if 與 v-for 一起使用時(shí),v-for 具有比 v-if 更高的優(yōu)先級(jí),這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中。所以,不推薦 v-if 和 v-for 同時(shí)使用。如果 v-if 和 v-for 一起用的話,vue中的的會(huì)自動(dòng)提示 v-if 應(yīng)該放到外層去。

22.assets和static的區(qū)別

答:相同點(diǎn): assets 和 static 兩個(gè)都是存放靜態(tài)資源文件。項(xiàng)目中所需要的資源文件圖片,字體圖標(biāo),樣式文件等都可以放在這兩個(gè)文件下,這是相同點(diǎn)

不相同點(diǎn):assets 中存放的靜態(tài)資源文件在項(xiàng)目打包時(shí),也就是運(yùn)行 npm run build 時(shí)會(huì)將 assets 中放置的靜態(tài)資源文件進(jìn)行打包上傳,所謂打包簡(jiǎn)單點(diǎn)可以理解為壓縮體積,代碼格式化。而壓縮后的靜態(tài)資源文件最終也都會(huì)放置在 static 文件中跟著 index.html 一同上傳至服務(wù)器。static 中放置的靜態(tài)資源文件就不會(huì)要走打包壓縮格式化等流程,而是直接進(jìn)入打包好的目錄,直接上傳至服務(wù)器。因?yàn)楸苊饬藟嚎s直接進(jìn)行上傳,在打包時(shí)會(huì)提高一定的效率,但是 static 中的資源文件由于沒有進(jìn)行壓縮等操作,所以文件的體積也就相對(duì)于 assets 中打包后的文件提交較大點(diǎn)。在服務(wù)器中就會(huì)占據(jù)更大的空間。

建議: 將項(xiàng)目中 template需要的樣式文件js文件等都可以放置在 assets 中,走打包這一流程。減少體積。而項(xiàng)目中引入的第三方的資源文件如iconfoont.css 等文件可以放置在 static 中,因?yàn)檫@些引入的第三方文件已經(jīng)經(jīng)過處理,我們不再需要處理,直接上傳。

23.vue常用的修飾符

.stop:等同于 JavaScript 中的 event.stopPropagation() ,防止事件冒泡;

.prevent :等同于 JavaScript 中的 event.preventDefault() ,防止執(zhí)行預(yù)設(shè)的行為(如果事件可取消,則取消該事件,而不停止事件的進(jìn)一步傳播);

.capture :與事件冒泡的方向相反,事件捕獲由外到內(nèi);

.self :只會(huì)觸發(fā)自己范圍內(nèi)的事件,不包含子元素;

.once :只會(huì)觸發(fā)一次。

24.vue的兩個(gè)核心點(diǎn)

數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)

數(shù)據(jù)驅(qū)動(dòng): ViewModel,保證數(shù)據(jù)和視圖的一致性。

組件系統(tǒng): 應(yīng)用類UI可以看作全部是由組件樹構(gòu)成的。

25.vue和jQuery的區(qū)別

從jquery到vue或者說是到mvvm的轉(zhuǎn)變是一個(gè)思想的轉(zhuǎn)變,是將原有的直接操作dom的思想轉(zhuǎn)變到操作數(shù)據(jù)上去
vue和jquey對(duì)比

jQuery是使用選擇器($)選取DOM對(duì)象,對(duì)其進(jìn)行賦值、取值、事件綁定等操作,其實(shí)和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對(duì)象,而數(shù)據(jù)和界面是在一起的。比如需要獲取label標(biāo)簽的內(nèi)容:$("lable").val();,它還是依賴DOM元素的值。 
Vue則是通過Vue對(duì)象將數(shù)據(jù)和View完全分離開來了。對(duì)數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM對(duì)象,可以說數(shù)據(jù)和View是分離的,他們通過Vue對(duì)象這個(gè)vm實(shí)現(xiàn)相互的綁定。這就是傳說中的MVVM。

vue適用的場(chǎng)景:復(fù)雜數(shù)據(jù)操作的后臺(tái)頁面,表單填寫頁面

jquery適用的場(chǎng)景:比如說一些html5的動(dòng)畫頁面,一些需要js來操作頁面樣式的頁面

然而二者也是可以結(jié)合起來一起使用的,vue側(cè)重?cái)?shù)據(jù)綁定,jquery側(cè)重樣式操作,動(dòng)畫效果等,則會(huì)更加高效率的完成業(yè)務(wù)需求

26. 引進(jìn)組件的步驟

答: 在template中引入組件;在script的第一行用import引入路徑;用component中寫上組件名稱。

27.delete和Vue.delete刪除數(shù)組的區(qū)別

答:delete 只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了數(shù)組 改變了數(shù)組的鍵值。

28.SPA首屏加載慢如何解決

答:安裝動(dòng)態(tài)懶加載所需插件;使用CDN資源。

29.Vue-router跳轉(zhuǎn)和location.href有什么區(qū)別

答:使用 location.href= /url 來跳轉(zhuǎn),簡(jiǎn)單方便,但是刷新了頁面;使用 history.pushState( /url ) ,無刷新頁面,靜態(tài)跳轉(zhuǎn);引進(jìn) router ,然后使用 router.push( /url ) 來跳轉(zhuǎn),使用了 diff 算法,實(shí)現(xiàn)了按需加載,減少了 dom 的消耗。其實(shí)使用 router 跳轉(zhuǎn)和使用 history.pushState() 沒什么差別的,因?yàn)関ue-router就是用了 history.pushState() ,尤其是在history模式下。

30. vue slot

答:簡(jiǎn)單來說,假如父組件需要在子組件內(nèi)放一些DOM,那么這些DOM是顯示、不顯示、在哪個(gè)地方顯示、如何顯示,就是slot分發(fā)負(fù)責(zé)的活。

31.你們vue項(xiàng)目是打包了一個(gè)js文件,一個(gè)css文件,還是有多個(gè)文件?

答:根據(jù)vue-cli腳手架規(guī)范,一個(gè)js文件,一個(gè)CSS文件。

32.Vue里面router-link在電腦上有用,在安卓上沒反應(yīng)怎么解決?

答:Vue路由在Android機(jī)上有問題,babel問題,安裝babel polypill插件解決。

33.Vue2中注冊(cè)在router-link上事件無效解決方法

答:使用 @click.native 。原因:router-link會(huì)阻止click事件,.native指直接監(jiān)聽一個(gè)原生事件。

34.RouterLink在IE和Firefox中不起作用(路由不跳轉(zhuǎn))的問題

答: 方法一:只用a標(biāo)簽,不適用button標(biāo)簽;方法二:使用button標(biāo)簽和Router.navigate方法

35.axios的特點(diǎn)有哪些

答:

從瀏覽器中創(chuàng)建XMLHttpRequests;

node.js創(chuàng)建http請(qǐng)求;

支持Promise API;

攔截請(qǐng)求和響應(yīng);

轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù);

取消請(qǐng)求;

自動(dòng)換成json。

axios中的發(fā)送字段的參數(shù)是data跟params兩個(gè),兩者的區(qū)別在于params是跟請(qǐng)求地址一起發(fā)送的,data的作為一個(gè)請(qǐng)求體進(jìn)行發(fā)送

params一般適用于get請(qǐng)求,data一般適用于post put 請(qǐng)求。

36.請(qǐng)說下封裝 vue 組件的過程?
答:

建立組件的模板,先把架子搭起來,寫寫樣式,考慮好組件的基本邏輯。(os:思考1小時(shí),碼碼10分鐘,程序猿的準(zhǔn)則。)

準(zhǔn)備好組件的數(shù)據(jù)輸入。即分析好邏輯,定好 props 里面的數(shù)據(jù)、類型。

準(zhǔn)備好組件的數(shù)據(jù)輸出。即根據(jù)組件邏輯,做好要暴露出來的方法。

封裝完畢了,直接調(diào)用即可

37.params和query的區(qū)別

query要用path來引入,params要用name來引入,接收參數(shù)都是類似的,分別是this.route.query.name和this.route.params.name。
url地址顯示:query更加類似于我們ajax中g(shù)et傳參,params則類似于post,說的再簡(jiǎn)單一點(diǎn),前者在瀏覽器地址欄中顯示參數(shù),后者則不顯示
注意點(diǎn):query刷新不會(huì)丟失query里面的數(shù)據(jù)
params刷新 會(huì) 丟失 params里面的數(shù)據(jù)。

38.vue初始化頁面閃動(dòng)問題

答:使用vue開發(fā)時(shí),在vue初始化之前,由于 div 是不歸 vue 管的,所以我們寫的代碼在還沒有解析的情況下會(huì)容易出現(xiàn)花屏現(xiàn)象,看到類似于 {{message}} 的字樣,雖然一般情況下這個(gè)時(shí)間很短暫,但是我們還是有必要讓解決這個(gè)問題的。首先:在css里加上 [v-cloak] { display: none; } 。如果沒有徹底解決問題,則在根元素加上 style="display: none;" :style="{display: block }"

39.vue更新數(shù)組時(shí)觸發(fā)視圖更新的方法

答:push();pop();shift();unshift();splice();sort();reverse()

40.vue常用的UI組件庫

答:Mint UI,element,VUX

41.vue修改打包后靜態(tài)資源路徑的修改

答:cli2 版本:將 config/index.js 里的 assetsPublicPath 的值改為 ./ 。

build: {
// ...
assetsPublicPath: ./ ,
// ...
}
cli3版本:在根目錄下新建vue.config.js 文件,然后加上以下內(nèi)容:(如果已經(jīng)有此文件就直接修改)

module.exports = {
publicPath: , // 相對(duì)于 HTML 頁面(目錄相同)
}
生命周期函數(shù)面試題篇

42.什么是 vue 生命周期?有什么作用?

答:每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程——例如,需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做 生命周期鉤子 的函數(shù),這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)。(ps:生命周期鉤子就是生命周期函數(shù))例如,如果要通過某些插件操作DOM節(jié)點(diǎn),如想在頁面渲染完后彈出廣告窗, 那我們最早可在mounted 中進(jìn)行。

43.第一次頁面加載會(huì)觸發(fā)哪幾個(gè)鉤子?

答:beforeCreate, created, beforeMount, mounted

44.簡(jiǎn)述每個(gè)周期具體適合哪些場(chǎng)景

答:

beforeCreate: 在new一個(gè)vue實(shí)例后,只有一些默認(rèn)的生命周期鉤子和默認(rèn)事件,其他的東西都還沒創(chuàng)建。在beforeCreate生命周期執(zhí)行的時(shí)候,data和methods中的數(shù)據(jù)都還沒有初始化。不能在這個(gè)階段使用data中的數(shù)據(jù)和methods中的方法

create: data 和 methods都已經(jīng)被初始化好了,如果要調(diào)用 methods 中的方法,或者操作 data 中的數(shù)據(jù),最早可以在這個(gè)階段中操作

beforeMount: 執(zhí)行到這個(gè)鉤子的時(shí)候,在內(nèi)存中已經(jīng)編譯好了模板了,但是還沒有掛載到頁面中,此時(shí),頁面還是舊的

mounted: 執(zhí)行到這個(gè)鉤子的時(shí)候,就表示Vue實(shí)例已經(jīng)初始化完成了。此時(shí)組件脫離了創(chuàng)建階段,進(jìn)入到了運(yùn)行階段。如果我們想要通過插件操作頁面上的DOM節(jié)點(diǎn),最早可以在和這個(gè)階段中進(jìn)行

beforeUpdate: 當(dāng)執(zhí)行這個(gè)鉤子時(shí),頁面中的顯示的數(shù)據(jù)還是舊的,data中的數(shù)據(jù)是更新后的, 頁面還沒有和最新的數(shù)據(jù)保持同步

updated: 頁面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了,都是最新的

beforeDestory: Vue實(shí)例從運(yùn)行階段進(jìn)入到了銷毀階段,這個(gè)時(shí)候上所有的 data 和 methods , 指令, 過濾器 ……都是處于可用狀態(tài)。還沒有真正被銷毀

destroyed: 這個(gè)時(shí)候上所有的 data 和 methods , 指令, 過濾器 ……都是處于不可用狀態(tài)。組件已經(jīng)被銷毀了。

45.created和mounted的區(qū)別

答:created:在模板渲染成html前調(diào)用,即通常初始化某些屬性值,然后再渲染成視圖。mounted:在模板渲染成html后調(diào)用,通常是初始化頁面完成后,再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。

46.vue獲取數(shù)據(jù)在哪個(gè)周期函數(shù)

答:一般 created/beforeMount/mounted 皆可. 比如如果你要操作 DOM , 那肯定 mounted 時(shí)候才能操作.

47.請(qǐng)?jiān)敿?xì)說下你對(duì)vue生命周期的理解?

圖片.png

答:總共分為8個(gè)階段創(chuàng)建前/后,載入前/后,更新前/后,銷毀前/后。

創(chuàng)建前/后: 在beforeCreated階段,vue實(shí)例的掛載元素 el 還沒有。

載入前/后: 在beforeMount階段,vue實(shí)例的 $el 和data都初始化了,但還是掛載之前為虛擬的dom節(jié)點(diǎn),data.message還未替換。在mounted階段,vue實(shí)例掛載完成,data.message成功渲染。

更新前/后: 當(dāng)data變化時(shí),會(huì)觸發(fā)beforeUpdate和updated方法。

銷毀前/后: 在執(zhí)行destroy方法后,對(duì)data的改變不會(huì)再觸發(fā)周期函數(shù),說明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定,但是dom結(jié)構(gòu)依然存在。

vue 路由面試題篇

48.mvvm 框架是什么?

答:vue是實(shí)現(xiàn)了雙向數(shù)據(jù)綁定的mvvm框架,當(dāng)視圖改變更新模型層,當(dāng)模型層改變更新視圖層。在vue中,使用了雙向綁定技術(shù),就是View的變化能實(shí)時(shí)讓Model發(fā)生變化,而Model的變化也能實(shí)時(shí)更新到View。

49.vue-router 是什么?它有哪些組件

答:vue用來寫路由一個(gè)插件。router-link、router-view

50.active-class 是哪個(gè)組件的屬性?

答:vue-router模塊的router-link組件。children數(shù)組來定義子路由

51.怎么定義 vue-router 的動(dòng)態(tài)路由? 怎么獲取傳過來的值?

答:在router目錄下的index.js文件中,對(duì)path屬性加上/:id。使用router對(duì)象的params.id。

52.vue-router 有哪幾種導(dǎo)航鉤子?

答:三種,

第一種: 是全局導(dǎo)航鉤子:router.beforeEach(to,from,next),作用:跳轉(zhuǎn)前進(jìn)行判斷攔截。

第二種: 組件內(nèi)的鉤子

第三種: 單獨(dú)路由獨(dú)享組件

53. $route$router 的區(qū)別

答:


圖片.png

router.push 方法。返回上一個(gè)歷史history用 $router.to(-1)

$route 為當(dāng)前router跳轉(zhuǎn)對(duì)象。里面可以獲取當(dāng)前路由的name,path,query,parmas等。

54.vue-router的兩種模式

答: hash模式: 即地址欄 URL 中的 # 符號(hào);

history模式: window.history對(duì)象打印出來可以看到里邊提供的方法和記錄長(zhǎng)度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定瀏覽器支持)。

55.vue-router實(shí)現(xiàn)路由懶加載( 動(dòng)態(tài)加載路由 )

答:三種方式

第一種: vue異步組件技術(shù) ==== 異步加載,vue-router配置路由 , 使用vue的異步組件技術(shù) , 可以實(shí)現(xiàn)按需加載 .但是,這種情況下一個(gè)組件生成一個(gè)js文件。

第二種: 路由懶加載(使用import)。

第三種: webpack提供的require.ensure(),vue-router配置路由,使用webpack的require.ensure技術(shù),也可以實(shí)現(xiàn)按需加載。這種情況下,多個(gè)路由指定相同的chunkName,會(huì)合并打包成一個(gè)js文件。

vuex常見面試題篇

56.vuex是什么?怎么使用?哪種功能場(chǎng)景使用它?

答:vue框架中狀態(tài)管理。在main.js引入store,注入。

新建了一個(gè)目錄store.js,….. export 。

場(chǎng)景有:?jiǎn)雾搼?yīng)用中,組件之間的狀態(tài)。音樂播放、登錄狀態(tài)、加入購(gòu)物車

57.vuex有哪幾種屬性?

答:有五種,分別是 State、 Getter、Mutation 、Action、 Module

state => 基本數(shù)據(jù)(數(shù)據(jù)源存放地)

getters => 從基本數(shù)據(jù)派生出來的數(shù)據(jù)

mutations => 提交更改數(shù)據(jù)的方法,同步!

actions => 像一個(gè)裝飾器,包裹mutations,使之可以異步。

modules => 模塊化Vuex

58.Vue.js中ajax請(qǐng)求代碼應(yīng)該寫在組件的methods中還是vuex的actions中?

答:如果請(qǐng)求來的數(shù)據(jù)是不是要被其他組件公用,僅僅在請(qǐng)求的組件內(nèi)使用,就不需要放入vuex 的state里。

如果被其他地方復(fù)用,這個(gè)很大幾率上是需要的,如果需要,請(qǐng)將請(qǐng)求放入action里,方便復(fù)用。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容