vuejs 基礎必備

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末稀并,一起剝皮案震驚了整個濱河市仅颇,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌碘举,老刑警劉巖忘瓦,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異引颈,居然都是意外死亡耕皮,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進店門蝙场,熙熙樓的掌柜王于貴愁眉苦臉地迎上來凌停,“玉大人,你說我怎么就攤上這事售滤》D猓” “怎么了?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵完箩,是天一觀的道長赐俗。 經常有香客問我,道長弊知,這世上最難降的妖魔是什么阻逮? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮秩彤,結果婚禮上叔扼,老公的妹妹穿的比我還像新娘事哭。我一直安慰自己,他們只是感情好瓜富,可當我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布鳍咱。 她就那樣靜靜地躺著,像睡著了一般食呻。 火紅的嫁衣襯著肌膚如雪流炕。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天仅胞,我揣著相機與錄音,去河邊找鬼剑辫。 笑死干旧,一個胖子當著我的面吹牛,可吹牛的內容都是我干的妹蔽。 我是一名探鬼主播椎眯,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼胳岂!你這毒婦竟也來了编整?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤乳丰,失蹤者是張志新(化名)和其女友劉穎掌测,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體产园,經...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡汞斧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了什燕。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片粘勒。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖屎即,靈堂內的尸體忽然破棺而出庙睡,到底是詐尸還是另有隱情,我是刑警寧澤技俐,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布乘陪,位于F島的核電站,受9級特大地震影響虽另,放射性物質發(fā)生泄漏暂刘。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一捂刺、第九天 我趴在偏房一處隱蔽的房頂上張望谣拣。 院中可真熱鬧募寨,春花似錦、人聲如沸森缠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽贵涵。三九已至列肢,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間宾茂,已是汗流浹背瓷马。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留跨晴,地道東北人欧聘。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像端盆,于是被迫代替她去往敵國和親怀骤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內容

  • 也是要好久好久之后 才懂得 在身邊 多重要 趁現(xiàn)在 風正輕 去尋找 不經意散落 人間的珍珠 你是我最寶貴的 除了愛...
    小蜜蜂嘉心閱讀 148評論 0 0
  • 一場夢 時間回到2005年的春天焕妙,我正坐在高三九班的教室中自習蒋伦,教室里很安靜,安靜到只能聽見微風掀起書頁的嘩嘩聲焚鹊,...
    藍溪b_d閱讀 180評論 1 1
  • 嘲甄士隱(第一回) 慣養(yǎng)嬌生笑你癡寺旺,菱花空對雪澌澌爷抓。 好防佳節(jié)元宵后,便是煙消火滅時阻塑。 [說明] 甄士隱抱三歲女...
    開門見喜閱讀 1,181評論 0 0
  • 今年八月終于完成了此畫的全圖臨摹蓝撇,也讓自己得到往前臨摹局部時不一樣的體會。整體需由局部結合陈莽,局部不可脫離整體渤昌。通過...
    麥堆哇閱讀 1,375評論 0 0
  • 學校招老師 給老師發(fā)工資 是為了多文章 學校評級,就跟公司招員工一樣走搁。所以看文章數(shù)目独柑。拿人錢財替人消災 無論發(fā)生什...
    佛系玻璃心閱讀 126評論 0 0