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è)字符串: