Web前端開(kāi)發(fā)常見(jiàn)面試題總結(jié)
時(shí)間：2023-07-02 17:03:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-02 17:03:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
Web前端開(kāi)發(fā)常見(jiàn)面試題總結(jié)：簡(jiǎn)述清除浮動(dòng)的幾種方式。
請(qǐng)描述一下 cookies、sessionStorage、localtorage區(qū)別。
常見(jiàn)的HTTP的狀態(tài)碼。
css的選擇器有哪些。
css優(yōu)化、提高性能的方法有哪些？
margin和padding分別適合什么場(chǎng)景使用。
什么是閉包，為什么要使用閉包？
Ajax是什么？如何創(chuàng)建一個(gè)Ajax？
同步和異步的區(qū)別。
Vue中的v-if和v-show有什么區(qū)別？
Vue的雙向數(shù)據(jù)綁定原理是什么？
Vue的指令有哪些？
Vuex是什么？有那幾種屬性？
Vue之間的組件傳值。
路由懶加載。
get和post的區(qū)別。
v-for中key的作用是什么？
什么是路由守衛(wèi)？
vue-router的路由模式有幾種？
Vue組件中data為什么是一個(gè)函數(shù)？
Vue-loader是什么？
談?wù)勀銓?duì)vue生命周期的理解。
談?wù)勀銓?duì)keep-alive的理解。
虛擬Dom的實(shí)現(xiàn)原理。
computed和watch的區(qū)別
路由的導(dǎo)航鉤子
路由跳轉(zhuǎn)的四種方式
什么是回調(diào)函數(shù)
異步請(qǐng)求在哪個(gè)周期發(fā)起
vuex和本地存儲(chǔ)的區(qū)別
vue插槽
axios和ajax的區(qū)別
vue的src目錄詳解
vue的常用修飾符
webpack創(chuàng)建打包
1.介紹一下項(xiàng)目
2.介紹一下vueX
前端存儲(chǔ)的值，當(dāng)頁(yè)面更新的時(shí)候，刷新這個(gè)值會(huì)保留嗎？
3.vue的指令都有那些？
4.v-if和v-show的區(qū)別？
5.vue組件之間的傳值通過(guò)什么方式？
6.當(dāng)gitpor的時(shí)候，文件產(chǎn)生了沖突，如何如何拉取代碼？
7.vue封裝組件的過(guò)程？
8.vue的生命周期
9.和后端交互，Ajax請(qǐng)求一般在哪個(gè)生命周期中進(jìn)行請(qǐng)求】
10.Vuex是一個(gè)用來(lái)管理組件之間通信的插件
【讓自己介紹了一下上個(gè)項(xiàng)目；
說(shuō)一下axios和ajax的區(qū)別，有關(guān)promise同時(shí)發(fā)送兩個(gè)請(qǐng)求如何實(shí)現(xiàn)、如何從一個(gè)頁(yè)面把滾動(dòng)條的位置發(fā)送到另一個(gè)頁(yè)面；
客戶端渲染和服務(wù)器渲染；
沒(méi)耐心的朋友想領(lǐng)取更多面試題及解析答案請(qǐng)戳下方鏈接，或直接關(guān)注公粽號(hào)：程序員子木 3.盒子模型.
1、W3C標(biāo)準(zhǔn)盒子模型
2、IE盒子模型
1.說(shuō)一下你在項(xiàng)目中遇到的技術(shù)難點(diǎn)，并且是如何解決的
2.js的基本數(shù)據(jù)類型
3.如果要你自己封裝一個(gè)級(jí)聯(lián)選擇框，你會(huì)封裝哪些屬性
4.跨域問(wèn)題
1.小程序的傳參方法有哪幾種
2.你使用過(guò)哪些方法，來(lái)提高微信小程序的應(yīng)用速度
3.請(qǐng)談?wù)勑〕绦虻纳芷?br>
4.微信小程序的跳轉(zhuǎn)方式
5.你在開(kāi)發(fā)微信小程序的時(shí)候遇到的問(wèn)題
6.如何使用vuex保存自己想要的數(shù)據(jù)，刪除不需要的數(shù)據(jù)
7.除了屬性綁定和vuex，還可以使用什么方式進(jìn)行父子通信
8.cookie和localStorage的區(qū)別，以及cookie不設(shè)置時(shí)間的問(wèn)題
9.怎樣用微信小程序?qū)崿F(xiàn)H5的一些特性
10.路由的哈希模式和history模式
11.微信小程序，如何做背景圖片
12.微信小程序頁(yè)面棧的問(wèn)題
13.微信小程序關(guān)于授權(quán)的系列問(wèn)題】
1.最近項(xiàng)目介紹
2.flex布局
3.自適應(yīng)原理
4.js中數(shù)組求和了解幾種
5.watch 和 computed methods的區(qū)別
1.vue前端開(kāi)發(fā)流程
3.權(quán)限問(wèn)題（axios請(qǐng)求響應(yīng)攔截）
4.數(shù)據(jù)雙向綁定原理
5.項(xiàng)目?jī)?yōu)化】
vuex 一般在什么場(chǎng)景下使用
引進(jìn)組件的步驟
如何阻止事件冒泡
簡(jiǎn)述清除浮動(dòng)的幾種方式。
父級(jí)div定義height
結(jié)尾處加空div標(biāo)簽clear：both
父級(jí)div定義偽類：after和zoom
父級(jí)div定義overflow：hidden 超出盒子部分會(huì)被隱藏，不推薦使用
請(qǐng)描述一下 cookies、sessionStorage、localtorage區(qū)別。
cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶(即使不需要)，即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)送給服務(wù)器，僅在本地保存。Cookie數(shù)據(jù)還有路徑(path)的概念，可以限制cookie只屬于某個(gè)路徑下。
存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過(guò)4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)。sessionStorage和localStorage雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不能持久保存；localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久保存數(shù)據(jù)；cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。
作用域不同，sessionStorage不在不同的瀏覽器窗口共享，即使是同一個(gè)頁(yè)面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
常見(jiàn)的HTTP的狀態(tài)碼。
1）200-請(qǐng)求成功
2）301-資源(網(wǎng)頁(yè)等)被永久轉(zhuǎn)移到其它URL
3）400-客戶端請(qǐng)求的語(yǔ)法錯(cuò)誤，服務(wù)器無(wú)法理解
4）401-請(qǐng)求要求用戶的身份驗(yàn)證
5）404-請(qǐng)求的資源(網(wǎng)頁(yè)等)不存在
6）500-內(nèi)部服務(wù)器錯(cuò)誤
css的選擇器有哪些。
標(biāo)簽選擇器
類選擇器
Id選擇器
全局選擇器
組合選擇器
繼承選擇器
css優(yōu)化、提高性能的方法有哪些？
合并css文件
減少css嵌套，最好不要套三層以上
不要再id選擇器前面進(jìn)行嵌套
建立公共樣式類，把相同樣式提取出來(lái)作為公共類使用
巧妙運(yùn)用css的繼承機(jī)制，如果父節(jié)點(diǎn)定了，子節(jié)點(diǎn)就無(wú)需定義
拆分出公共css文件，對(duì)于比較大的項(xiàng)目我們可以將大部分頁(yè)面的公共結(jié)構(gòu)的樣式提取出來(lái)放到單獨(dú)css文件里
Gzip壓縮
margin和padding分別適合什么場(chǎng)景使用。
margin是用來(lái)隔開(kāi)元素與元素的間距；padding是用來(lái)隔開(kāi)元素與內(nèi)容的間隔
margin用來(lái)布局分開(kāi)元素，使得元素與元素之間互相不影響
padding用來(lái)布局元素與內(nèi)容之間的間隔，讓內(nèi)容與元素之間有一段空間
使用margin的場(chǎng)景：
若需要在border外側(cè)添加空白時(shí)
空白處不需要背景(色)時(shí)
使用padding的場(chǎng)景：
不要再border內(nèi)側(cè)添加空白時(shí)
空白處需要背景(色)時(shí)
什么是閉包，為什么要使用閉包？
閉包本質(zhì)上就是將函數(shù)內(nèi)部和函數(shù)外部連接起來(lái)的一座橋梁，它最大的用處有兩個(gè)，一是可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中。
閉包避免了使用全局變量，此外，閉包允許將函數(shù)與其操作的某些數(shù)據(jù)(環(huán)境)關(guān)聯(lián)起來(lái)。
Ajax是什么？如何創(chuàng)建一個(gè)Ajax？
Ajax即異步的JavaScript和xml，是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)；傳統(tǒng)的網(wǎng)頁(yè)(不適用ajax)如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁(yè)，使用ajax則不需要加載更新整個(gè)網(wǎng)頁(yè)
創(chuàng)建ajax的基本步驟：
創(chuàng)建XML httpRequest對(duì)象，即創(chuàng)建一個(gè)異步調(diào)用對(duì)象；
創(chuàng)建一個(gè)新的HTTP請(qǐng)求，并指定該HTTP請(qǐng)求的方法、URL及驗(yàn)證信息
設(shè)置相應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù)
發(fā)送HTTP請(qǐng)求
獲取異步調(diào)用返回的數(shù)據(jù)
使用JavaScript和DOM實(shí)現(xiàn)局部刷新
同步和異步的區(qū)別。
同步，就是發(fā)出一個(gè)功能調(diào)用時(shí)，在沒(méi)有得到結(jié)果之前，該調(diào)用就不返回或繼續(xù)執(zhí)行后續(xù)操作。這時(shí)程序時(shí)阻塞的，只有接收到返回的值或消息后才往下執(zhí)行其他的命令。
異步，與同步相對(duì)，當(dāng)一個(gè)異步過(guò)程調(diào)用發(fā)出后，調(diào)用者在沒(méi)有得到結(jié)果之前，就可以繼續(xù)執(zhí)行后續(xù)操作。當(dāng)這個(gè)調(diào)用完成后，一般通過(guò)狀態(tài)、通知和回調(diào)來(lái)通知調(diào)用者。
Vue中的v-if和v-show有什么區(qū)別？
共同點(diǎn)：v-if和v-show都可以動(dòng)態(tài)顯示DOM元素
v-if比v-show的優(yōu)先級(jí)更高
區(qū)別：
1.手段：
v-if是動(dòng)態(tài)的向Dom樹(shù)內(nèi)添加或者刪除DOM元素
v-show是通過(guò)設(shè)置DOM元素的display樣式屬性控制顯示和隱藏
2.編譯過(guò)程：
v-if切換有一個(gè)局部編譯/卸載的過(guò)程，切換過(guò)程中合適的銷毀和重建內(nèi)部的事件監(jiān)聽(tīng)子組件
v-show只是簡(jiǎn)單的基于css切換
3.編譯條件：
v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變?yōu)檎鏁r(shí)才開(kāi)始局部編譯
v-show是在任何條件下都被編譯，然后被緩存，而且DOM元素保留
4.性能消耗：
v-if有更高的切換消耗
v-show有更高的初始渲染消耗
5.使用場(chǎng)景：
v-if適合運(yùn)營(yíng)條件不大可能改變
v-show適合頻繁切換
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)。
首先我們需要對(duì)數(shù)據(jù)進(jìn)行劫持監(jiān)聽(tīng)，所以我們需要先設(shè)置實(shí)現(xiàn)一個(gè)監(jiān)聽(tīng)器Observer，用來(lái)劫持并監(jiān)聽(tīng)所有的屬性，一旦屬性發(fā)生變化，就通知訂閱者
然后我們需要設(shè)置一個(gè)訂閱者Watcher，用來(lái)接收屬性變化的一個(gè)通知并執(zhí)行相應(yīng)的函數(shù)，從而更新視圖
最后設(shè)置實(shí)現(xiàn)一個(gè)解析器Compile，用來(lái)可以掃描和解析每個(gè)節(jié)點(diǎn)的相關(guān)指令，然后初始化相應(yīng)的模板數(shù)據(jù)以及訂閱者。
Vue的指令有哪些？
v-model、v-bind、v-on、v-if、v-for、v-show、v-text
Vuex是什么？有那幾種屬性？
Vuex是一個(gè)專為vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式
state：vuex的基本數(shù)據(jù)，用來(lái)存儲(chǔ)變量
getter：從基本數(shù)據(jù)(state)派生的數(shù)據(jù)，相當(dāng)于store的計(jì)算屬性；getter的返回值會(huì)根據(jù)它的依賴被緩存起來(lái)，且只有當(dāng)它的以來(lái)至發(fā)生了改變才會(huì)被重新計(jì)算
mutation：提交更新數(shù)據(jù)的方法，必須是同步的(如果需要異步使用action)。每個(gè)mutation都有一個(gè)字符串的事件類型(type)和一個(gè)回調(diào)函數(shù)(handler)
action：和mutation的功能大致相同，不同之處在于1、action提交的是mutation，而不是直接變更狀態(tài)；2、action可以包含任意異步操作
modules：模塊化vuex，可以讓每一個(gè)模塊擁有自己的state、mutation、action、getters，使得結(jié)構(gòu)非常清晰，管理更為方便
Vue之間的組件傳值。
父?jìng)髯樱焊競(jìng)髯拥膶?shí)現(xiàn)方式就是通過(guò)props屬性，子組件通過(guò)props屬性接受父組件傳過(guò)來(lái)的值，而父組件傳值的時(shí)候使用v-bind將子組件中預(yù)留的變量名綁定為data里面的數(shù)據(jù)即可
子傳父：子傳父的實(shí)現(xiàn)方式就是用了this.$emit來(lái)遍歷getData時(shí)間，首先用按鈕來(lái)觸發(fā)setData事件，在setData中用this.$emit來(lái)遍歷getData事件，最后返回this.msg
非父子：vue中沒(méi)有直接子對(duì)子傳參的方法，如果一定需要子對(duì)子傳參，可以先傳到父組件，再傳到子組件(相當(dāng)于一個(gè)公共的bus文件)
路由懶加載。
懶加載即組件并非一次性全部加載，而是需要時(shí)再加載，也叫“按需加載”
當(dāng)一個(gè)vue項(xiàng)目很大的時(shí)候，對(duì)于一些“暫時(shí)”用不到的組件，我們可以不進(jìn)行加載，等到用到此組件時(shí)再加載。這樣可以優(yōu)化spa應(yīng)用首次加載白屏情況
常見(jiàn)的懶加載方式有兩種：即ES中的import和vue異步組件
沒(méi)耐心的朋友想領(lǐng)取更多面試題及解析答案請(qǐng)戳下方鏈接，或直接關(guān)注公粽號(hào)：程序員子木 未使用懶加載
使用ES中的import進(jìn)行懶加載(最常用的)
使用vue中的異步組件進(jìn)行懶加載
get和post的區(qū)別。
url可見(jiàn)性：
get參數(shù)url可見(jiàn)；posturl參數(shù)不可見(jiàn)
數(shù)據(jù)傳輸上：
get通過(guò)拼接url進(jìn)行傳遞參數(shù)；post通過(guò)body體傳遞參數(shù)
緩存性：
get請(qǐng)求可以緩存；post請(qǐng)求不可以緩存
后退頁(yè)面的反應(yīng)：
get請(qǐng)求頁(yè)面后退時(shí)不產(chǎn)生影響；post請(qǐng)求頁(yè)面后退時(shí)，會(huì)重新提交請(qǐng)求
傳輸數(shù)據(jù)的大?。?br>
Get一般傳輸數(shù)據(jù)大小不超過(guò)2k-4k；post請(qǐng)求傳輸數(shù)據(jù)的大小根據(jù)php.ini配置文件設(shè)定，也可以無(wú)限大
v-for中key的作用是什么？
Key屬性可以用來(lái)提升v-for渲染的效率。使用v-for的時(shí)候，vue需要給每個(gè)元素添加一個(gè)key屬性，這個(gè)key屬性是唯一的，可以避免數(shù)據(jù)混亂的情況出現(xiàn)，vue列表進(jìn)行渲染的時(shí)候，就不會(huì)去改變?cè)械脑睾蛿?shù)據(jù)，而是創(chuàng)建新的元素然后把新的數(shù)據(jù)渲染進(jìn)去
什么是路由守衛(wèi)？
一般用在登錄頁(yè)面后是否允許訪問(wèn)某個(gè)頁(yè)面，沒(méi)有登錄就不允許訪問(wèn)。如果用戶沒(méi)有登錄，但是直接通過(guò)url訪問(wèn)特定頁(yè)面，就需要重新導(dǎo)航登錄頁(yè)面，多數(shù)用于判斷token是否在這個(gè)需要重新導(dǎo)航的頁(yè)面，這就路由守衛(wèi)：router.beforEach()
vue-router的路由模式有幾種？
vue-router有三種路由模式：hash，history，abstract
hash：使用url hash值來(lái)做路由。支持所有瀏覽器
實(shí)現(xiàn)原理：早期的前端路由的實(shí)現(xiàn)就是基于location.hash來(lái)實(shí)現(xiàn)的，location.hash得知救贖url中的#后面的內(nèi)容
history：依賴HTML5 history PAI和服務(wù)器配置
實(shí)現(xiàn)原理：HTML5提供了history API來(lái)實(shí)現(xiàn)url的變化
abstract：支持所有JavaScript運(yùn)行環(huán)境，如Node.js服務(wù)器端，如果發(fā)現(xiàn)沒(méi)有瀏覽器的API，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式
Vue組件中data為什么是一個(gè)函數(shù)？
Object是引用數(shù)據(jù)類型，如果不用function返回，每個(gè)組件的data都是內(nèi)存的同一個(gè)地址，一個(gè)數(shù)據(jù)改變了其他也改變了；
JavaScript只有函數(shù)構(gòu)成作用域(注意理解作用域，只有函數(shù)的{}構(gòu)成作用域，對(duì)象的{}以及if(){}都不構(gòu)成作用域)，data是一個(gè)函數(shù)時(shí)，每個(gè)組件實(shí)力都有自己的作用域，每個(gè)實(shí)例相互獨(dú)立，不會(huì)互相影響
Vue-loader是什么？
基于webpack的一個(gè)loader，解析和轉(zhuǎn)換.vue文件，提取出其中的邏輯代碼script、樣式代碼style、以及HTML模板template，再分別把它們交給對(duì)應(yīng)的Loader去處理
談?wù)勀銓?duì)vue生命周期的理解。
Vue實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是生命周期。詳細(xì)來(lái)說(shuō)就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載dom、渲染—>更新—>渲染、卸載等一系列過(guò)程
beforeCreate--create—beforeMount--mounted—beforeUpdate—updated—beforeDestory--destroved
談?wù)勀銓?duì)keep-alive的理解。
Keep-alive是vue提供的一個(gè)抽象組件，用來(lái)對(duì)組件進(jìn)行緩存，從而節(jié)省性能，由于是一個(gè)抽象組件，所以在頁(yè)面渲染完畢后不會(huì)渲染成一個(gè)DOM元素
虛擬Dom的實(shí)現(xiàn)原理。
為什么要用：
直接操作DOM引發(fā)頁(yè)面重排重繪，頻繁操作會(huì)造成頻繁渲染，非常消耗性能；我們希望的是每次修改能夠只修改我們想要修改的DOM而不是重新渲染所有的DOM
1） 將DOM樹(shù)轉(zhuǎn)換成JS對(duì)象樹(shù)，產(chǎn)生第一個(gè)虛擬DOM樹(shù)（與真實(shí)DOM樹(shù)一樣）
2） 數(shù)據(jù)發(fā)生變化時(shí)（當(dāng)你有增刪操作）產(chǎn)生第二個(gè)虛擬DOM樹(shù)
3） diff算法逐層比較兩個(gè)虛擬DOM樹(shù)并標(biāo)記增刪操作（不會(huì)渲染）
4） 將標(biāo)記出來(lái)的差異（虛擬節(jié)點(diǎn)）應(yīng)用到真正的 DOM 樹(shù)，而不是將整個(gè)虛擬DOM樹(shù)覆蓋到真正的DOM樹(shù)上
computed和watch的區(qū)別
計(jì)算屬性computed：
支持緩存，只有依賴數(shù)據(jù)發(fā)生改變，才會(huì)重新進(jìn)行計(jì)算
不支持異步，當(dāng)computed內(nèi)有異步緩存操作時(shí)無(wú)效，無(wú)法監(jiān)聽(tīng)數(shù)據(jù)的變化
Computed的屬性值會(huì)默認(rèn)緩存計(jì)算屬性是基于data中聲明過(guò)或者父組件傳遞的props中的數(shù)據(jù)通過(guò)計(jì)算得到的值
監(jiān)聽(tīng)屬性watch：
不支持緩存，數(shù)據(jù)變，直接會(huì)觸發(fā)相應(yīng)的操作
Watch支持異步
監(jiān)聽(tīng)的函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是最新的值，第二個(gè)參數(shù)是輸入之前的值
當(dāng)一個(gè)屬性發(fā)生變化時(shí)，需要執(zhí)行對(duì)應(yīng)的操作
路由的導(dǎo)航鉤子
主要用來(lái)攔截導(dǎo)航，讓其完成跳轉(zhuǎn)或者取消跳轉(zhuǎn)
全局鉤子：beforeEach、afterEach(after鉤子沒(méi)有next方法，不能改變導(dǎo)航)
路由跳轉(zhuǎn)的四種方式
router-link
this.$router.push()
this.$router.replace()
this.$router.go(n) 向前或者向后跳轉(zhuǎn)n個(gè)頁(yè)面，n可為正整數(shù)或負(fù)整數(shù)
什么是回調(diào)函數(shù)
函數(shù)指針的調(diào)用，即是一個(gè)通過(guò)函數(shù)指針調(diào)用的函數(shù)
回調(diào)函數(shù)是一段可執(zhí)行的代碼段，它作為一個(gè)函數(shù)傳遞給其他的代碼，因此函數(shù)是在需要的時(shí)候方便調(diào)用這段(回調(diào)函數(shù))代碼
異步請(qǐng)求在哪個(gè)周期發(fā)起
一般在created里面就可以，如果涉及到需要頁(yè)面加載完成之后的操作的話就用mounted
Created階段的優(yōu)勢(shì)是：請(qǐng)求時(shí)間比較早，頁(yè)面loading時(shí)間相對(duì)較短
Mounted階段的優(yōu)勢(shì)是：頁(yè)面已經(jīng)渲染完成，如果想請(qǐng)求之后進(jìn)行dom操作的話，必須在mounted階段發(fā)起請(qǐng)求
vuex和本地存儲(chǔ)的區(qū)別
vuex存的是狀態(tài)，存儲(chǔ)在內(nèi)存，localstorage是瀏覽器提供的接口，讓你存的是文件，以文件的形式存儲(chǔ)在本地
vuex用于組件之間的傳值，localstorage則主要用于頁(yè)面之間的傳值
正向代理和反向代理
正向代理：
用戶發(fā)送請(qǐng)求到自己的代理服務(wù)器
自己的代理服務(wù)器發(fā)送請(qǐng)求到服務(wù)器
服務(wù)器將數(shù)據(jù)返回到自己的代理服務(wù)器
自己的代理服務(wù)器再將數(shù)據(jù)返回給用戶
反向代理：
用戶發(fā)送請(qǐng)求到服務(wù)器
反向代理服務(wù)器發(fā)送請(qǐng)求到真正的服務(wù)器
真正的服務(wù)器將數(shù)據(jù)返回給反向代理服務(wù)器
反向代理服務(wù)器再將數(shù)據(jù)的返回給用戶
vue插槽
插槽就是子組件中的提供給父組件使用的一個(gè)占位符，用<slot></slot>表示，父組件可以在這個(gè)占位符中填充任何模塊代碼，如HTML、組件等，填充的內(nèi)容會(huì)替換子組件的<slot></slot>標(biāo)簽
axios和ajax的區(qū)別
axios是通過(guò)promise實(shí)現(xiàn)對(duì)ajax技術(shù)的一種封裝，就像jquery實(shí)現(xiàn)ajax封裝一樣。
ajax技術(shù)實(shí)現(xiàn)了頁(yè)面的局部數(shù)據(jù)刷新，axios實(shí)現(xiàn)了對(duì)ajax的封裝。axios是ajax，ajax不止axios。
vue的src目錄詳解
assets：放置靜態(tài)資源
components：放置通用模塊組件
http：放置與后臺(tái)api相關(guān)的文件
pages：放置主要頁(yè)面的組件
router：放置路由設(shè)置文件，指定路由對(duì)應(yīng)的組件
store：放置vuex需要的狀態(tài)關(guān)聯(lián)文件，設(shè)置公共的state、mutations等
app.vue：入口組件，pages里的組件會(huì)被插入此組件中，此組件再插入index.html文件里，形成的單頁(yè)面應(yīng)用
main.js：入口js文件，影響全局，作用是引入全局使用的庫(kù)、公共的樣式和方法、設(shè)置路由等
vue的常用修飾符
.once 事件只觸發(fā)一次
.native 綁定在組件上 點(diǎn)擊組件觸發(fā)事件
.stop 阻止事件冒泡
.prevent 阻止默認(rèn)事件
.capture 在事件捕獲階段觸發(fā)
.self 事件只有在本身元素觸發(fā)
.lazy 使input事件變成change事件
. trim 過(guò)濾首尾空白字符
.number 規(guī)定只能輸入數(shù)字
webpack創(chuàng)建打包
創(chuàng)建：vue init webpack xxx
啟動(dòng)： npm run dev
打包：npm run build
一般如果對(duì)方提出讓介紹一下項(xiàng)目，我們就挑一個(gè)最熟悉的去回答即可 并且問(wèn)簡(jiǎn)歷上前兩個(gè)項(xiàng)目的概率會(huì)大一點(diǎn)
所以熟悉簡(jiǎn)歷 最好有方向?。?！ 以下內(nèi)容是以往客戶面試的總結(jié)萬(wàn)變不離其宗 可以結(jié)合以下總結(jié)以及自己簡(jiǎn)歷上的項(xiàng)目來(lái)復(fù)習(xí)
1.介紹一下項(xiàng)目
2.介紹一下vueX
Vuex是一個(gè)專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。
前端存儲(chǔ)的值，當(dāng)頁(yè)面更新的時(shí)候，刷新這個(gè)值會(huì)保留嗎？
1、頁(yè)面跳轉(zhuǎn)后將數(shù)據(jù)存在vuex里面
2、在當(dāng)前頁(yè)面刷新頁(yè)面得時(shí)候?qū)⒅荡娴絪essionStroage里面
3、注意：在改變vuex里面值得時(shí)候要?jiǎng)h除sessionStroage里面得數(shù)據(jù)，從新存儲(chǔ)
在vuex得Mutation里面刪除sessionStroage里面得數(shù)據(jù)；
3.vue的指令都有那些？
v-if v-for v-show v-on v-bind
4.v-if和v-show的區(qū)別？
1. v-show
不管初始的條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單的基于 CSS display: none 或者 display: block 的屬性進(jìn)行切換。
2. v-if
會(huì)根據(jù)初始的條件（data里自己的定義的數(shù)據(jù)）來(lái)進(jìn)行真正的渲染（組件真正的銷毀和重建），
如果條件為真，才會(huì)開(kāi)始渲染條件塊，如果條件為假，則不會(huì)渲染條件塊。
沒(méi)耐心的朋友想領(lǐng)取更多面試題及解析答案請(qǐng)戳下方鏈接，或直接關(guān)注公粽號(hào)：程序員子木 5.vue組件之間的傳值通過(guò)什么方式？
父?jìng)髯?br>
方法：父組件內(nèi)設(shè)置要傳的數(shù)據(jù)，在父組件中引用的子組件上綁定一個(gè)自定義屬性并把數(shù)據(jù)綁定在自定義屬性上，在子組件添加參數(shù)props接收即可。
子傳父
方法：子組件通過(guò)vue實(shí)例方法$emit進(jìn)行觸發(fā)并且可以攜帶參數(shù)，父組件監(jiān)聽(tīng)使用@（v-on）進(jìn)行監(jiān)聽(tīng)，然后進(jìn)行方法處理。
6.當(dāng)gitpor的時(shí)候，文件產(chǎn)生了沖突，如何如何拉取代碼？
7.vue封裝組件的過(guò)程？
● 首先，使用Vue.extend()創(chuàng)建一個(gè)組件
● 然后，使用Vue.component()方法注冊(cè)組件
● 接著，如果子組件需要數(shù)據(jù)，可以在props中接受定義
● 最后，子組件修改好數(shù)據(jù)之后，想把數(shù)據(jù)傳遞給父組件，可以使用emit()方法
8.vue的生命周期
從一個(gè)組件創(chuàng)建、數(shù)據(jù)初始化、掛載、更新、銷毀，這就是一個(gè)組件所謂的生命周期。
beforeCreate：實(shí)例剛在內(nèi)存中被創(chuàng)建出來(lái)，此時(shí)，還沒(méi)有初始化好 data 和 methods 屬性
created：實(shí)例已經(jīng)在內(nèi)存中創(chuàng)建OK，此時(shí) data 和 methods 已經(jīng)創(chuàng)建OK，此時(shí)還沒(méi)有開(kāi)始 編譯模板
beforeMount：此時(shí)已經(jīng)完成了模板的編譯，但是還沒(méi)有掛載到頁(yè)面中
mounted：此時(shí)，已經(jīng)將編譯好的模板，掛載到了頁(yè)面指定的容器中顯示
- 運(yùn)行期間的生命周期函數(shù)：
beforeUpdate：狀態(tài)更新之前執(zhí)行此函數(shù)， 此時(shí) data 中的狀態(tài)值是最新的，但是界面上顯示的 數(shù)據(jù)還是舊的，因?yàn)榇藭r(shí)還沒(méi)有開(kāi)始重新渲染DOM節(jié)點(diǎn)
updated：實(shí)例更新完畢之后調(diào)用此函數(shù)，此時(shí) data 中的狀態(tài)值 和 界面上顯示的數(shù)據(jù)，都已經(jīng)完成了更新，界面已經(jīng)被重新渲染好了！
- 銷毀期間的生命周期函數(shù)：
beforeDestroy：實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。
destroyed：Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。
9.和后端交互，Ajax請(qǐng)求一般在哪個(gè)生命周期中進(jìn)行請(qǐng)求】
Mounted created
10.Vuex是一個(gè)用來(lái)管理組件之間通信的插件
【讓自己介紹了一下上個(gè)項(xiàng)目；
說(shuō)一下axios和ajax的區(qū)別，有關(guān)promise同時(shí)發(fā)送兩個(gè)請(qǐng)求如何實(shí)現(xiàn)、如何從一個(gè)頁(yè)面把滾動(dòng)條的位置發(fā)送到另一個(gè)頁(yè)面；
axios是通過(guò)promise實(shí)現(xiàn)對(duì)ajax技術(shù)的一種封裝，
ajax技術(shù)實(shí)現(xiàn)了網(wǎng)頁(yè)的局部數(shù)據(jù)刷新，axios實(shí)現(xiàn)了對(duì)ajax的封裝。
說(shuō)一下經(jīng)常使用的es6的新特性，結(jié)構(gòu)賦值有使用過(guò)嗎；
promise承諾
主要解決回調(diào)地獄 ，回調(diào)函數(shù)的嵌套。
就能夠讓ajax請(qǐng)求按照我們要求的順序執(zhí)行，也能代碼不嵌套。
客戶端渲染和服務(wù)器渲染；
好像是前端如何實(shí)現(xiàn)20條進(jìn)程的問(wèn)題，我也不太明白這個(gè)問(wèn)題；
3.盒子模型.
把所有的網(wǎng)頁(yè)元素都看成一個(gè)盒子，它具有： content，padding，border，margin 四個(gè)屬性，這就是盒子模型。
盒子模型有幾種模式？
1、W3C標(biāo)準(zhǔn)盒子模型
2、IE盒子模型
1.說(shuō)一下你在項(xiàng)目中遇到的技術(shù)難點(diǎn)，并且是如何解決的
2.js的基本數(shù)據(jù)類型
1.JavaScript（以下簡(jiǎn)稱js）的數(shù)據(jù)類型分為兩種：原始類型（即基本數(shù)據(jù)類型）和對(duì)象類型（即引用數(shù)據(jù)類型）；
2.js常用的基本數(shù)據(jù)類型包括undefined、null、number、boolean、string；
3.js的引用數(shù)據(jù)類型也就是對(duì)象類型Object
3.如果要你自己封裝一個(gè)級(jí)聯(lián)選擇框，你會(huì)封裝哪些屬性
4.跨域問(wèn)題
Vue反向代理
【
1.小程序的傳參方法有哪幾種
2.你使用過(guò)哪些方法，來(lái)提高微信小程序的應(yīng)用速度
3.請(qǐng)談?wù)勑〕绦虻纳芷?br>
4.微信小程序的跳轉(zhuǎn)方式
5.你在開(kāi)發(fā)微信小程序的時(shí)候遇到的問(wèn)題
6.如何使用vuex保存自己想要的數(shù)據(jù)，刪除不需要的數(shù)據(jù)
7.除了屬性綁定和vuex，還可以使用什么方式進(jìn)行父子通信
8.cookie和localStorage的區(qū)別，以及cookie不設(shè)置時(shí)間的問(wèn)題
9.怎樣用微信小程序?qū)崿F(xiàn)H5的一些特性
10.路由的哈希模式和history模式
11.微信小程序，如何做背景圖片
12.微信小程序頁(yè)面棧的問(wèn)題
13.微信小程序關(guān)于授權(quán)的系列問(wèn)題】
【
1.最近項(xiàng)目介紹
2.flex布局
3.自適應(yīng)原理
4.js中數(shù)組求和了解幾種
5.watch 和 computed methods的區(qū)別
計(jì)算屬性：computed
computed:計(jì)算屬性是依賴的值改變會(huì)重新執(zhí)行函數(shù)，計(jì)算屬性是取返回值作為最新結(jié)果，所以里面不能異步的返回結(jié)果。不能寫(xiě)異步邏輯。
監(jiān)聽(tīng)屬性：Watch
methods是方法
computed 和 methods 相比，最大區(qū)別是 computed 有緩存：如果 computed 屬性依賴的屬性沒(méi)有變化，計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。而methods里的函數(shù)在每次調(diào)用時(shí)都要執(zhí)行。
watch 和 computed 相比，computed 是計(jì)算出一個(gè)屬性（廢話），而 watch 則可能是做別的事情（如上報(bào)數(shù)據(jù)）
1 、watch無(wú)緩存；2、watch適用于：需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷較大的操作時(shí)
【
1.vue前端開(kāi)發(fā)流程
3.權(quán)限問(wèn)題（axios請(qǐng)求響應(yīng)攔截）
4.數(shù)據(jù)雙向綁定原理
數(shù)據(jù)改變，試圖發(fā)生改變
5.項(xiàng)目?jī)?yōu)化】
一、路由懶加載
二、keep-alive緩存頁(yè)面
三、v-for 遍歷避免同時(shí)使用 v-if
四、圖片懶加載
五、第三方插件按需引入
vuex 一般在什么場(chǎng)景下使用
場(chǎng)景有：?jiǎn)雾?yè)應(yīng)用中，組件之間的狀態(tài)、音樂(lè)播放、登錄狀態(tài)、加入購(gòu)物車vuex是一種集中式狀態(tài)管理模式，它按照一定的規(guī)則管理狀態(tài)，保證狀態(tài)的變化是可預(yù)測(cè)的。
state：定義初始化狀態(tài)
getters：獲取狀態(tài)
mutations:設(shè)置狀態(tài)
actions：異步提交mutations
modules：把狀態(tài)管理模塊化，各自的組件構(gòu)成各自的模塊
引進(jìn)組件的步驟
在template中引入組件；
在script的第一行用import引入路徑；
用component中寫(xiě)上組件名稱。
vuex是怎么使用的
axios的封裝，怎么封裝
vue中的路由怎么配置
都用過(guò)element ui的哪些組件
————————————————
領(lǐng)取更多面試題及解析答案請(qǐng)戳下方鏈接，或直接關(guān)注公粽號(hào)：
程序員子木
在線咨詢