面試中值得深思的問(wèn)題

vue scoped的作用是什么? 如何更改element-ui樣式?

CSS,VUE中<style scoped> scoped不污染其他組件, /deep/的底層原理: 打包的時(shí)候會(huì)生成一個(gè)獨(dú)一無(wú)二[ha磨镶、sh]值饶米。作用是穿透空另。

前段解決跨域方案?

  1. 通過(guò)jsonp跨域款筑。
    2.document.domain + iframe跨域祝懂。
    3.location.hash + iframe顽耳。
  2. window.name + iframe跨域坠敷。
    5.postMessage跨域。
    6.跨域資源共享(CORS)射富。
    7.nginx代理跨域膝迎。
    8.nodejs中間件代理跨域。
    9.WebSocket協(xié)議跨域胰耗。

同一用戶下同一瀏覽器開(kāi)了兩個(gè)相同地址限次,借助按鈕操作VUEX同一state時(shí),是否有影響?

有影響,而且取決于你最后一次操作。

什么是強(qiáng)緩存和協(xié)商緩存,區(qū)別是什么?

在工作中宪郊,前端代碼打包之后的生成的靜態(tài)資源就要發(fā)布到靜態(tài)服務(wù)器上掂恕,這時(shí)候就要做對(duì)這些靜態(tài)資源做一些運(yùn)維配置,其中弛槐,gzip和設(shè)置緩存是必不可少的懊亡。這兩項(xiàng)是最直接影響到網(wǎng)站性能和用戶體驗(yàn)的。

緩存的有點(diǎn):

1.減少了不必要的數(shù)據(jù)傳輸乎串,節(jié)省帶寬
2.減少服務(wù)器的負(fù)擔(dān)店枣,提升網(wǎng)站性能
3.加快了客戶端加載網(wǎng)頁(yè)的速度
4.用戶體驗(yàn)友好

緩存的缺點(diǎn)

資源如果有更改但是客戶端不及時(shí)更新會(huì)造成用戶獲取信息滯后,如果老版本有bug的話叹誉,情況會(huì)更加糟糕

強(qiáng)緩存

到底什么是強(qiáng)緩存鸯两?強(qiáng)在哪?其實(shí)強(qiáng)是強(qiáng)制的意思长豁。當(dāng)瀏覽器去請(qǐng)求某個(gè)文件的時(shí)候钧唐,服務(wù)端就在respone header里面對(duì)該文件做了緩存配置。緩存的時(shí)間匠襟、緩存類型都由服務(wù)端控制钝侠,具體表現(xiàn)為:
respone header 的cache-control,常見(jiàn)的設(shè)置是max-age public private no-cache no-store等

詳細(xì)說(shuō)明

max-age表示緩存的時(shí)間是31536000秒(1年)酸舍,public表示可以被瀏覽器和代理服務(wù)器緩存帅韧,代理服務(wù)器一般可用nginx來(lái)做。immutable表示該資源永遠(yuǎn)不變啃勉,但是實(shí)際上該資源并不是永遠(yuǎn)不變忽舟,它這么設(shè)置的意思是為了讓用戶在刷新頁(yè)面的時(shí)候不要去請(qǐng)求服務(wù)器!啥意思?就是說(shuō)叮阅,如果你只設(shè)置了cahe-control:max-age=31536000,public 這屬于強(qiáng)緩存刁品,每次用戶正常打開(kāi)這個(gè)頁(yè)面,瀏覽器會(huì)判斷緩存是否過(guò)期帘饶,沒(méi)有過(guò)期就從緩存中讀取數(shù)據(jù)哑诊;但是有一些 "聰明" 的用戶會(huì)點(diǎn)擊瀏覽器左上角的刷新按鈕去刷新頁(yè)面,這時(shí)候就算資源沒(méi)有過(guò)期(1年沒(méi)這么快過(guò))及刻,瀏覽器也會(huì)直接去請(qǐng)求服務(wù)器镀裤,這就是額外的請(qǐng)求消耗了,這時(shí)候就相當(dāng)于是走協(xié)商緩存的流程了(下面會(huì)講到)缴饭。如果cahe-control:max-age=315360000,public再加個(gè)immutable的話暑劝,就算用戶刷新頁(yè)面,瀏覽器也不會(huì)發(fā)起請(qǐng)求去服務(wù)颗搂,瀏覽器會(huì)直接從本地磁盤或者內(nèi)存中讀取緩存并返回200狀態(tài)担猛,看上圖的紅色框(from memory cache)。這是2015年facebook團(tuán)隊(duì)向制定 HTTP 標(biāo)準(zhǔn)的 IETF 工作組提到的建議:他們希望 HTTP 協(xié)議能給 Cache-Control 響應(yīng)頭增加一個(gè)屬性字段表明該資源永不過(guò)期丢氢,瀏覽器就沒(méi)必要再為這些資源發(fā)送條件請(qǐng)求了傅联。

強(qiáng)緩存總結(jié)

1.cache-control: max-age=xxxx,public
客戶端和代理服務(wù)器都可以緩存該資源疚察;
客戶端在xxx秒的有效期內(nèi)蒸走,如果有請(qǐng)求該資源的需求的話就直接讀取緩存,statu code:200 ,如果用戶做了刷新操作貌嫡,就向服務(wù)器發(fā)起http請(qǐng)求

2.cache-control: max-age=xxxx比驻,private
只讓客戶端可以緩存該資源;代理服務(wù)器不緩存
客戶端在xxx秒內(nèi)直接讀取緩存,statu code:200

3.cache-control: max-age=xxxx岛抄,immutable
客戶端在xxx秒的有效期內(nèi)别惦,如果有請(qǐng)求該資源的需求的話就直接讀取緩存,statu code:200 ,即使用戶做了刷新操作夫椭,也不向服務(wù)器發(fā)起http請(qǐng)求

4.cache-control: no-cache
跳過(guò)設(shè)置強(qiáng)緩存掸掸,但是不妨礙設(shè)置協(xié)商緩存;一般如果你做了強(qiáng)緩存蹭秋,只有在強(qiáng)緩存失效了才走協(xié)商緩存的扰付,設(shè)置了no-cache就不會(huì)走強(qiáng)緩存了,每次請(qǐng)求都回詢問(wèn)服務(wù)端感凤。

5.cache-control: no-store
不緩存悯周,這個(gè)會(huì)讓客戶端粒督、服務(wù)器都不緩存陪竿,也就沒(méi)有所謂的強(qiáng)緩存、協(xié)商緩存了。

協(xié)商緩存

上面說(shuō)到的強(qiáng)緩存就是給資源設(shè)置個(gè)過(guò)期時(shí)間族跛,客戶端每次請(qǐng)求資源時(shí)都會(huì)看是否過(guò)期闰挡;只有在過(guò)期才會(huì)去詢問(wèn)服務(wù)器。所以礁哄,強(qiáng)緩存就是為了給客戶端自給自足用的长酗。而當(dāng)某天,客戶端請(qǐng)求該資源時(shí)發(fā)現(xiàn)其過(guò)期了桐绒,這是就會(huì)去請(qǐng)求服務(wù)器了夺脾,而這時(shí)候去請(qǐng)求服務(wù)器的這過(guò)程就可以設(shè)置協(xié)商緩存。這時(shí)候茉继,協(xié)商緩存就是需要客戶端和服務(wù)器兩端進(jìn)行交互的咧叭。

深入了解強(qiáng)緩存和協(xié)議緩存 http://www.reibang.com/p/9c95db596df5

VUE的生命周期?路由模板加入了<keep-alive>多出的兩個(gè)鉤子是什么?作用是什么?

activated :路由組件被激活時(shí)觸發(fā)。(當(dāng)進(jìn)入緩存的路由組件時(shí)觸發(fā))烁竭。
deactivated:路由組件失活時(shí)觸發(fā)菲茬。(當(dāng)離開(kāi)緩存的路由組件時(shí)觸發(fā))派撕。

VUEX的詳細(xì)步驟。VUEX的概念.

反向說(shuō): 首先在src更目錄下建立store文件如果你要分模塊终吼,用index文件導(dǎo)出,從建立state衔峰,mutaion(同步)更改state,action提交mutaion最好使用return newpromise 把值帶出來(lái),在main.js
引用,APP.vue掛載,組件里import {mapState,mapAction} 計(jì)算屬性或methods里使用佩脊。

概念

主要是為了與組件通信,狀態(tài)管理機(jī)制威彰。

VUE路由請(qǐng)描述一下?

1.創(chuàng)建路由表。如果要配置權(quán)限的話就用到導(dǎo)航守衛(wèi)歇盼。
2.前置守衛(wèi),后置守衛(wèi)评抚,組件內(nèi)守衛(wèi)豹缀,
3.路由傳參,編程時(shí)跳轉(zhuǎn)是帶query和param慨代。

VUE路由組件內(nèi)守衛(wèi)beforeRouteEnter怎樣訪問(wèn)this,組件內(nèi)守衛(wèi)有幾個(gè)?

在next放行是帶個(gè)vm參數(shù),3個(gè)beforeRouteUpdate (2.2版本新增)。

VUE組件通信氮惯?

VUE v-if和v-show的區(qū)別

v-if: dom消失display:none的效果
v-show: dom不消失,影藏

VUE 父組件直接v-if="this.$refs.child"會(huì)出現(xiàn)什么效果?

無(wú)法獲取到子組件的屬性,最好使用this.$nextTick異步加載

this.$nextTick實(shí)現(xiàn)原理

這里就涉及到 Vue 一個(gè)很重要的概念:異步更新隊(duì)列(JS運(yùn)行機(jī)制 妇汗、 事件循環(huán))。
Vue 在觀察到數(shù)據(jù)變化時(shí)并不是直接更新 DOM寞焙,而是開(kāi)啟一個(gè)隊(duì)列,并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變捣郊。
在緩沖時(shí)會(huì)去除重復(fù)數(shù)據(jù)慈参,從而避免不必要的計(jì)算和DOM操作。
然后侈净,在下一個(gè)事件循環(huán) tick 中僧凤,Vue 刷新隊(duì)列并執(zhí)行實(shí)際(已去重的)工作畜侦。
所以如果用 for 循環(huán)來(lái)動(dòng)態(tài)改變數(shù)據(jù)100次躯保,其實(shí)它只會(huì)應(yīng)用最后一次改變途事,如果沒(méi)有這種機(jī)制,DOM就要重繪100次尸变,是一個(gè)很大的開(kāi)銷,損耗性能召烂。

JS 事件循環(huán)(eventLoop)

1.JavaScript是單線程,非阻塞的
2.瀏覽器的事件循環(huán)
3.執(zhí)行棧和事件隊(duì)列
4.宏任務(wù)和微任務(wù)
5.node環(huán)境下的事件循環(huán)
和瀏覽器環(huán)境有何不同
事件循環(huán)模型
宏任務(wù)和微任務(wù)

深入了解eventLoop: https://www.ruanyifeng.com/blog/2014/10/event-loop.html

VUE簡(jiǎn)單的我就不描述了奏夫,希望對(duì)你們的面試有所幫助, js 把對(duì)象和數(shù)組酗昼,面向?qū)ο螅顪\拷貝麻削,原先和wepack 的AMD和commonJS熟悉舔示。

小程序

react

混合開(kāi)發(fā)电抚,

這里簡(jiǎn)單描述,一般公司都會(huì)優(yōu)先使用H5頁(yè)面竖共,優(yōu)點(diǎn)呢快,不用再HBuildex 里面打包發(fā)布借帘,走的都是域名模式C2B模式淌铐,
如何搭出安卓apk文件,ios ipa 文件腿准。
1.借助工具phoneGap,uni-app等等街望。
2.要安卓證書和ios證書弟跑。
3.在HBuilder 選擇原生app 打包,可下載5次孟辑。在蒲公英發(fā)布一下包。
4.要是發(fā)布應(yīng)用到商城里面則需要生產(chǎn)包對(duì)接華為應(yīng)用商城炭玫,小米應(yīng)用商城貌虾,vivo應(yīng)用商城。等等榴鼎。
5.借助原生H5api解決一些權(quán)限晚唇,當(dāng)然用的uni-app幫你包裝過(guò)了只需要在json里面?zhèn)魅雓ey值。
6.建議在云服務(wù)器一條龍服務(wù)哩陕,自己搭建的服務(wù)器赫舒,前段壓力會(huì)很大闽瓢。

如何優(yōu)化你自己的項(xiàng)目?

1.去除冗余代碼缺猛。壓縮插件用起來(lái)
2.圖片壓縮椭符,對(duì)一些不重要的小型圖片可在壓縮一次。
3.介紹CDN轉(zhuǎn)發(fā)有咨,將一些引用外部js的copy到本地蒸健。
4.圖標(biāo)字庫(kù)盡量保持2-3兆如果超過(guò)可不使用。
5.注釋console和debugger似忧。

我會(huì)持續(xù)更新,希望可以對(duì)大家有用诗箍。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末挽唉,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子匠童,更是在濱河造成了極大的恐慌塑顺,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,599評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件扬绪,死亡現(xiàn)場(chǎng)離奇詭異裤唠,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)墓赴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,629評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)诫硕,“玉大人,你說(shuō)我怎么就攤上這事锉走「倬” “怎么了疮绷?”我有些...
    開(kāi)封第一講書人閱讀 158,084評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵冬骚,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我只冻,道長(zhǎng),這世上最難降的妖魔是什么山橄? 我笑而不...
    開(kāi)封第一講書人閱讀 56,708評(píng)論 1 284
  • 正文 為了忘掉前任舍悯,我火速辦了婚禮,結(jié)果婚禮上饮醇,老公的妹妹穿的比我還像新娘秕豫。我一直安慰自己,他們只是感情好混移,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,813評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布歌径。 她就那樣靜靜地躺著,像睡著了一般沮脖。 火紅的嫁衣襯著肌膚如雪芯急。 梳的紋絲不亂的頭發(fā)上驶俊,一...
    開(kāi)封第一講書人閱讀 50,021評(píng)論 1 291
  • 那天饼酿,我揣著相機(jī)與錄音,去河邊找鬼故俐。 笑死,一個(gè)胖子當(dāng)著我的面吹牛辑舷,可吹牛的內(nèi)容都是我干的槽片。 我是一名探鬼主播,決...
    沈念sama閱讀 39,120評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼碌廓,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼剩盒!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起辽聊,我...
    開(kāi)封第一講書人閱讀 37,866評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤身隐,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后贾铝,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,308評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡玖绿,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,633評(píng)論 2 327
  • 正文 我和宋清朗相戀三年斑匪,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了锋勺。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蚀瘸。...
    茶點(diǎn)故事閱讀 38,768評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡贮勃,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出寂嘉,到底是詐尸還是另有隱情,我是刑警寧澤硼端,帶...
    沈念sama閱讀 34,461評(píng)論 4 333
  • 正文 年R本政府宣布寓搬,位于F島的核電站,受9級(jí)特大地震影響曼尊,放射性物質(zhì)發(fā)生泄漏脏嚷。R本人自食惡果不足惜瞒御,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,094評(píng)論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望肴裙。 院中可真熱鬧趾唱,春花似錦蜻懦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,850評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至眼坏,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間宰译,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,082評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工熬甚, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留肋坚,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,571評(píng)論 2 362
  • 正文 我出身青樓诲泌,卻偏偏與公主長(zhǎng)得像铣鹏,于是被迫代替她去往敵國(guó)和親诚卸。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,666評(píng)論 2 350

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