2019-01-20前端面試題

js閉包概念:在函數(shù)內(nèi)壁定義一個(gè)子函數(shù),可以用子函數(shù)訪問(wèn)父函數(shù)的私有變量蠢护,執(zhí)行完成操作后將函數(shù)通過(guò)return對(duì)象返回禀挫。

閉包作用:訪問(wèn)函數(shù)的私有變量:將函數(shù)的變量始終存于內(nèi)存中不釋放;

繼承概念:使用一個(gè)子類繼承父類税肪,子類可以自動(dòng)擁有父類的屬性和方法晾浴;

繼承的三種實(shí)現(xiàn)方式:object的protype實(shí)現(xiàn)繼承负乡,使用call和apply實(shí)現(xiàn)繼承,使用原型鏈繼承脊凰;

潛拷貝:雙向改變抖棘,指向統(tǒng)一內(nèi)存空間;改變其中一方的內(nèi)容狸涌,都是在原來(lái)的內(nèi)存上做修改切省,會(huì)導(dǎo)致拷貝對(duì)象和源對(duì)象發(fā)生修改;

潛拷貝實(shí)現(xiàn):1簡(jiǎn)單的復(fù)用杈抢;2:Object.assign();方法可以把任意多個(gè)的源對(duì)象自身的可枚舉屬性拷貝給目標(biāo)對(duì)象仑性,然后返回目標(biāo)對(duì)象惶楼。Object.assign會(huì)跳過(guò)那些值為 null 或 undefined 的源對(duì)象。

深拷貝:開(kāi)辟新的內(nèi)存地址诊杆,象的各個(gè)屬性逐個(gè)復(fù)制進(jìn)去歼捐。對(duì)拷貝對(duì)象和源對(duì)象各自的操作互不影響。

深拷貝實(shí)現(xiàn)方法:.1晨汹、Array的slice和concat方法豹储;2JSON對(duì)象的parse和stringify;jQuery.extend()方法源碼實(shí)現(xiàn)淘这;

作用域鏈:剥扣;

vue問(wèn)題:

vue綁定失效的原因:1對(duì)于數(shù)組來(lái)說(shuō)是沒(méi)有g(shù)et和set的方法巩剖,所以需要手動(dòng)設(shè)置;

vue綁定圖片失效的原因:

其中文字內(nèi)容能夠正常顯示钠怯,說(shuō)明傳遞的數(shù)據(jù)沒(méi)有錯(cuò)

但是由于在div中顯示之前佳魔,webpack并沒(méi)有去編譯我的imgsrc

解決方法:??

加個(gè)require()就可以了

? <img :src="require('../assets/images/'+imgsrc+'.png')"/>

快速解決vue動(dòng)態(tài)綁定多個(gè)class的官方實(shí)例語(yǔ)法無(wú)效的問(wèn)題

<a :class="{ 'active': hash==='finish','nav-link':true}"href="#/finish"rel="external nofollow">已完成</a>

1、active-class是哪個(gè)組件的屬性晦炊?嵌套路由怎么定義鞠鲜?

答:vue-router模塊的router-link組件。

2断国、怎么定義vue-router的動(dòng)態(tài)路由贤姆?怎么獲取傳過(guò)來(lái)的動(dòng)態(tài)參數(shù)??

答:在router目錄下的index.js文件中稳衬,對(duì)path屬性加上/:id霞捡。? 使用router對(duì)象的params.id

3、vue-router有哪幾種導(dǎo)航鉤子宋彼??? ?

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

4、scss是什么莱坎?安裝使用的步驟是衣式?有哪幾大特性?

答:預(yù)處理css檐什,把css當(dāng)前函數(shù)編寫碴卧,定義變量,嵌套。 先裝css-loader乃正、node-loader住册、sass-loader等加載器模塊,在webpack-base.config.js配置文件中加多一個(gè)拓展:extenstion瓮具,再加多一個(gè)模塊:module里面test荧飞、loader

4.1、scss是什么名党?在vue.cli中的安裝使用步驟是叹阔?有哪幾大特性?

答:css的預(yù)編譯传睹。

使用步驟:

第一步:用npm 下三個(gè)loader(sass-loader耳幢、css-loader、node-sass)

第二步:在build目錄找到webpack.base.config.js欧啤,在那個(gè)extends屬性中加一個(gè)拓展.scss

第三步:還是在同一個(gè)文件睛藻,配置一個(gè)module屬性

第四步:然后在組件的style標(biāo)簽加上lang屬性 启上,例如:lang=”scss”

有哪幾大特性:

1、可以用變量修档,例如($變量名稱=值)碧绞;

2、可以用混合器吱窝,例如()

3讥邻、可以嵌套

5、mint-ui是什么院峡?怎么使用兴使?說(shuō)出至少三個(gè)組件使用方法?

答:基于vue的前端組件庫(kù)照激。npm安裝发魄,然后import樣式和js,vue.use(mintUi)全局引入俩垃。在單個(gè)組件局部引入:import {Toast} from ‘mint-ui’励幼。組件一:Toast(‘登錄成功’);組件二:mint-header口柳;組件三:mint-swiper

6苹粟、v-model是什么?怎么使用跃闹? vue中標(biāo)簽怎么綁定事件嵌削?

答:可以實(shí)現(xiàn)雙向綁定,指令(v-class望艺、v-for苛秕、v-if、v-show找默、v-on)艇劫。vue的model層的data屬性。綁定事件:

7惩激、axios是什么店煞?怎么使用?描述使用它實(shí)現(xiàn)登錄功能的流程咧欣?

答:請(qǐng)求后臺(tái)資源的模塊浅缸。npm install axios -S裝好轨帜,然后發(fā)送的是跨域魄咕,需在配置文件中config/index.js進(jìn)行設(shè)置。后臺(tái)如果是Tp5則定義一個(gè)資源路由蚌父。js中使用import進(jìn)來(lái)哮兰,然后.get或.post毛萌。返回在.then函數(shù)中如果成功,失敗則是在.catch函數(shù)中


8喝滞、axios+tp5進(jìn)階中阁将,調(diào)用axios.post(‘a(chǎn)pi/user’)是進(jìn)行的什么操作?axios.put(‘a(chǎn)pi/user/8′)呢右遭?

答:跨域做盅,添加用戶操作,更新操作窘哈。

9吹榴、什么是RESTful API?怎么使用?

答:是一個(gè)api的標(biāo)準(zhǔn)滚婉,無(wú)狀態(tài)請(qǐng)求图筹。請(qǐng)求的路由地址是固定的,如果是tp5則先路由配置中把資源路由配置好让腹。標(biāo)準(zhǔn)有:.post .put .delete

10远剩、vuex是什么?怎么使用骇窍?哪種功能場(chǎng)景使用它瓜晤?

答:vue框架中狀態(tài)管理。在main.js引入store像鸡,注入活鹰。新建了一個(gè)目錄store,….. export 只估。場(chǎng)景有:?jiǎn)雾?yè)應(yīng)用中志群,組件之間的狀態(tài)。音樂(lè)播放蛔钙、登錄狀態(tài)锌云、加入購(gòu)物車

11、mvvm框架是什么吁脱?它和其它框架(jquery)的區(qū)別是什么桑涎?哪些場(chǎng)景適合?

答:一個(gè)model+view+viewModel框架兼贡,數(shù)據(jù)模型model攻冷,viewModel連接兩個(gè)

區(qū)別:vue數(shù)據(jù)驅(qū)動(dòng),通過(guò)數(shù)據(jù)來(lái)顯示視圖層而不是節(jié)點(diǎn)操作遍希。

場(chǎng)景:數(shù)據(jù)操作比較多的場(chǎng)景等曼,更加便捷

12、自定義指令(v-check、v-focus)的方法有哪些禁谦?它有哪些鉤子函數(shù)胁黑?還有哪些鉤子函數(shù)參數(shù)?

答:全局定義指令:在vue對(duì)象的directive方法里面有兩個(gè)參數(shù)州泊,一個(gè)是指令名稱丧蘸,另外一個(gè)是函數(shù)。組件內(nèi)定義指令:directives

鉤子函數(shù):bind(綁定事件觸發(fā))遥皂、inserted(節(jié)點(diǎn)插入的時(shí)候觸發(fā))力喷、update(組件內(nèi)相關(guān)更新)

鉤子函數(shù)參數(shù):el、binding

13演训、說(shuō)出至少4種vue當(dāng)中的指令和它的用法冗懦?

答:v-if:判斷是否隱藏;v-for:數(shù)據(jù)循環(huán)出來(lái)仇祭;v-bind:class:綁定一個(gè)屬性披蕉;v-model:實(shí)現(xiàn)雙向綁定

14、vue-router是什么乌奇?它有哪些組件没讲?

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

15爬凑、導(dǎo)航鉤子有哪些?它們有哪些參數(shù)试伙?

答:導(dǎo)航鉤子有:a/全局鉤子和組件內(nèi)獨(dú)享的鉤子嘁信。b/beforeRouteEnter、afterEnter疏叨、beforeRouterUpdate潘靖、beforeRouteLeave

參數(shù):有to(去的那個(gè)路由)、from(離開(kāi)的路由)蚤蔓、next(一定要用這個(gè)函數(shù)才能去到下一個(gè)路由卦溢,如果不用就攔截)最常用就這幾種

16、Vue的雙向數(shù)據(jù)綁定原理是什么秀又?

答:vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式单寂,通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter,getter吐辙,在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者宣决,觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)。

具體步驟:

第一步:需要observe的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷昏苏,包括子屬性對(duì)象的屬性尊沸,都加上setter和getter

這樣的話昵时,給這個(gè)對(duì)象的某個(gè)值賦值,就會(huì)觸發(fā)setter椒丧,那么就能監(jiān)聽(tīng)到了數(shù)據(jù)變化

第二步:compile解析模板指令,將模板中的變量替換成數(shù)據(jù)救巷,然后初始化渲染頁(yè)面視圖壶熏,并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù),添加監(jiān)聽(tīng)數(shù)據(jù)的訂閱者浦译,一旦數(shù)據(jù)有變動(dòng)棒假,收到通知,更新視圖

第三步:Watcher訂閱者是Observer和Compile之間通信的橋梁精盅,主要做的事情是:

1帽哑、在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己

2、自身必須有一個(gè)update()方法

3叹俏、待屬性變動(dòng)dep.notice()通知時(shí)妻枕,能調(diào)用自身的update()方法,并觸發(fā)Compile中綁定的回調(diào)粘驰,則功成身退屡谐。

第四步:MVVM作為數(shù)據(jù)綁定的入口,整合Observer蝌数、Compile和Watcher三者愕掏,通過(guò)Observer來(lái)監(jiān)聽(tīng)自己的model數(shù)據(jù)變化,通過(guò)Compile來(lái)解析編譯模板指令顶伞,最終利用Watcher搭起Observer和Compile之間的通信橋梁饵撑,達(dá)到數(shù)據(jù)變化 -> 視圖更新;視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果唆貌。

ps:16題答案同樣適合”vue data是怎么實(shí)現(xiàn)的滑潘?”此面試題

17锨咙、請(qǐng)?jiān)敿?xì)說(shuō)下你對(duì)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)依然存在

18、請(qǐng)說(shuō)下封裝?vue?組件的過(guò)程丑慎?

答:首先喜喂,組件可以提升整個(gè)項(xiàng)目的開(kāi)發(fā)效率。能夠把頁(yè)面抽象成多個(gè)相對(duì)獨(dú)立的模塊竿裂,解決了我們傳統(tǒng)項(xiàng)目開(kāi)發(fā):效率低夜惭、難維護(hù)復(fù)用性等問(wèn)題铛绰。

然后诈茧,使用Vue.extend方法創(chuàng)建一個(gè)組件,然后使用Vue.component方法注冊(cè)組件捂掰。子組件需要數(shù)據(jù)敢会,可以在props中接受定義。而子組件修改好數(shù)據(jù)后这嚣,想把數(shù)據(jù)傳遞給父組件鸥昏。可以采用emit方法姐帚。

19吏垮、你是怎么認(rèn)識(shí)vuex的?

答:vuex可以理解為一種開(kāi)發(fā)模式或框架。比如PHP有thinkphp,java有spring等渺贤。

通過(guò)狀態(tài)(數(shù)據(jù)源)集中管理驅(qū)動(dòng)組件的變化(好比spring的IOC容器對(duì)bean進(jìn)行集中管理)。

應(yīng)用級(jí)的狀態(tài)集中放在store中遗嗽; 改變狀態(tài)的方式是提交mutations,這是個(gè)同步的事物鼓蜒; 異步邏輯應(yīng)該封裝在action中痹换。

20征字、vue-loader是什么?使用它的用途有哪些娇豫?

答:解析.vue文件的一個(gè)加載器匙姜,跟template/js/style轉(zhuǎn)換成js模塊。

用途:js可以寫es6冯痢、style樣式可以scss或less氮昧、template可以加jade等

21、請(qǐng)說(shuō)出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法系羞?

答:assets文件夾是放靜態(tài)資源;components是放組件霸琴;router是定義路由相關(guān)的配置;view視圖椒振;app.vue是一個(gè)應(yīng)用主組件;main.js是入口文件

22梧乘、vue.cli中怎樣使用自定義的組件澎迎?有遇到過(guò)哪些問(wèn)題嗎?

答:第一步:在components目錄新建你的組件文件(smithButton.vue)选调,script一定要export default {

第二步:在需要用的頁(yè)面(組件)中導(dǎo)入:import smithButton from ‘../components/smithButton.vue’

第三步:注入到vue的子組件的components屬性上面,components:{smithButton}

第四步:在template視圖view中使用夹供,?

問(wèn)題有:smithButton命名,使用的時(shí)候則smith-button仁堪。

23哮洽、聊聊你對(duì)Vue.js的template編譯的理解?

答:簡(jiǎn)而言之弦聂,就是先轉(zhuǎn)化成AST樹(shù)鸟辅,再得到的render函數(shù)返回VNode(Vue的虛擬DOM節(jié)點(diǎn))

詳情步驟:

首先,通過(guò)compile編譯器把template編譯成AST語(yǔ)法樹(shù)(abstract syntax tree 即 源代碼的抽象語(yǔ)法結(jié)構(gòu)的樹(shù)狀表現(xiàn)形式)莺葫,compile是createCompiler的返回值匪凉,createCompiler是用以創(chuàng)建編譯器的。另外compile還負(fù)責(zé)合并option捺檬。

然后再层,AST會(huì)經(jīng)過(guò)generate(將AST語(yǔ)法樹(shù)轉(zhuǎn)化成render funtion字符串的過(guò)程)得到render函數(shù),render的返回值是VNode堡纬,VNode是Vue的虛擬DOM節(jié)點(diǎn)聂受,里面有(標(biāo)簽名、子節(jié)點(diǎn)烤镐、文本等等)

24:css消除inline-block間隙饺饭;加上這個(gè)標(biāo)簽

.fontsize0{

font-size: 0;

-webkit-text-size-adjust:none;

}

25:但是某些對(duì)象還是和其他對(duì)象不太一樣。為了區(qū)分對(duì)象的類型职车,我們用typeof操作符獲取對(duì)象的類型瘫俊,它總是返回一個(gè)字符串:


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末鹊杖,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子扛芽,更是在濱河造成了極大的恐慌骂蓖,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,941評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件川尖,死亡現(xiàn)場(chǎng)離奇詭異登下,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)叮喳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門被芳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人馍悟,你說(shuō)我怎么就攤上這事畔濒。” “怎么了锣咒?”我有些...
    開(kāi)封第一講書人閱讀 165,345評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵侵状,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我毅整,道長(zhǎng)趣兄,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 58,851評(píng)論 1 295
  • 正文 為了忘掉前任悼嫉,我火速辦了婚禮艇潭,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘戏蔑。我一直安慰自己暴区,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布辛臊。 她就那樣靜靜地躺著仙粱,像睡著了一般。 火紅的嫁衣襯著肌膚如雪彻舰。 梳的紋絲不亂的頭發(fā)上伐割,一...
    開(kāi)封第一講書人閱讀 51,688評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音刃唤,去河邊找鬼隔心。 笑死,一個(gè)胖子當(dāng)著我的面吹牛尚胞,可吹牛的內(nèi)容都是我干的硬霍。 我是一名探鬼主播,決...
    沈念sama閱讀 40,414評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼唯卖,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼粱玲!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起拜轨,我...
    開(kāi)封第一講書人閱讀 39,319評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤抽减,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后橄碾,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體卵沉,經(jīng)...
    沈念sama閱讀 45,775評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年法牲,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了史汗。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,096評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡拒垃,死狀恐怖停撞,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情恶复,我是刑警寧澤怜森,帶...
    沈念sama閱讀 35,789評(píng)論 5 346
  • 正文 年R本政府宣布速挑,位于F島的核電站谤牡,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏姥宝。R本人自食惡果不足惜翅萤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望腊满。 院中可真熱鬧套么,春花似錦、人聲如沸碳蛋。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,993評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)肃弟。三九已至玷室,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間笤受,已是汗流浹背穷缤。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,107評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留箩兽,地道東北人津肛。 一個(gè)月前我還...
    沈念sama閱讀 48,308評(píng)論 3 372
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像汗贫,于是被迫代替她去往敵國(guó)和親身坐。 傳聞我的和親對(duì)象是個(gè)殘疾皇子秸脱,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評(píng)論 2 355

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

  • 一:什么是閉包?閉包的用處掀亥? (1)閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)撞反。在本質(zhì)上,閉包就 是將函數(shù)內(nèi)部和函數(shù)外...
    xuguibin閱讀 9,617評(píng)論 1 52
  • vue是什么搪花? vue是構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的web界面的漸進(jìn)式框架遏片。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)...
    九四年的風(fēng)閱讀 8,711評(píng)論 2 131
  • 一、什么是MVVM撮竿? MVVM是一個(gè)model+view+viewModel框架吮便。MVVM是一種設(shè)計(jì)思想。Mode...
    花開(kāi)有聲是我閱讀 3,473評(píng)論 1 79
  • 1幢踏、active-class是哪個(gè)組件的屬性髓需?嵌套路由怎么定義? 答:vue-router模塊的router-li...
    強(qiáng)哥科技興閱讀 6,547評(píng)論 0 6
  • 此題涉及的知識(shí)點(diǎn)眾多房蝉,包括變量定義提升僚匆、this指針指向、運(yùn)算符優(yōu)先級(jí)搭幻、原型咧擂、繼承、全局變量污染檀蹋、對(duì)象屬性及原型屬...
    謝小逸閱讀 210評(píng)論 0 0