vue相關(guān)知識(shí)點(diǎn)

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

答:輕量級(jí)框架:只關(guān)注視圖層败徊,是一個(gè)構(gòu)建數(shù)據(jù)的視圖集合帚呼,大小只有幾十kb;
簡(jiǎn)單易學(xué):國(guó)人開(kāi)發(fā)皱蹦,中文文檔煤杀,不存在語(yǔ)言障礙 ,易于理解和學(xué)習(xí)根欧;
雙向數(shù)據(jù)綁定:保留了angular的特點(diǎn)怜珍,在數(shù)據(jù)操作方面更為簡(jiǎn)單;
組件化:保留了react的優(yōu)點(diǎn)凤粗,實(shí)現(xiàn)了html的封裝和重用酥泛,在構(gòu)建單頁(yè)面應(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不過(guò)是換了另一種方式辅甥;
運(yùn)行速度更快:相比較與react而言,同樣是操作虛擬dom燎竖,就性能而言璃弄,vue存在很大的優(yōu)勢(shì)。

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

答:通過(guò)props

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

答:$emit方法

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

答: 共同點(diǎn):都能控制元素的顯示和隱藏纤掸;
不同點(diǎn):實(shí)現(xiàn)本質(zhì)方法不同脐供,v-show本質(zhì)就是通過(guò)控制css中的display設(shè)置為none,控制隱藏借跪,只會(huì)編譯一次政己;v-if是動(dòng)態(tài)的向DOM樹(shù)內(nèi)添加或者刪除DOM元素,若初始值為false掏愁,就不會(huì)編譯了匹颤。而且v-if不停的銷毀和創(chuàng)建比較消耗性能。
總結(jié):如果要頻繁切換某節(jié)點(diǎn)托猩,使用v-show(切換開(kāi)銷比較小印蓖,初始開(kāi)銷較大)。如果不需要頻繁切換某節(jié)點(diǎn)使用v-if(初始渲染開(kāi)銷較小京腥,切換開(kāi)銷比較大)赦肃。

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.說(shuō)出幾種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可以寫(xiě)es6鸿市、style樣式可以scss或less、template可以加jade等

10.為什么使用key?

答:需要使用key來(lái)給每個(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)來(lái)冯遂,然后.get或.post。如果成功返回在.then函數(shù)中谒获,失敗則是在.catch函數(shù)中。

12.v-modal的使用壁却。

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

13.請(qǐng)說(shuō)出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)聽(tīng)多個(gè)方法嗎推盛?

答:可以,舉例:<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)镴avaScript的特性所導(dǎo)致师妙,在component中,data必須以函數(shù)的形式存在屹培,不可以是對(duì)象默穴。
  組建中的data寫(xiě)成一個(gè)函數(shù),數(shù)據(jù)以函數(shù)返回值的形式定義褪秀,這樣每次復(fù)用組件的時(shí)候壁顶,都會(huì)返回一份新的data,相當(dāng)于每個(gè)組件實(shí)例都有自己私有的數(shù)據(jù)空間溜歪,它們只負(fù)責(zé)各自維護(hù)的數(shù)據(jù)若专,不會(huì)造成混亂。而單純的寫(xiě)成對(duì)象形式蝴猪,就是所有的組件實(shí)例共用了一個(gè)data调衰,這樣改一個(gè)全都改了膊爪。

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

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

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

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

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

答:?jiǎn)雾?yè)面應(yīng)用(SPA)飞盆,通俗一點(diǎn)說(shuō)就是指只有一個(gè)主頁(yè)面的應(yīng)用,瀏覽器一開(kāi)始要加載所有必須的 html, js, css次乓。所有的頁(yè)面內(nèi)容都包含在這個(gè)所謂的主頁(yè)面中吓歇。但在寫(xiě)的時(shí)候,還是會(huì)分開(kāi)寫(xiě)(頁(yè)面片段)票腰,然后在交互的時(shí)候由路由程序動(dòng)態(tài)載入城看,單頁(yè)面的頁(yè)面跳轉(zhuǎn),僅刷新局部資源杏慰。多應(yīng)用于pc端析命。
多頁(yè)面(MPA),就是指一個(gè)應(yīng)用中有多個(gè)頁(yè)面逃默,頁(yè)面跳轉(zhuǎn)時(shí)是整頁(yè)刷新
單頁(yè)面的優(yōu)點(diǎn):
用戶體驗(yàn)好鹃愤,快,內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面完域,基于這一點(diǎn)spa對(duì)服務(wù)器壓力較腥硗隆;前后端分離吟税;頁(yè)面效果會(huì)比較炫酷(比如切換頁(yè)面內(nèi)容時(shí)的專場(chǎng)動(dòng)畫(huà))凹耙。
單頁(yè)面缺點(diǎn):
不利于seo;導(dǎo)航不可用肠仪,如果一定要導(dǎo)航需要自行實(shí)現(xiàn)前進(jìn)肖抱、后退。(由于是單頁(yè)面不能用瀏覽器的前進(jìn)后退功能异旧,所以需要自己建立堆棧管理)意述;初次加載時(shí)耗時(shí)多;頁(yè)面復(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中的資源文件由于沒(méi)有進(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)過(guò)處理,我們不再需要處理及志,直接上傳片排。

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可以看作全部是由組件樹(shù)構(gòu)成的醋奠。

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

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

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

答: 在template中引入組件产捞;
在script的第一行用import引入路徑;
用component中寫(xiě)上組件名稱哼御。

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'來(lái)跳轉(zhuǎn),簡(jiǎn)單方便液肌,但是刷新了頁(yè)面衷笋;
使用history.pushState('/url'),無(wú)刷新頁(yè)面矩屁,靜態(tài)跳轉(zhuǎn)辟宗;
引進(jìn)router,然后使用router.push('/url')來(lái)跳轉(zhuǎn)吝秕,使用了diff算法泊脐,實(shí)現(xiàn)了按需加載,減少了dom的消耗烁峭。
其實(shí)使用router跳轉(zhuǎn)和使用history.pushState()沒(méi)什么差別的容客,因?yàn)関ue-router就是用了history.pushState()秕铛,尤其是在history模式下。

30. vue slot

答:簡(jiǎn)單來(lái)說(shuō)缩挑,假如父組件需要在子組件內(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在電腦上有用乖仇,在安卓上沒(méi)反應(yīng)怎么解決?

答:Vue路由在Android機(jī)上有問(wèn)題询兴,babel問(wèn)題乃沙,安裝babel polypill插件解決。

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

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

34.RouterLink在IE和Firefox中不起作用(路由不跳轉(zhuǎn))的問(wè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)說(shuō)下封裝 vue 組件的過(guò)程?

答:1. 建立組件的模板睦番,先把架子搭起來(lái)类茂,寫(xiě)寫(xiě)樣式耍属,考慮好組件的基本邏輯。(os:思考1小時(shí)巩检,碼碼10分鐘厚骗,程序猿的準(zhǔn)則。)
  2. 準(zhǔn)備好組件的數(shù)據(jù)輸入兢哭。即分析好邏輯领舰,定好 props 里面的數(shù)據(jù)、類型厦瓢。
  3. 準(zhǔn)備好組件的數(shù)據(jù)輸出提揍。即根據(jù)組件邏輯,做好要暴露出來(lái)的方法煮仇。
  4. 封裝完畢了劳跃,直接調(diào)用即可

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

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

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

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

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

答:push();pop()蝗茁;shift()醋虏;unshift();splice()哮翘; sort()颈嚼;reverse()

40.vue常用的UI組件庫(kù)

答: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 頁(yè)面(目錄相同) }

生命周期函數(shù)相關(guān)知識(shí)點(diǎn)

1.什么是 vue 生命周期?有什么作用柑肴?

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

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

答:beforeCreate凌节, created钦听, beforeMount, mounted

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

答:
beforeCreate:在new一個(gè)vue實(shí)例后倍奢,只有一些默認(rèn)的生命周期鉤子和默認(rèn)事件朴上,其他的東西都還沒(méi)創(chuàng)建。在beforeCreate生命周期執(zhí)行的時(shí)候卒煞,data和methods中的數(shù)據(jù)都還沒(méi)有初始化痪宰。不能在這個(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)編譯好了模板了柴钻,但是還沒(méi)有掛載到頁(yè)面中淮韭,此時(shí)垢粮,頁(yè)面還是舊的
mounted:執(zhí)行到這個(gè)鉤子的時(shí)候贴届,就表示Vue實(shí)例已經(jīng)初始化完成了。此時(shí)組件脫離了創(chuàng)建階段蜡吧,進(jìn)入到了運(yùn)行階段毫蚓。 如果我們想要通過(guò)插件操作頁(yè)面上的DOM節(jié)點(diǎn),最早可以在和這個(gè)階段中進(jìn)行
beforeUpdate: 當(dāng)執(zhí)行這個(gè)鉤子時(shí)昔善,頁(yè)面中的顯示的數(shù)據(jù)還是舊的元潘,data中的數(shù)據(jù)是更新后的, 頁(yè)面還沒(méi)有和最新的數(shù)據(jù)保持同步
updated:頁(yè)面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了君仆,都是最新的
beforeDestory:Vue實(shí)例從運(yùn)行階段進(jìn)入到了銷毀階段翩概,這個(gè)時(shí)候上所有的 data 和 methods 牲距, 指令, 過(guò)濾器 ……都是處于可用狀態(tài)钥庇。還沒(méi)有真正被銷毀
destroyed: 這個(gè)時(shí)候上所有的 data 和 methods 牍鞠, 指令, 過(guò)濾器 ……都是處于不可用狀態(tài)评姨。組件已經(jīng)被銷毀了难述。

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

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

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

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

6.請(qǐng)?jiān)趺蠢斫鈜ue生命周期

答:vue生命周期總共分為8個(gè)階段創(chuàng)建前/后,載入前/后文虏,更新前/后敲才,銷毀前/后。
創(chuàng)建前/后: 在beforeCreated階段择葡,vue實(shí)例的掛載元素$el和數(shù)據(jù)對(duì)象data都為undefined紧武,還未初始化。在created階段敏储,vue實(shí)例的數(shù)據(jù)對(duì)象data有了阻星,el還沒(méi)有。 載入前/后:在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ù)黍瞧,說(shuō)明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽(tīng)以及和dom的綁定,但是dom結(jié)構(gòu)依然存在原杂。

vue路由相關(guān)知識(shí)點(diǎn)

1.mvvm 框架是什么印颤?

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

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

答:vue用來(lái)寫(xiě)路由一個(gè)插件。router-link兴喂、router-view

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

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

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

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

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

答:三種云矫,
第一種:是全局導(dǎo)航鉤子:router.beforeEach(to,from,next),作用:跳轉(zhuǎn)前進(jìn)行判斷攔截汗菜。
第二種:組件內(nèi)的鉤子
第三種:?jiǎn)为?dú)路由獨(dú)享組件

6.$route 和 $router 的區(qū)別

答:$router是VueRouter的實(shí)例让禀,在script標(biāo)簽中想要導(dǎo)航到不同的URL,使用$router.push方法。返回上一個(gè)歷史history用$router.to(-1)
$route為當(dāng)前router跳轉(zhuǎn)對(duì)象陨界。里面可以獲取當(dāng)前路由的name,path,query,parmas等巡揍。

7.vue-router的兩種模式

答:hash模式:即地址欄 URL 中的 # 符號(hào);
history模式:window.history對(duì)象打印出來(lái)可以看到里邊提供的方法和記錄長(zhǎng)度菌瘪。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法腮敌。(需要特定瀏覽器支持)。

8.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相關(guān)知識(shí)點(diǎn)

1.vuex是什么崔拥?怎么使用极舔?哪種功能場(chǎng)景使用它凤覆?

答:vue框架中狀態(tài)管理。在main.js引入store拆魏,注入盯桦。
新建了一個(gè)目錄store和文件store.js慈俯,….. export 。
場(chǎng)景有:?jiǎn)雾?yè)應(yīng)用中拥峦,組件之間的狀態(tài)贴膘。音樂(lè)播放、登錄狀態(tài)略号、加入購(gòu)物車

2.vuex有哪幾種屬性刑峡?

答:有五種,分別是 State玄柠、 Getter突梦、Mutation 、Action羽利、 Module
state => 基本數(shù)據(jù)(數(shù)據(jù)源存放地)
getters => 從基本數(shù)據(jù)派生出來(lái)的數(shù)據(jù)
mutations => 提交更改數(shù)據(jù)的方法宫患,同步!
actions => 像一個(gè)裝飾器这弧,包裹mutations娃闲,使之可以異步。
modules => 模塊化Vuex

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

答:如果請(qǐng)求來(lái)的數(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)系作者
  • 序言:七十年代末挂洛,一起剝皮案震驚了整個(gè)濱河市礼预,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌虏劲,老刑警劉巖托酸,帶你破解...
    沈念sama閱讀 222,183評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異柒巫,居然都是意外死亡励堡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門堡掏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)应结,“玉大人,你說(shuō)我怎么就攤上這事《炝洌” “怎么了揩慕?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,766評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)扮休。 經(jīng)常有香客問(wèn)我迎卤,道長(zhǎng),這世上最難降的妖魔是什么玷坠? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,854評(píng)論 1 299
  • 正文 為了忘掉前任蜗搔,我火速辦了婚禮,結(jié)果婚禮上八堡,老公的妹妹穿的比我還像新娘碍扔。我一直安慰自己,他們只是感情好秕重,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布不同。 她就那樣靜靜地躺著,像睡著了一般溶耘。 火紅的嫁衣襯著肌膚如雪二拐。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,457評(píng)論 1 311
  • 那天凳兵,我揣著相機(jī)與錄音百新,去河邊找鬼。 笑死庐扫,一個(gè)胖子當(dāng)著我的面吹牛饭望,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播形庭,決...
    沈念sama閱讀 40,999評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼铅辞,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了萨醒?” 一聲冷哼從身側(cè)響起斟珊,我...
    開(kāi)封第一講書(shū)人閱讀 39,914評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎富纸,沒(méi)想到半個(gè)月后囤踩,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,465評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡晓褪,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評(píng)論 3 342
  • 正文 我和宋清朗相戀三年堵漱,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片涣仿。...
    茶點(diǎn)故事閱讀 40,675評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡勤庐,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情埃元,我是刑警寧澤涝涤,帶...
    沈念sama閱讀 36,354評(píng)論 5 351
  • 正文 年R本政府宣布媚狰,位于F島的核電站岛杀,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏崭孤。R本人自食惡果不足惜类嗤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望辨宠。 院中可真熱鬧遗锣,春花似錦、人聲如沸嗤形。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,514評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)赋兵。三九已至笔咽,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間霹期,已是汗流浹背叶组。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,616評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留历造,地道東北人甩十。 一個(gè)月前我還...
    沈念sama閱讀 49,091評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像吭产,于是被迫代替她去往敵國(guó)和親侣监。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評(píng)論 2 360

推薦閱讀更多精彩內(nèi)容