博客園整理了一下录别,有好的面試題歡迎大家發(fā)在評論區(qū)喲
1. 閉包
2. 數(shù)組去重
3. 原型和原型鏈
4. call,apply,bind三者的區(qū)別污朽?
5. 請介紹常見的 HTTP 狀態(tài)碼(至少五個(gè))
6. 深淺拷貝
7. 實(shí)現(xiàn)(5).add(3).minus(2)輸出6
8. null和undefined區(qū)別
9. MVC和MVVC?
10. Vue生命周期
11. Vue數(shù)據(jù)雙向綁定原理
12. Vue組件傳參
13. 說說各瀏覽器存在的兼容問題
14. router和route
15. active-class屬于Vue哪一個(gè)modules,有什么作用
16. v-if和v-show
17. computed和watch有什么區(qū)別
18.Vue 組件中 data 為什么必須是函數(shù)
19. vue中子組件調(diào)用父組件的方法
20. vue中 keep-alive 組件的作用
21. vue中如何編寫可復(fù)用的組件铆农?
22. Vue 如何去除url中的 #
23. Vue 中 key 的作用
24. Vue 中怎么自定義指令
25. Vue 中怎么自定義過濾器
26. NextTick 是做什么的
27. Vue 組件 data 為什么必須是函數(shù)
28. 計(jì)算屬性computed 和事件 methods 有什么區(qū)別
29. scoped(死夠撲的)
30. vue如何獲取dom?
31. promise
32. vue常用指令有哪些
33.vue-loader是什么?使用和用途嫁怀?
34.css樣式局部化锅铅,如何讓css只在當(dāng)前組件起作用?scss和stytus樣式穿透
1. 閉包
閉包指有權(quán)訪問另一個(gè)函數(shù)中變量的函數(shù)刃唐,
MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
B站視頻:https://www.bilibili.com/video/BV1YJ411R7ap?from=search&seid=18157596230752413126
2. 數(shù)組去重
http://www.reibang.com/p/9c3547450a52
3. 原型和原型鏈
https://search.bilibili.com/all?keyword=%E5%8E%9F%E5%9E%8B%E9%93%BE%20%E9%BB%91%E9%A9%AC
4. call,apply,bind三者的區(qū)別羞迷?
都是用來改變this指向的
call和apply都是function原型上的方法界轩,每一個(gè)函數(shù)作為function的實(shí)例都可以調(diào)用這兩個(gè)方法,而這兩個(gè)方法都是用來改變this指向的
一般情況下this指向其調(diào)用者()
call
fun.call(thisArg,arg1,ary2,...)
主要作用可以實(shí)現(xiàn)繼承
調(diào)用函數(shù)衔瓮,改變this指向
var o={
name:'kangkang'
}浊猾;
function fn(a,b){
console.log(this); //不寫call則指向window
console.log(a+b); //3
}
fn.call(o,1,2);
繼承
function father(uname,age,sex){
this.uname = uname;
this.age = age;
this.sex = sex;
}
function Son(uname,age,sex){
father.call(this,uname,age,sex)热鞍;
}
var son=new Son('張學(xué)友'葫慎,18,‘男’)薇宠;
console.log(son)偷办;
apply
fun.apply(thisArg,[argsArray])
- thisArg:在fun函數(shù)運(yùn)行時(shí)指定的this值
- argsArray:傳遞的值,必須包含在數(shù)組里面
- 返回值就是函數(shù)的返回值澄港,因?yàn)樗褪钦{(diào)用函數(shù)
var o={
name:'kangkang'
}椒涯;
function fn(arr){
console.log(this);
console.log(arr);
}
fn.apply(o); //后面參數(shù)可省略
fn.apply(o,['pink']);
作用:調(diào)用函數(shù)慢睡,改變函數(shù)內(nèi)部this指向
參數(shù)必須是數(shù)組
apply主要應(yīng)用于借助數(shù)學(xué)對象等
var arr = [1,66,3,17];
var max = Math.max.apply(Math,arr);
var min = Math.min.apply(Math,arr);
console.log(max,min);
bind
bind()方法不會(huì)調(diào)用函數(shù)逐工,但可以改變函數(shù)內(nèi)部this指向
fun.bind(thisArg,arg1,arg2,...)
thisArg:在fun函數(shù)運(yùn)行時(shí)指定的this值
arg1,arg2:傳遞的其他參數(shù)
返回由指定的this值和初始化參數(shù)改造的原函數(shù)拷貝
var o = {
name:'andy'
};
function fn(a,b){
console.log(this);
console.log(a+b);
};
var f = fn.bind(o漂辐,1泪喊,2);
f(); //產(chǎn)生了一個(gè)新函數(shù)
call的性能要比apply好一些,尤其當(dāng)傳遞參數(shù)超過3個(gè)髓涯,后期開發(fā)可多用call
let arr = [1,2,3];
obj = {};
function fn(a,b,c){
fn.apply(obj,arr); //a=[1,2,3] b=c=undefined
fn.call(obj,...arr);//基于ES6的展開運(yùn)算符袒啼,可以將數(shù)組中的每一項(xiàng)依次傳遞給函數(shù)
fn.call(obj,arr);
}
時(shí)間測試
console.time('A')
...
...
console.timeEnd('a')
5. 請介紹常見的 HTTP 狀態(tài)碼(至少五個(gè))
狀態(tài)碼是由 3 位數(shù)組成,第一個(gè)數(shù)字定義了響應(yīng)的類別纬纪,且有五種可能取值:
1xx:指示信息–表示請求已接收蚓再,繼續(xù)處理。
100 客戶必須繼續(xù)發(fā)出請求
101 客戶要求服務(wù)器根據(jù)請求轉(zhuǎn)換HTTP協(xié)議版本
2xx:成功–表示請求已被成功接收包各、理解摘仅、接受。
200 (成功) 服務(wù)器已成功處理了請求问畅。 通常娃属,這表示服務(wù)器提供了請求的網(wǎng)頁。
201 (已創(chuàng)建) 請求成功并且服務(wù)器創(chuàng)建了新的資源护姆。
202 (已接受) 服務(wù)器已接受請求矾端,但尚未處理。
3xx:重定向–要完成請求必須進(jìn)行更進(jìn)一步的操作卵皂。
300 (多種選擇) 針對請求秩铆,服務(wù)器可執(zhí)行多種操作。 服務(wù)器可根據(jù)請求者 (user agent) 選擇一項(xiàng)操作灯变,或提供操作列表供請求者選擇殴玛。
301 (永久移動(dòng)) 請求的網(wǎng)頁已永久移動(dòng)到新位置捅膘。 服務(wù)器返回此響應(yīng)(對 GET 或 HEAD 請求的響應(yīng))時(shí),會(huì)自動(dòng)將請求者轉(zhuǎn)到新位置族阅。
302 (臨時(shí)移動(dòng)) 服務(wù)器目前從不同位置的網(wǎng)頁響應(yīng)請求篓跛,但請求者應(yīng)繼續(xù)使用原有位置來進(jìn)行以后的請求。
4xx:客戶端錯(cuò)誤–請求有語法錯(cuò)誤或請求無法實(shí)現(xiàn)坦刀。
400 (錯(cuò)誤請求) 服務(wù)器不理解請求的語法愧沟。
401 (未授權(quán)) 請求要求身份驗(yàn)證。 對于需要登錄的網(wǎng)頁鲤遥,服務(wù)器可能返回此響應(yīng)沐寺。
403 (禁止) 服務(wù)器拒絕請求。
5xx:服務(wù)器端錯(cuò)誤–服務(wù)器未能實(shí)現(xiàn)合法的請求盖奈。
500 (服務(wù)器內(nèi)部錯(cuò)誤) 服務(wù)器遇到錯(cuò)誤混坞,無法完成請求。
501 (尚未實(shí)施) 服務(wù)器不具備完成請求的功能钢坦。 例如究孕,服務(wù)器無法識別請求方法時(shí)可能會(huì)返回此代碼。
502 (錯(cuò)誤網(wǎng)關(guān)) 服務(wù)器作為網(wǎng)關(guān)或代理爹凹,從上游服務(wù)器收到無效響應(yīng)厨诸。
503 (服務(wù)不可用) 服務(wù)器目前無法使用(由于超載或停機(jī)維護(hù))。 通常禾酱,這只是暫時(shí)狀態(tài)微酬。
504 (網(wǎng)關(guān)超時(shí)) 服務(wù)器作為網(wǎng)關(guān)或代理,但是沒有及時(shí)從上游服務(wù)器收到請求颤陶。
505 (HTTP 版本不受支持) 服務(wù)器不支持請求中所用的 HTTP 協(xié)議版本颗管。
6. 深淺拷貝
7. 實(shí)現(xiàn)(5).add(3).minus(2)輸出6
~function(){
//==>每一個(gè)方法執(zhí)行完,都要返回number這個(gè)類的實(shí)例滓走,這樣才可以繼續(xù)調(diào)取number類原型中的方法(鏈?zhǔn)綄懛ǎ? function check(n){
n = Number(n);
return isNaN(n)?0 : n;
}
function add(n){
n=check(n);
return this+n;
}
function minus(n){
n=check(n);
return this-n;
}
Number.prototype.add=add;
Number.prototype.minus=minus;
}
8. null和undefined區(qū)別
阮一峰:http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html
9.MVC和MVVC?
MVC是后端中的概念
- M (Model) 是指數(shù)據(jù)庫中的數(shù)據(jù)
- V (View)
- C (Controller)
MVVC中是前端概念
- M (Model) 是data里數(shù)據(jù)(通過ajax等獲取的數(shù)據(jù))
- V (View) 是html結(jié)構(gòu)
- VM (ViewModel)是new vue 中 new出來的對象就是VM,是V-M的調(diào)度者垦江,提供了數(shù)據(jù)的雙向綁定
最終實(shí)現(xiàn)V和M數(shù)據(jù)的同步,因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯搅方,不需要手動(dòng)操作Dom疫粥,mvvm是vue的核心
10. Vue生命周期
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
- errorCaptured
11、 Vue數(shù)據(jù)雙向綁定原理
12腰懂、Vue組件傳參
- 父子組件傳參(props,$emit项秉,$refs)
- 非父子組件傳參(bus事件總線)
- 多級組件傳參($attrs绣溜,$listeners)
https://blog.csdn.net/weixin_41535944/article/details/107327938?%3E
13、說說各瀏覽器存在的兼容問題
14娄蔼、router和route
-
router是VueRouter的一個(gè)對象怖喻,通過Vue.use(VueRouter)和VueRouter構(gòu)造函數(shù)得到一個(gè)router的實(shí)例對象底哗,這個(gè)對象中是一個(gè)全局的對象,他包含了所有的路由包含了許多關(guān)鍵的對象和屬性锚沸。
舉例:history對象
$router.push({path:'home'});本質(zhì)是向history棧中添加一個(gè)路由跋选,在我們看來是 切換路由,但本質(zhì)是在添加一個(gè)history記錄
方法:
$router.replace({path:'home'});//替換路由哗蜈,沒有歷史記錄 route是一個(gè)跳轉(zhuǎn)的路由對象前标,每一個(gè)路由都會(huì)有一個(gè)route對象,是一個(gè)局部的對象距潘,可以獲取對應(yīng)的name,path,params,query等
這兩個(gè)不同的結(jié)構(gòu)可以看出兩者的區(qū)別炼列,他們的一些屬性是不同的。
- $route.path
字符串音比,等于當(dāng)前路由對象的路徑俭尖,會(huì)被解析為絕對路徑,如 "/home/news" - $route.params
對象洞翩,包含路由中的動(dòng)態(tài)片段和全匹配片段的鍵值對 - $route.query
對象稽犁,包含路由中查詢參數(shù)的鍵值對。例如骚亿,對于 /home/news/detail/01?favorite=yes 已亥,會(huì)得到$route.query.favorite == 'yes' - $route.router
路由規(guī)則所屬的路由器(以及其所屬的組件) - $route.matched
數(shù)組,包含當(dāng)前匹配的路徑中所包含的所有片段所對應(yīng)的配置參數(shù)對象循未。 - $route.name
當(dāng)前路徑的名字陷猫,如果沒有使用具名路徑,則名字為空的妖。
15. active-class屬于Vue哪一個(gè)modules,有什么作用
active-class 屬于vue-router的樣式方法
當(dāng)routerlink標(biāo)簽被點(diǎn)擊時(shí)將會(huì)應(yīng)用這個(gè)樣式
使用有兩種方法
routerLink標(biāo)簽內(nèi)使用
<router-link to='/' active-class="active" >首頁</router-link>
在路由js文件,配置active-class
<script>
const router = new VueRouter({
routes,
linkActiveClass: 'active'
});
</script>
<script>
const router = new VueRouter({
routes,
linkActiveClass: 'active'
});
</script>
在使用時(shí)會(huì)有一個(gè)Bug
首頁的active會(huì)一直被應(yīng)用
解決辦法
為了解決上面的問題绣檬,還需加入一個(gè)屬性exact,類似也有兩種方式:
在router-link中寫入exact
<router-link to='/' active-class="active" exact>首頁</router-link>
在路由js文件,配置active-class
<script>
const router = new VueRouter({
routes,
linkExactActiveClass: 'active'
});
</script>
還可以不用exact這種方法去解決,例如
首頁
路由中加入重定向
{
path: ‘/’,
redirect: ‘/home’
}
16 . v-if和v-show
17. computed和watch有什么區(qū)別
computed
computed是計(jì)算屬性嫂粟,也就是計(jì)算值娇未,它更多用于計(jì)算值的場景
computed具有緩存性,computed的值在getter執(zhí)行后是會(huì)緩存的星虹,只有在它依賴的屬性值改變之后零抬,下一次獲取computed的值時(shí)重新調(diào)用對應(yīng)的getter來計(jì)算
computed適用于計(jì)算比較消耗性能的計(jì)算場景
watch
watch更多的是[觀察]的作用,類似于某些數(shù)據(jù)的監(jiān)聽回調(diào)宽涌,用于觀察props $emit或者本組件的值平夜,當(dāng)數(shù)據(jù)變化時(shí)來執(zhí)行回調(diào)進(jìn)行后續(xù)操作
無緩存性,頁面重新渲染時(shí)值不變化也會(huì)執(zhí)行
小結(jié)
當(dāng)我們要進(jìn)行數(shù)值計(jì)算卸亮,而且依賴于其他數(shù)據(jù)忽妒,那么把這個(gè)數(shù)據(jù)設(shè)計(jì)為computed
如果你需要在某個(gè)數(shù)據(jù)變化時(shí)做一些事情,使用watch來觀察這個(gè)數(shù)據(jù)變化。
18.Vue 組件中 data 為什么必須是函數(shù)
vue組件中data值不能為對象段直,因?yàn)閷ο笫且妙愋统越ΓM件可能會(huì)被多個(gè)實(shí)例同時(shí)引用。
如果data值為對象鸯檬,將導(dǎo)致多個(gè)實(shí)例共享一個(gè)對象决侈,其中一個(gè)組件改變data屬性值,其它實(shí)例也會(huì)受到影響喧务。
19.vue中子組件調(diào)用父組件的方法
第一種方法是直接在子組件中通過this.emit向父組件觸發(fā)一個(gè)事件赖歌,父組件監(jiān)聽這個(gè)事件就行了。
第三種都可以實(shí)現(xiàn)子組件調(diào)用父組件的方法蹂楣,
<template>
<div>
<button @click="childMethod()">點(diǎn)擊</button>
</div>
</template>
<script>
export default {
props: {
fatherMethod: {
type: Function,
default: null
}
},
methods: {
childMethod() {
if (this.fatherMethod) {
this.fatherMethod();
}
}
}
};
</script>
20.vue中 keep-alive 組件的作用
keep-alive 是 Vue 內(nèi)置的一個(gè)組件俏站,可以使被包含的組件保留狀態(tài),或避免重新渲染痊土。
<keep-alive>
<component>
<!-- 該組件將被緩存肄扎! -->
</component>
</keep-alive>
如果只想 router-view 里面某個(gè)組件被緩存
export default [
{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被緩存
}
}, {
path: '/:id',
name: 'edit',
component: Edit,
meta: {
keepAlive: false // 不需要被緩存
}
}
]
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 這里是會(huì)被緩存的視圖組件,比如 Home赁酝! -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 這里是不被緩存的視圖組件犯祠,比如 Edit! -->
</router-view>
21.vue中如何編寫可復(fù)用的組件酌呆?
①創(chuàng)建組件頁面eg Toast.vue衡载;
②用Vue.extend()擴(kuò)展一個(gè)組件構(gòu)造器,再通過實(shí)例化組件構(gòu)造器,就可創(chuàng)造出可復(fù)用的組件
③將toast組件掛載到新創(chuàng)建的div上;
④把toast組件的dom添加到body里隙袁;
⑤修改優(yōu)化達(dá)到動(dòng)態(tài)控制頁面顯示文字跟顯示時(shí)間痰娱;
import Vue from 'vue';
import Toast from '@/components/Toast'; //引入組件
let ToastConstructor = Vue.extend(Toast) // 返回一個(gè)“擴(kuò)展實(shí)例構(gòu)造器”
let myToast = (text,duration)=>{
let toastDom = new ToastConstructor({
el:document.createElement('div') //將toast組件掛載到新創(chuàng)建的div上
})
document.body.appendChild( toastDom.$el ) //把toast組件的dom添加到body里
toastDom.text = text;
toastDom.duration = duration;
// 在指定 duration 之后讓 toast消失
setTimeout(()=>{
toastDom.isShow = false;
}, toastDom.duration);
}
export default myToast;
22. Vue 如何去除url中的
vue-router 默認(rèn)使用 hash 模式,所以在路由加載的時(shí)候菩收,項(xiàng)目中的 url 會(huì)自帶 #梨睁。如果不想使用 #, 可以使用 vue-router 的另一種模式 history
new Router({
mode: 'history',
routes: [ ]
})
需要注意的是娜饵,當(dāng)我們啟用 history 模式的時(shí)候坡贺,由于我們的項(xiàng)目是一個(gè)單頁面應(yīng)用,所以在路由跳轉(zhuǎn)的時(shí)候箱舞,就會(huì)出現(xiàn)訪問不到靜態(tài)資源而出現(xiàn) 404 的情況遍坟,這時(shí)候就需要服務(wù)端增加一個(gè)覆蓋所有情況的候選資源:如果 URL 匹配不到任何靜態(tài)資源,則應(yīng)該返回同一個(gè) index.html 頁面
23. Vue 中 key 的作用
key
的特殊屬性主要用在Vue
的虛擬DOM
算法晴股,在新舊nodes
對比時(shí)辨識VNodes
愿伴。如果不使用key
,Vue
會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類型元素的算法电湘。使用key
公般,它會(huì)基于key
的變化重新排列元素順序万搔,并且會(huì)移除key
不存在的元素。有相同父元素的子元素必須有獨(dú)特的key
官帘。重復(fù)的key
會(huì)造成渲染錯(cuò)誤
具體參考 官方API
24. Vue 中怎么自定義指令
全局注冊
// 注冊一個(gè)全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部注冊
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
參考 官方文檔-自定義指令
25. Vue 中怎么自定義過濾器
可以用全局方法
Vue.filter()
注冊一個(gè)自定義過濾器,它接收兩個(gè)參數(shù):過濾器ID
和過濾器函數(shù)昧谊。過濾器函數(shù)以值為參數(shù)刽虹,返回轉(zhuǎn)換后的值
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>
過濾器也同樣接受全局注冊和局部注冊
26. NextTick 是做什么的
$nextTick
是在下次DOM
更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào),在修改數(shù)據(jù)之后使用$nextTick
呢诬,則可以在回調(diào)中獲取更新后的DOM
具體可參考官方文檔 深入響應(yīng)式原理
27. Vue 組件 data 為什么必須是函數(shù)
因?yàn)閖s本身的特性帶來的涌哲,如果
data
是一個(gè)對象,那么由于對象本身屬于引用類型尚镰,當(dāng)我們修改其中的一個(gè)屬性時(shí)阀圾,會(huì)影響到所有Vue實(shí)例的數(shù)據(jù)。如果將data
作為一個(gè)函數(shù)返回一個(gè)對象狗唉,那么每一個(gè)實(shí)例的data
屬性都是獨(dú)立的初烘,不會(huì)相互影響了
28. 計(jì)算屬性computed 和事件 methods 有什么區(qū)別
我們可以將同一函數(shù)定義為一個(gè) method
或者一個(gè)計(jì)算屬性。對于最終的結(jié)果分俯,兩種方式是相同的
不同點(diǎn):
computed: 計(jì)算屬性是基于它們的依賴進(jìn)行緩存的,只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值對于
method
肾筐,只要發(fā)生重新渲染,method
調(diào)用總會(huì)執(zhí)行該函數(shù)
29. scoped(死背死特)
<style scoped></style>
讓css只在當(dāng)前組件中起作用
30.vue如何獲取dom?
答:ref="domName" 用法:this.$refs.domName