1对室、active-class 是哪個組件的屬性系羞?嵌套路由怎么定義
(1)旺韭、active-class 是 vue-router 模塊的 router-link 組件的屬性
? exact-active-class 為嚴格模式 (只有完全匹配時候才被激活)
(2)逾条、使用 children 定義嵌套路由
? ??
2燥撞、怎么定義 vue-router 的動態(tài)路由? 怎么獲取傳過來的值
? ? 1、
在 router 目錄下的 index.js 文件中渠啊,對 path 屬性加上 /:id输吏。
使用 router 對象的 params.id 獲取
? ? 2、
? ??????this.$router.push({
? ? ? ? ? ? ? ? ? ? ? ? ? path: `${this.$route.matched[3].path}/PnrtS`,
? ? ? ? ? ? ? ? ? ? ? ? ? query: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? id: `${this.$route.query.id}`,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name: `${this.$route.query.name}`,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? projectId: `${projectId}`,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? radioFlagId: `${radioFlagIdnumber}`
? ? ? ? ?}
? ? ? ? 使用this.$route.query.name獲取? ??
3替蛉、vue-router 有哪幾種導航鉤子?
三種贯溅,
(1)、全局導航鉤子
router.beforeEach(to, from, next),
router.beforeResolve(to, from, next),
router.afterEach(to, from ,next)
????????(2)躲查、組件內鉤子
????????????????beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
(3)它浅、單獨路由獨享組件
? beforeEnter
4、v-model 是什么镣煮?怎么使用姐霍? vue中標簽怎么綁定事件
v-model 可以實現(xiàn)雙向綁定,<input v-model="inputData" />
綁定事件:<input @click="rdhub.cn" />
5典唇、axios 是什么邮弹?怎么使用?描述使用它實現(xiàn)登錄功能的流程
axios 是請求后臺資源的模塊蚓聘。 npm i axios -S
如果發(fā)送的是跨域請求,需在配置文件中 config/index.js 進行配置
6盟劫、vuex 是什么夜牡?怎么使用?哪種功能場景使用它
vuex 是專門為 vue 開發(fā)的數(shù)據(jù)狀態(tài)管理模式。組件之間數(shù)據(jù)狀態(tài)共享
使用場景:音樂播放塘装、登錄狀態(tài)急迂、購物車
? ??
7、mvvm 框架是什么蹦肴?它和其他框架(jquery) 的區(qū)別是什么僚碎?哪些場景適合
mvvm 是 model + view + viewmodel 框架,通過 viewmodel 連接數(shù)據(jù)模型model 和 view
區(qū)別:vue 是數(shù)據(jù)驅動阴幌,通過數(shù)據(jù)來顯示視圖層而不是節(jié)點操用
場景:數(shù)據(jù)操作比較多的場景勺阐,更加快捷
8、自定義指令(v-check, v-focus) 的方法有哪些? 它有哪些鉤子函數(shù)? 還有哪些鉤子函數(shù)參數(shù)
全局定義指令:在 vue 對象的 directive 方法里面有兩個參數(shù), 一個是指令名稱, 另一個是函數(shù)矛双。
組件內定義指令:directives
鉤子函數(shù): bind(綁定事件出發(fā))渊抽、inserted(節(jié)點插入時候觸發(fā))、update(組件內相關更新)
鉤子函數(shù)參數(shù): el议忽、binding
9懒闷、說出至少 4 種 vue 當中的指令和它的用法
v-if、v-show(判斷是否隱藏)栈幸、v-for(把數(shù)據(jù)遍歷出來)愤估、v-bind(綁定屬性)、v-model(實現(xiàn)雙向綁定)?
10速址、vue-router 是什么?它有哪些組件
vue-router 是 vue 的路由插件,
組件:router-link router-view
11玩焰、vue 的雙向綁定的原理是什么
vue.js 是采用數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式的方式,通過Object.defineProperty()來劫持各個屬性的setter壳繁,getter震捣,在數(shù)據(jù)變動時發(fā)布消息給訂閱者,觸發(fā)相應的監(jiān)聽回調闹炉。
具體步驟:
????????第一步:需要 observe 的數(shù)據(jù)對象進行遞歸遍歷蒿赢,包括子屬性對象的屬性,都加上 setter 和 getter
這樣的話渣触,給這個對象的某個值賦值羡棵,就會觸發(fā)setter,那么就能監(jiān)聽到了數(shù)據(jù)變化
第二步:compile解析模板指令嗅钻,將模板中的變量替換成數(shù)據(jù)皂冰,然后初始化渲染頁面視圖,并將每個指令對應的節(jié)點綁定更新函數(shù)养篓,添加監(jiān)聽數(shù)據(jù)的訂閱者秃流,一旦數(shù)據(jù)有變動,收到通知柳弄,更新視? ? ?圖
第三步:Watcher訂閱者是Observer和Compile之間通信的橋梁舶胀,主要做的事情是:
????1、在自身實例化時往屬性訂閱器(dep)里面添加自己
????2、自身必須有一個update()方法
????3嚣伐、待屬性變動dep.notice()通知時糖赔,能調用自身的 update() 方法,并觸發(fā)Compile中綁定的回調轩端,則功成身退放典。
第四步:MVVM作為數(shù)據(jù)綁定的入口,整合Observer基茵、Compile和Watcher三者奋构,通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化,通過Compile來解析編譯模板指令耿导,最終利用Watcher搭起Observer和Compile之間的通信橋梁声怔,達到數(shù)據(jù)變化 -> 視圖更新;視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果舱呻。
12醋火、請詳細說下你對vue生命周期的理解
總共分為8個階段創(chuàng)建前/后,載入前/后箱吕,更新前/后芥驳,銷毀前/后。
創(chuàng)建前/后
在beforeCreated階段茬高,vue實例的掛載元素$el和數(shù)據(jù)對象data都為undefined兆旬,還未初始化。
在created階段怎栽,vue實例的數(shù)據(jù)對象data有了丽猬,$el還沒有。
載入前/后
在beforeMount階段熏瞄,vue實例的$el和data都初始化了脚祟,但還是掛載之前為虛擬的dom節(jié)點,data.message還未替換强饮。
在mounted階段由桌,vue實例掛載完成,data.message成功渲染邮丰。
更新前/后
當data變化時行您,會觸發(fā)beforeUpdate和updated方法。
銷毀前/后
在執(zhí)行destroy方法后剪廉,對data的改變不會再觸發(fā)周期函數(shù)娃循,說明此時vue實例已經解除了事件監(jiān)聽以及和dom的綁定,但是dom結構依然存在
vuex 面試題
1斗蒋、有哪幾種屬性
有 5 種淮野,分別是 state捧书、getter、mutation骤星、action、module
2爆哑、vuex 的 store 特性是什么
(1) vuex 就是一個倉庫洞难,倉庫里放了很多對象。其中 state 就是數(shù)據(jù)源存放地揭朝,對應于一般 vue 對象里面的 data
(2) state 里面存放的數(shù)據(jù)是響應式的队贱,vue 組件從 store 讀取數(shù)據(jù),若是 store 中的數(shù)據(jù)發(fā)生改變潭袱,依賴這相數(shù)據(jù)的組件也會發(fā)生更新
(3) 它通過 mapState 把全局的 state 和 getters 映射到當前組件的 computed 計算屬性
3柱嫌、 vuex 的 getter 特性是什么
(1) getter 可以對 state 進行計算操作,它就是 store 的計算屬性
(2) 雖然在組件內也可以做計算屬性屯换,但是 getters 可以在多給件之間復用
(3) 如果一個狀態(tài)只在一個組件內使用编丘,是可以不用 getters
4、vuex 的 mutation 特性是什么
action 類似于 muation, 不同在于:action 提交的是 mutation,而不是直接變更狀態(tài)
action 可以包含任意異步操作
5彤悔、vue 中 ajax 請求代碼應該寫在組件的methods中還是vuex 的action中
如果請求來的數(shù)據(jù)不是要被其他組件公用嘉抓,僅僅在請求的組件內使用,就不需要放入 vuex 的 state 里
如果被其他地方復用晕窑,請將請求放入 action 里抑片,方便復用,并包裝成 promise 返回
5杨赤、不用 vuex 會帶來什么問題
可維護性會下降敞斋,你要修改數(shù)據(jù),你得維護3個地方
可讀性下降疾牲,因為一個組件里的數(shù)據(jù)植捎,你根本就看不出來是從哪里來的
增加耦合,大量的上傳派發(fā)说敏,會讓耦合性大大的增加鸥跟,本來Vue用Component就是為了減少耦合,現(xiàn)在這么用盔沫,和組件化的初衷相背
生命周期面試題
1医咨、什么是 vue 生命周期
vue 實例從創(chuàng)建到銷毀的過程就是生命周期。
也就是從開始創(chuàng)建架诞、初始化數(shù)據(jù)拟淮、編譯模板、掛在 dom -> 渲染谴忧、更新 -> 渲染很泊、寫在等一系列過程
2角虫、vue生命周期的作用是什么
生命周期中有多個事件鉤子,讓我們在控制整個 vue 實例的過程時更容易形成好的邏輯
3委造、vue生命周期總共有幾個階段
8個階段:創(chuàng)建前/后戳鹅、載入前/后、更新前/后昏兆、銷毀前/后
4枫虏、第一次頁面加載會觸發(fā)哪幾個鉤子
第一次加載會觸發(fā) beforeCreate、created爬虱、beforeMount隶债、mounted
5、DOM 渲染在哪個周期中就已經完成
mounted
6跑筝、簡述每個周期具體適合哪些場景
生命周期鉤子的一些使用方法:
beforecreate : 可以在這加個loading事件死讹,在加載實例時觸發(fā)
created : 初始化完成時的事件寫在這里,如在這結束loading事件曲梗,異步請求也適宜在這里調用
mounted : 掛載元素赞警,獲取到DOM節(jié)點 updated : 如果對數(shù)據(jù)統(tǒng)一處理,在這里寫上相應函數(shù)
beforeDestroy : 可以做一個確認停止事件的確認框 nextTick : 更新數(shù)據(jù)后立即操作dom