21. 權(quán)限判斷

主要分兩種方式。第一種是用戶登錄后，系統(tǒng)獲取其權(quán)限信息，然后根據(jù)這些權(quán)限篩選出用戶可以訪問(wèn)的路由，并使用addRoutes動(dòng)態(tài)添加這些路由。在這個(gè)過(guò)程中，router.beforeEach()方法被用來(lái)進(jìn)行路由守衛(wèi)。另一種方式是在初始化時(shí)掛載全部路由，并在每個(gè)路由上標(biāo)記出訪問(wèn)該路由所需的權(quán)限。在用戶嘗試進(jìn)行路由跳轉(zhuǎn)（在beforeRouteLeave之前）時(shí)，系統(tǒng)會(huì)驗(yàn)證用戶是否擁有該權(quán)限。

22. setup的執(zhí)行時(shí)機(jī)

在組件的beforeCreate生命周期鉤子之前

23.是否能操作dom

獲取DOM節(jié)點(diǎn)：

• getElementById()：根據(jù)元素的ID獲取DOM節(jié)點(diǎn)。
• getElementsByTagName()：根據(jù)元素的標(biāo)簽名獲取DOM節(jié)點(diǎn)列表。
• getElementsByClassName()：根據(jù)元素的類名獲取DOM節(jié)點(diǎn)列表。
• querySelector()：使用CSS選擇器獲取第一個(gè)匹配的DOM節(jié)點(diǎn)。
• querySelectorAll()：使用CSS選擇器獲取所有匹配的DOM節(jié)點(diǎn)，返回的是一個(gè)類似數(shù)組的對(duì)象。

操作DOM：

• el.getAttribute()：獲取元素的某個(gè)屬性值。
• el.setAttribute()：設(shè)置元素的某個(gè)屬性值。
• el.removeAttribute()：刪除元素的某個(gè)屬性。
• el.dataset：包含元素的所有H5自定義屬性，可以直接通過(guò)屬性名訪問(wèn)和設(shè)置。
• el.innerHTML：獲取或設(shè)置元素的內(nèi)部HTML內(nèi)容。
• el.innerText：獲取或設(shè)置元素的文本內(nèi)容，不會(huì)解析HTML標(biāo)簽。
• el.value：用于獲取或設(shè)置表單元素的值。

24. ref和reactive的區(qū)別

定義數(shù)據(jù)方面：

• ref通常用于定義基本類型數(shù)據(jù)。
• reactive主要用于定義對(duì)象或數(shù)組類型的數(shù)據(jù)。雖然ref也可以用于定義對(duì)象或數(shù)組，但內(nèi)部會(huì)將其轉(zhuǎn)化為reactive代理對(duì)象。

原理方面：

• ref通過(guò)Object.defineProperty()的get和set方法實(shí)現(xiàn)數(shù)據(jù)代理。
• reactive使用Proxy實(shí)現(xiàn)數(shù)據(jù)代理，并通過(guò)Reflect來(lái)操作源對(duì)象內(nèi)部的數(shù)據(jù)。

使用方面：

• 使用ref定義的數(shù)據(jù)在操作時(shí)需要通過(guò).value來(lái)訪問(wèn)或修改值，但在模板中不需要。
• 使用reactive定義的數(shù)據(jù)在操作時(shí)不需要通過(guò).value。

25. axios和ajax的區(qū)別

axios是對(duì)ajax技術(shù)的一種封裝，類似于jquery對(duì)ajax的封裝。ajax技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)的刷新，而axios提供了對(duì)ajax的封裝，使其更加方便和易用。可以說(shuō)axios是ajax的一種實(shí)現(xiàn)，但ajax不僅限于axios，axios有的功能ajax都有，但ajax有的功能axios不一定都有。

26. vuex是什么

vuex是一個(gè)專為vue.js設(shè)計(jì)的狀態(tài)管理庫(kù)。它采用集中式存儲(chǔ)來(lái)管理應(yīng)用的所有組件的狀態(tài)，確保這些狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。vuex包含五大模塊：

• state：用于存儲(chǔ)數(shù)據(jù)狀態(tài)，可以通過(guò)this.$store.state.屬性名來(lái)獲取數(shù)據(jù)。
• getter：基于現(xiàn)有數(shù)據(jù)計(jì)算新數(shù)據(jù)，類似于Vue中的計(jì)算屬性。
• mutations：用于改變數(shù)據(jù)的函數(shù)集合，不能有異步操作，因?yàn)椴荒軐?shí)時(shí)監(jiān)聽和跟蹤數(shù)據(jù)狀態(tài)的變化。
• actions：提交mutation的函數(shù)，可以包含異步操作，通常通過(guò)this.$store.dispatch('actionName', payload)來(lái)調(diào)用。
• modules：對(duì)vuex進(jìn)行模塊化管理，使得狀態(tài)管理更加清晰和可維護(hù)。

27. 父子組件之間的通信有哪些

• 使用props向子組件傳遞數(shù)據(jù)，使用$emit觸發(fā)事件向父組件發(fā)送消息。
• 使用$parent和$children直接訪問(wèn)父組件或子組件的實(shí)例。
• 使用provide和inject在祖先組件和后代組件之間傳遞數(shù)據(jù)。
• 使用eventBus（事件總線）在不同組件之間傳遞事件。
• 使用Vuex進(jìn)行全局狀態(tài)管理，實(shí)現(xiàn)任意組件間的數(shù)據(jù)共享和通信。
• 使用v-model實(shí)現(xiàn)表單元素和組件的雙向數(shù)據(jù)綁定。
• 使用$refs訪問(wèn)子組件的實(shí)例，從而直接操作子組件的數(shù)據(jù)和方法。

28. 哪個(gè)屬性和值可以使元素同時(shí)具有塊級(jí)元素和行內(nèi)元素屬性

可以將其display屬性設(shè)置為inline-block

29. 放在html里的哪一部分js代碼會(huì)在頁(yè)面加載的時(shí)候被執(zhí)行

body

30. ['1','2','3'].map(parseInt)返回結(jié)果為

1,NaN,NaN