1.vue優(yōu)點(diǎn)跷睦?
答:輕量級(jí)框架:只關(guān)注視圖層,是一個(gè)構(gòu)建數(shù)據(jù)的視圖集合肋演,大小只有幾十kb抑诸;
簡(jiǎn)單易學(xué):國(guó)人開發(fā),中文文檔爹殊,不存在語言障礙 哼鬓,易于理解和學(xué)習(xí);
雙向數(shù)據(jù)綁定:保留了angular的特點(diǎn)边灭,在數(shù)據(jù)操作方面更為簡(jiǎn)單异希;
組件化:保留了react的優(yōu)點(diǎn),實(shí)現(xiàn)了html的封裝和重用绒瘦,在構(gòu)建單頁面應(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不過是換了另一種方式悔叽;
運(yùn)行速度更快:相比較與react而言,同樣是操作虛擬dom爵嗅,就性能而言娇澎,vue存在很大的優(yōu)勢(shì)。
2.vue父組件向子組件傳遞數(shù)據(jù)睹晒?
答:通過props
3.子組件像父組件傳遞事件趟庄?
答:refs.domName
8.說出幾種vue當(dāng)中的指令和它的用法?
答:v-model雙向數(shù)據(jù)綁定改基;
v-for循環(huán)繁疤;
v-if v-show 顯示與隱藏;
v-on事件秕狰;v-once: 只綁定一次稠腊。
- vue-loader是什么?使用它的用途有哪些鸣哀?
答:vue文件的一個(gè)加載器架忌,將template/js/style轉(zhuǎn)換成js模塊。
用途:js可以寫es6我衬、style樣式可以scss或less叹放、template可以加jade等
10.為什么使用key?
答:需要使用key來給每個(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)來糕档,然后.get或.post。返回在.then函數(shù)中如果成功拌喉,失敗則是在.catch函數(shù)中。
12.v-modal的使用俐银。
答:v-model用于表單數(shù)據(jù)的雙向綁定尿背,其實(shí)它就是一個(gè)語法糖,這個(gè)背后就做了兩個(gè)操作:
v-bind綁定一個(gè)value屬性捶惜;
v-on指令給當(dāng)前元素綁定input事件田藐。
13.請(qǐng)說出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)聽多個(gè)方法嗎景醇?
答:可以臀稚,栗子:<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。
16.nextTick這個(gè)回調(diào),讓修改后的data值渲染更新到dom元素之后在獲取散劫,才能成功稚机。
17.vue組件中data為什么必須是一個(gè)函數(shù)?
答:因?yàn)镴avaScript的特性所導(dǎo)致获搏,在component中赖条,data必須以函數(shù)的形式存在,不可以是對(duì)象常熙。
組建中的data寫成一個(gè)函數(shù)纬乍,數(shù)據(jù)以函數(shù)返回值的形式定義,這樣每次復(fù)用組件的時(shí)候症概,都會(huì)返回一份新的data蕾额,相當(dāng)于每個(gè)組件實(shí)例都有自己私有的數(shù)據(jù)空間,它們只負(fù)責(zé)各自維護(hù)的數(shù)據(jù)彼城,不會(huì)造成混亂诅蝶。而單純的寫成對(duì)象形式,就是所有的組件實(shí)例共用了一個(gè)data募壕,這樣改一個(gè)全都改了调炬。
18.漸進(jìn)式框架的理解
答:主張最少;可以根據(jù)不同的需求選擇不同的層級(jí)舱馅;
19.Vue中雙向數(shù)據(jù)綁定是如何實(shí)現(xiàn)的缰泡?
答:vue 雙向數(shù)據(jù)綁定是通過 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來實(shí)現(xiàn)的, 也就是說數(shù)據(jù)和視圖同步代嗤,數(shù)據(jù)發(fā)生變化棘钞,視圖跟著變化,視圖變化干毅,數(shù)據(jù)也隨之發(fā)生改變宜猜;
核心:關(guān)于VUE雙向數(shù)據(jù)綁定,其核心是 Object.defineProperty()方法硝逢。
20.單頁面應(yīng)用和多頁面應(yīng)用區(qū)別及優(yōu)缺點(diǎn)
答:?jiǎn)雾撁鎽?yīng)用(SPA)姨拥,通俗一點(diǎn)說就是指只有一個(gè)主頁面的應(yīng)用绅喉,瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內(nèi)容都包含在這個(gè)所謂的主頁面中叫乌。但在寫的時(shí)候柴罐,還是會(huì)分開寫(頁面片段),然后在交互的時(shí)候由路由程序動(dòng)態(tài)載入憨奸,單頁面的頁面跳轉(zhuǎn)革屠,僅刷新局部資源。多應(yīng)用于pc端膀藐。
多頁面(MPA)屠阻,就是指一個(gè)應(yīng)用中有多個(gè)頁面,頁面跳轉(zhuǎn)時(shí)是整頁刷新
單頁面的優(yōu)點(diǎn):
用戶體驗(yàn)好额各,快国觉,內(nèi)容的改變不需要重新加載整個(gè)頁面,基于這一點(diǎn)spa對(duì)服務(wù)器壓力較邢豪病麻诀;前后端分離;頁面效果會(huì)比較炫酷(比如切換頁面內(nèi)容時(shí)的專場(chǎng)動(dòng)畫)傲醉。
單頁面缺點(diǎn):
不利于seo蝇闭;導(dǎo)航不可用,如果一定要導(dǎo)航需要自行實(shí)現(xiàn)前進(jìn)硬毕、后退呻引。(由于是單頁面不能用瀏覽器的前進(jìn)后退功能,所以需要自己建立堆棧管理)吐咳;初次加載時(shí)耗時(shí)多逻悠;頁面復(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中的資源文件由于沒有進(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)過處理蘸嘶,我們不再需要處理,直接上傳陪汽。
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可以看作全部是由組件樹構(gòu)成的蟆沫。
25.vue和jQuery的區(qū)別
答:jQuery是使用選擇器(("lable").val();,它還是依賴DOM元素的值绸狐。
Vue則是通過Vue對(duì)象將數(shù)據(jù)和View完全分離開來了卤恳。對(duì)數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM對(duì)象,可以說數(shù)據(jù)和View是分離的寒矿,他們通過Vue對(duì)象這個(gè)vm實(shí)現(xiàn)相互的綁定突琳。這就是傳說中的MVVM。 - 引進(jìn)組件的步驟
答: 在template中引入組件符相;
在script的第一行用import引入路徑拆融;
用component中寫上組件名稱。
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'來跳轉(zhuǎn)趟脂,簡(jiǎn)單方便,但是刷新了頁面搞旭;
使用history.pushState('/url')散怖,無刷新頁面,靜態(tài)跳轉(zhuǎn)肄渗;
引進(jìn)router镇眷,然后使用router.push('/url')來跳轉(zhuǎn),使用了diff算法翎嫡,實(shí)現(xiàn)了按需加載欠动,減少了dom的消耗。
其實(shí)使用router跳轉(zhuǎn)和使用history.pushState()沒什么差別的惑申,因?yàn)関ue-router就是用了history.pushState()具伍,尤其是在history模式下。 - vue slot
答:簡(jiǎn)單來說圈驼,假如父組件需要在子組件內(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在電腦上有用禀倔,在安卓上沒反應(yīng)怎么解決榄融?
答:Vue路由在Android機(jī)上有問題,babel問題蹋艺,安裝babel polypill插件解決剃袍。
33.Vue2中注冊(cè)在router-link上事件無效解決方法
答: 使用@click.native。原因:router-link會(huì)阻止click事件捎谨,.native指直接監(jiān)聽一個(gè)原生事件。
34.RouterLink在IE和Firefox中不起作用(路由不跳轉(zhuǎ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)說下封裝 vue 組件的過程帚呼?
答:1. 建立組件的模板,先把架子搭起來皱蹦,寫寫樣式煤杀,考慮好組件的基本邏輯。(os:思考1小時(shí)沪哺,碼碼10分鐘沈自,程序猿的準(zhǔn)則。)
2. 準(zhǔn)備好組件的數(shù)據(jù)輸入辜妓。即分析好邏輯枯途,定好 props 里面的數(shù)據(jù)、類型嫌拣。
3. 準(zhǔn)備好組件的數(shù)據(jù)輸出柔袁。即根據(jù)組件邏輯,做好要暴露出來的方法异逐。
4. 封裝完畢了捶索,直接調(diào)用即可
37.params和query的區(qū)別
答:用法:query要用path來引入,params要用name來引入灰瞻,接收參數(shù)都是類似的腥例,分別是this.route.params.name辅甥。
url地址顯示:query更加類似于我們ajax中g(shù)et傳參,params則類似于post燎竖,說的再簡(jiǎn)單一點(diǎn)璃弄,前者在瀏覽器地址欄中顯示參數(shù),后者則不顯示
注意點(diǎn):query刷新不會(huì)丟失query里面的數(shù)據(jù)
params刷新 會(huì) 丟失 params里面的數(shù)據(jù)构回。
38.vue初始化頁面閃動(dòng)問題
答:使用vue開發(fā)時(shí)夏块,在vue初始化之前,由于div是不歸vue管的纤掸,所以我們寫的代碼在還沒有解析的情況下會(huì)容易出現(xiàn)花屏現(xiàn)象脐供,看到類似于{{message}}的字樣,雖然一般情況下這個(gè)時(shí)間很短暫借跪,但是我們還是有必要讓解決這個(gè)問題的政己。
首先:在css里加上[v-cloak] {
display: none;
}。
如果沒有徹底解決問題掏愁,則在根元素加上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 頁面(目錄相同) }
生命周期函數(shù)面試題
1.什么是 vue 生命周期?有什么作用欠气?
答:每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程——例如厅各,需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板预柒、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等队塘。同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做 生命周期鉤子 的函數(shù),這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)宜鸯。(ps:生命周期鉤子就是生命周期函數(shù))例如憔古,如果要通過某些插件操作DOM節(jié)點(diǎn),如想在頁面渲染完后彈出廣告窗淋袖, 那我們最早可在mounted 中進(jìn)行鸿市。
2.第一次頁面加載會(huì)觸發(fā)哪幾個(gè)鉤子?
答:beforeCreate, created焰情, beforeMount陌凳, mounted
3.簡(jiǎn)述每個(gè)周期具體適合哪些場(chǎng)景
答:beforeCreate:在new一個(gè)vue實(shí)例后,只有一些默認(rèn)的生命周期鉤子和默認(rèn)事件内舟,其他的東西都還沒創(chuàng)建合敦。在beforeCreate生命周期執(zhí)行的時(shí)候,data和methods中的數(shù)據(jù)都還沒有初始化验游。不能在這個(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)編譯好了模板了,但是還沒有掛載到頁面中赔硫,此時(shí),頁面還是舊的
mounted:執(zhí)行到這個(gè)鉤子的時(shí)候盐肃,就表示Vue實(shí)例已經(jīng)初始化完成了爪膊。此時(shí)組件脫離了創(chuàng)建階段,進(jìn)入到了運(yùn)行階段砸王。 如果我們想要通過插件操作頁面上的DOM節(jié)點(diǎn)推盛,最早可以在和這個(gè)階段中進(jìn)行
beforeUpdate: 當(dāng)執(zhí)行這個(gè)鉤子時(shí),頁面中的顯示的數(shù)據(jù)還是舊的谦铃,data中的數(shù)據(jù)是更新后的耘成, 頁面還沒有和最新的數(shù)據(jù)保持同步
updated:頁面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了,都是最新的
beforeDestory:Vue實(shí)例從運(yùn)行階段進(jìn)入到了銷毀階段驹闰,這個(gè)時(shí)候上所有的 data 和 methods 瘪菌, 指令, 過濾器 ……都是處于可用狀態(tài)嘹朗。還沒有真正被銷毀
destroyed: 這個(gè)時(shí)候上所有的 data 和 methods 师妙, 指令, 過濾器 ……都是處于不可用狀態(tài)屹培。組件已經(jīng)被銷毀了默穴。
4.created和mounted的區(qū)別
答:created:在模板渲染成html前調(diào)用,即通常初始化某些屬性值褪秀,然后再渲染成視圖蓄诽。
mounted:在模板渲染成html后調(diào)用,通常是初始化頁面完成后媒吗,再對(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)敿?xì)說下你對(duì)vue生命周期的理解?
答:總共分為8個(gè)階段創(chuàng)建前/后蝴猪,載入前/后调衰,更新前/后膊爪,銷毀前/后。
創(chuàng)建前/后: 在beforeCreated階段嚎莉,vue實(shí)例的掛載元素el還沒有。
載入前/后:在beforeMount階段叫确,vue實(shí)例的route 和
router是VueRouter的實(shí)例拌屏,在script標(biāo)簽中想要導(dǎo)航到不同的URL,使用
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ì)象打印出來可以看到里邊提供的方法和記錄長(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常見面試題
1.vuex是什么?怎么使用拯辙?哪種功能場(chǎng)景使用它郭变?
答:vue框架中狀態(tài)管理。在main.js引入store涯保,注入诉濒。
新建了一個(gè)目錄store.js,….. export 夕春。
場(chǎng)景有:?jiǎn)雾搼?yīng)用中未荒,組件之間的狀態(tài)。音樂播放及志、登錄狀態(tài)片排、加入購(gòu)物車
2.vuex有哪幾種屬性?
答:有五種速侈,分別是 State率寡、 Getter、Mutation 倚搬、Action冶共、 Module
state => 基本數(shù)據(jù)(數(shù)據(jù)源存放地)
getters => 從基本數(shù)據(jù)派生出來的數(shù)據(jù)
mutations => 提交更改數(shù)據(jù)的方法,同步!
actions => 像一個(gè)裝飾器捅僵,包裹mutations家卖,使之可以異步。
modules => 模塊化Vuex
3.Vue.js中ajax請(qǐng)求代碼應(yīng)該寫在組件的methods中還是vuex的actions中庙楚?
答:如果請(qǐng)求來的數(shù)據(jù)是不是要被其他組件公用上荡,僅僅在請(qǐng)求的組件內(nèi)使用,就不需要放入vuex 的state里醋奠。
如果被其他地方復(fù)用榛臼,這個(gè)很大幾率上是需要的,如果需要窜司,請(qǐng)將請(qǐng)求放入action里沛善,方便復(fù)用。
轉(zhuǎn)自 Lucky Girl