Vue題庫(kù)(可編輯修改word版)

1、VUe題庫(kù)1、active-class是哪個(gè)組件的屬性？嵌套路由怎么定義？答：vue-router 模塊的 router-link 組件。2、怎么定義VUe rollter的動(dòng)態(tài)路由？怎么獲取傳過(guò)來(lái)的動(dòng)態(tài)參數(shù)？答：在router目錄下的inde×.js文件中，對(duì)Path屬性加上/:id°使用router對(duì)象的 ParamSJd3、vue-router有哪幾種導(dǎo)航鉤子？答：三種,一種是全局導(dǎo)航鉤子:router.beforeEach(to,from,next),作用：跳轉(zhuǎn)前進(jìn)行判斷攔截。第二種：組件內(nèi)的鉤子：第三種：?jiǎn)为?dú)路由獨(dú)享組件4、SCSS是什么？安裝使用的步驟是？有哪幾

2、大特性？答：預(yù)處理css,把CSS當(dāng)前函數(shù)編寫(xiě)，左義變：,嵌套。先裝css-loader, node- IOaderX SaSS-IOader等加載器模塊，在WebPaCk-base.config.js配宜文件中加多一個(gè) 拓展:extenstion,再加多一個(gè)模塊：module 里面 testIOader4.1、SCSS是什么？在ve.cli中的安裝使用步驟是？有哪幾大特性？答：CSS的預(yù)編譯。使用步驟：第一步：用 npm 下三個(gè) IOader (sass-loader CSS-IOadernode-sass)第二步：在build目錄找到WebPaCk.base.config.js,在那個(gè)ex

3、tends屬性中加一個(gè)拓 展.SCSS第三步：還是在同一個(gè)文件，配置一個(gè)module屬性第四步：然后在組件的Style標(biāo)簽加上Iang屬性,例如：Iang=WSCSSw有哪幾大特性：1、可以用變量，例如($變疑名稱=值)； 2、可以用混合器，例如O3、可以嵌套 5 ' mint-ui是什么？怎么使用？說(shuō)出至少三個(gè)組件使用方法？答：基于VUe的前端組件庫(kù)。npm安裝，然后import樣式和js, vue.use (mintUi) 全局引入。在單個(gè)組件局部引入：imPOrt Toast from 'mint-uiz組件一：TOaStC登 錄成功')；組件二：mint-hea

4、der：組件三:mint-swiper6、V n)Odel是什么？怎么使用？ VUe中標(biāo)簽怎么綁定事件？答：可以實(shí)現(xiàn)雙向綁泄，指令(V-CIass、v-for v-if、V-Show、V-On)。VUe 的 model 層的 data 屬性。綁龍事件：VinPUt CliCk=doLog() />7、axios是什么？怎么使用？描述使用它實(shí)現(xiàn)登錄功能的流程？答：請(qǐng)求后臺(tái)資源的模塊。npm install axios -S裝好，然后發(fā)送的是跨域，需在配宜文 件中COnfiginde×.js進(jìn)行設(shè)置。后臺(tái)如果是Tp5則泄義一個(gè)資源路由。js中使用 import進(jìn)來(lái)，然后.get或.

5、post。返回在.then函數(shù)中如果成功，失敗則是在.catch函數(shù) 中8、axios+tp5進(jìn)階中，調(diào)用axios.post('api/USer,)是進(jìn)行的什么操作？ axios.put('apiuser8,)呢?答：跨域，添加用戶操作，更新操作。9、什么是RESTfUl API ?怎么使用？答：是一個(gè)api的標(biāo)準(zhǔn)，無(wú)狀態(tài)請(qǐng)求。請(qǐng)求的路由地址是固左的，如果是tp5則先路由配 置中把資源路由配置好。標(biāo)準(zhǔn)有：.post .put .delete10 ' VueX是什么？怎么使用？哪種功能場(chǎng)景使用它？答：VUe框架中狀態(tài)管理。在main.js引入store,注入。新建了一個(gè)

6、目錄store, . export。場(chǎng)景有：?jiǎn)雾?yè)應(yīng)用中，組件之間的狀態(tài)。音樂(lè)播放、登錄狀態(tài)、加入購(gòu)物車11 ' InVVm框架是什么？它和瓦它框架(jqery )的區(qū)別是什么？哪些場(chǎng)景適合？答：一個(gè) model+view+viewModel 框架,數(shù)據(jù)模型 model, VieWMOdel 連接兩個(gè)區(qū)別：VUe數(shù)據(jù)驅(qū)動(dòng)，通過(guò)數(shù)據(jù)來(lái)顯示視圖層而不是節(jié)點(diǎn)操作。場(chǎng)景：數(shù)據(jù)操作比較多的場(chǎng)景，更加便捷12、自定義指令（V-Check ' V fOCUS ）的方法有哪些？它有哪些鉤子函數(shù)？還有哪些 鉤子函數(shù)參數(shù)？答：全局泄義指令：在VUe對(duì)象的directive方法里而有兩個(gè)參數(shù)，一個(gè)是指

7、令名稱，另 外一個(gè)是函數(shù)。組件內(nèi)定義指令：directives鉤子函數(shù)：bind （綁定事件觸發(fā)）、inserted（ Vf點(diǎn)插入的時(shí)候觸發(fā)）、UPdate （組件內(nèi) 相關(guān)更新）鉤子函數(shù)參數(shù)：ek binding13、說(shuō)出至少4種VUe當(dāng)中的指令和它的用法？答：v-if：判斷是否隱藏：v-for：數(shù)據(jù)循環(huán)出來(lái)：v-bind:class：綁立一個(gè)屬性：v- model：實(shí)現(xiàn)雙向綁泄14、vue-router是什么？它有哪些組件？答：VUe 用來(lái)寫(xiě)路由一個(gè)插件。router-link, router-view15、導(dǎo)航鉤子有哪些？它們有哪些參數(shù)？答：導(dǎo)航鉤子有：少全局鉤子和組件內(nèi)獨(dú)享的鉤子。b/b

8、eforeRouteEnter、afterEnter、beforeRouterUpdate beforeRouteLeave參數(shù)：有to （去的那個(gè)路由）、from （離開(kāi)的路由）、next （立要用這個(gè)函數(shù)才能去 到下一個(gè)路由，如果不用就攔截）最常用就這幾種16、VUe的雙向數(shù)據(jù)綁定原理是什么？答：VUejS是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過(guò)Object. defineProperty（）來(lái)劫持各個(gè)屬性的setter, getter,在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消 息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)。具體步騾:第一步：需要observe的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷，包括子屬性對(duì)彖的屬性，都加上Set

9、ter 和 getter這樣的話，給這個(gè)對(duì)象的某個(gè)值賦值，就會(huì)觸發(fā)setter,那么就能監(jiān)聽(tīng)到了數(shù)據(jù)變化第 二步：ComPile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁(yè)而視圖, 并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁泄更新函數(shù)，添加監(jiān)聽(tīng)數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動(dòng)， 收到通知，更新視圖第三步：WatCher訂閱者是ObSever和COmPile之間通信的橋梁，主要做的事情 是：1、在自身實(shí)例化時(shí)往屬性訂閱器(dep)里而添加自己2、自身必須有一個(gè)update。方法3、待屬性變動(dòng)dep.notice()通知時(shí)，能調(diào)用自身的UPdateo方法,并觸發(fā)COmPiIe中 綁定的回調(diào)，則功成身退。第四

10、步：MWM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和WatCher三者, 通過(guò)ObSerVer來(lái)監(jiān)聽(tīng)自己的model數(shù)據(jù)變化，通過(guò)COmPile來(lái)解析編譯模板指令，最 終利用WatCherObSerVer和COmPiIe之間的通信橋梁，達(dá)到數(shù)據(jù)變化-> 視圖更新：視圖交互變化(InPUt)->數(shù)據(jù)model變更的雙向綁定效果。ps： 16題答案同樣適合"ve data是怎么實(shí)現(xiàn)的？"此而試題。17、請(qǐng)?jiān)敿?xì)說(shuō)下你對(duì)VUe生命周期的理解？答：總共分為8個(gè)階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。創(chuàng)建前/后：在beforeCreated階段，

11、VUe實(shí)例的掛載元素$el和數(shù)據(jù)對(duì)象data都為 undefined,還未初始化"在Created階段，VUe實(shí)例的數(shù)據(jù)對(duì)象data有了，$el還沒(méi) 有。載入前/后：在beforeMount階段，VUe實(shí)例的$el和data都初始化了，但還是掛載之 前為虛擬的dom i'j點(diǎn)，data.message還未替換。在mounted階段，VUe實(shí)例掛載完 成，data.message成功渲染。更新前/后:當(dāng)data變化時(shí)，會(huì)觸發(fā)beforeUpdate和UPdated方法。銷毀前/后：在執(zhí)行destroy方法后，對(duì)data的改變不會(huì)再觸發(fā)周期函數(shù)，說(shuō)明此時(shí)VUe實(shí)例已經(jīng)解除了事件監(jiān)

12、聽(tīng)以及和dom的綁立，但是dom結(jié)構(gòu)依然存在18、請(qǐng)說(shuō)下封裝VUe組件的過(guò)程？答：首先，組件可以提升整個(gè)項(xiàng)目的開(kāi)發(fā)效率。能夠把頁(yè)而抽象成多個(gè)相對(duì)獨(dú)立的模塊， 解決了我們傳統(tǒng)項(xiàng)目開(kāi)發(fā)：效率低、難維護(hù)、復(fù)用性等問(wèn)題。然后，使用Vueextend方法創(chuàng)建一個(gè)組件，然后使用Vponent方法注冊(cè)組件。 子組件需要數(shù)據(jù)，可以在PrOPS中接受定義。而子組件修改好數(shù)據(jù)后，想把數(shù)據(jù)傳遞給父 組件?？梢圆捎胑mit方法。19、你是怎么認(rèn)識(shí)VUeX的？答：vue×可以理解為一種開(kāi)發(fā)模式或框架。比如PHP有thinkphp, java有SPring等。通過(guò)狀態(tài)(數(shù)據(jù)源)集中管理驅(qū)動(dòng)組件的變化(好比SPn

13、ng的IoC容器對(duì)bean進(jìn)行集 中管理)。應(yīng)用級(jí)的狀態(tài)集中放在StOre中：改變狀態(tài)的方式是提交mutations,這是個(gè)同步的事 物：異步邏輯應(yīng)該封裝在action中。20 ' VUe-IOader是什么？使用它的用途有哪些？答：解析.vue文件的一個(gè)加載器，跟templatejsStyle轉(zhuǎn)換成js模塊。用途：js可以寫(xiě)es6、Style樣式可以SCSS或less、template可以加jade等21、請(qǐng)說(shuō)出vue.cli項(xiàng)目中SIX目錄每個(gè)文件夾和文件的用法？答：assets文件夾是放靜態(tài)資源：COmPOnentS是放組#： router是定義路由相關(guān)的配VieW視圖：app.

14、vue是一個(gè)應(yīng)用主組件：main.js是入口文件22 ' ve.di中怎樣使用自定義的組件？有遇到過(guò)哪些問(wèn)題嗎？答：第一步:在COmPOnentS目錄新建你的組件文件（SmithBUttOn.vue） , SCriPt 定要 export default 第二步：在需要用的頁(yè)而（組件）中導(dǎo)入：importSmithBUttOnfrom'./comp Onen tssmithButton.vue,第三步：注入到VUe的子組件的COmPOnentS屬性上而ZCOmPOnents:smithButton第四步：在 template 視圖 VieW 中使用，VSmith-button&

15、lt;smith-button>問(wèn)題有:SmithBUttOn命名,使用的時(shí)候則Smith-button«23、聊聊你對(duì)VueJs的template編譯的理解?答：簡(jiǎn)而言乙就是先轉(zhuǎn)化成AST樹(shù)，再得到的render函數(shù)返回VNOde （VUe的虛擬 DOM節(jié)點(diǎn)）詳情步驟：首先，通過(guò)COmPile編譯器把template編譯成AST語(yǔ)法樹(shù)（abstract SyntaX tree即 源代碼的抽象語(yǔ)法結(jié)構(gòu)的樹(shù)狀表現(xiàn)形式），COmPile是CreateCompiIer的返回值， CreateCOmPiIer是用以創(chuàng)建編譯器的。另外COmPile還負(fù)責(zé)合并OPtiOne然后，AST會(huì)經(jīng)

16、過(guò)generate （將AST語(yǔ)法樹(shù)轉(zhuǎn)化成render funtion字符串的過(guò)程）得 到render函數(shù)，render的返回值是VNode, VNode是VUe的虛擬DoM巧點(diǎn)，里面 有（標(biāo)簽名、子節(jié)點(diǎn)、文本等等）挑戰(zhàn)一下：1、VUe響應(yīng)式原理？2、ve-router 實(shí)現(xiàn)原理？3、為什么要選VUe ?與其它框架對(duì)比的優(yōu)勢(shì)和劣勢(shì)？4、VUe如何實(shí)現(xiàn)父子組件通信、以及非父子組件通信？5、VUejS 與 anglarjs 以及 react 的區(qū)別?6、VueX是用來(lái)做什么的？7、Vue源碼結(jié)構(gòu)不定項(xiàng)選擇題： 下列關(guān)于VUe的組件說(shuō)法不正確的是（）1. 不一定要寫(xiě)Style2. template視圖里可以寫(xiě)多個(gè)div容器3. 父組件給子組件傳值需泄義PrOPS屬性4. 子組件與父組件通信需定義$emit屬性 下而關(guān)于VUe的聲明周期說(shuō)法不正確的是（）1. 總共分為8