vue scoped的作用是什么? 如何更改element-ui樣式?
CSS,VUE中<style scoped> scoped不污染其他組件, /deep/的底層原理: 打包的時(shí)候會(huì)生成一個(gè)獨(dú)一無(wú)二[ha磨镶、sh]值饶米。作用是穿透空另。
前段解決跨域方案?
- 通過(guò)jsonp跨域款筑。
2.document.domain + iframe跨域祝懂。
3.location.hash + iframe顽耳。 - 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似忧。