為什么會形成跨域？
不是一個源的文件操作另一個源的文件就會形成跨域。當(dāng)請求端的協(xié)議、域名、端口號和服務(wù)器的協(xié)議、域名、端口號有一個不一致就會發(fā)生跨域。
解決方法：安裝插件
Pip install django-cors-headersvuex的工作流程？
① 在vue組件里面，通過dispatch來出發(fā)actions提交修改數(shù)據(jù)的操作。
② 然后再通過actions的commit來出發(fā)mutations來修改數(shù)據(jù)。
③ mutations接收到commit的請求，就會自動通過Mutate來修改state（數(shù)據(jù)中心里面的數(shù)據(jù)狀態(tài)）里面的數(shù)據(jù)。
④ 最后由store觸發(fā)每一個調(diào)用它的組件更新。vuex是什么？怎么使用？
vuex是一個專為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。
使用:store,getters,mutations,actions,modules
詳細使用寫法請見：https://blog.csdn.net/qq_33226029/article/details/109628600?spm=1001.2014.3001.5502vuex中的數(shù)據(jù)在頁面刷新后數(shù)據(jù)消失怎么解決？
使用sessionStorage或localStorage存儲數(shù)據(jù);
也可以引入vuex-persist插件在vue中，如何阻止事件冒泡和默認行為？
在綁定事件時，在指令后邊加上修飾符.stop來阻止冒泡，.prevent來阻止默認行為深拷貝與淺拷貝？
假設(shè)B復(fù)制A，修改A的時候，看B是否變化：
B變了是淺拷貝（修改堆內(nèi)存中的同一個值），沒變是深拷貝（修改堆內(nèi)存中不同的值）。
淺拷貝只是增加了一個指針指向已存在的內(nèi)存地址，
深拷貝是增加了一個指針并申請了一個新的內(nèi)存，使這個增加的指針指向這個新的內(nèi)存。
深拷貝和淺拷貝最根本的區(qū)別在于是否真正獲取一個對象的復(fù)制實體，而不是引用。vue的生命周期？
beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed
activeddeactived（keep-alive）組件是否激活調(diào)用-
keep-alive: 組件緩存
https://juejin.cn/post/6844903624099758094<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>router.js中:
meta: {keepAlive:true} // 需要被緩存
鉤子執(zhí)行順序：created -> mounted -> actived
include表示需要緩存的頁面；exclude表示不需要緩存的頁面。如果兩個同時設(shè)置，exclude優(yōu)先級更 改，則組件不會被緩存。
應(yīng)用場景： 用戶在某個列表頁面選擇篩選條件過濾出一份數(shù)據(jù)列表，由列表頁面進入數(shù)據(jù)詳情頁面，再返回 該列表頁，我們希望列表頁可以保留用戶的篩選狀態(tài)。 vue傳值方式？
props$emit()$on()$parent$children$listener$attr-
$on 兄弟組件傳值
var event = new Vue(); // 定義一個空的vue實例 a組件：event.$emit('data-b', this.age); b組件：event.$on('data-b', age=>{ this.age = age; })$emit分發(fā)
$on監(jiān)聽
$off取消監(jiān)聽
$once一次性監(jiān)聽一個事件
在js文件中定義一個中央事件總線Bus，并暴露出來
具體的實現(xiàn)方式：- 在utils下新建eventBus.js
// eventBus.js import Vue from 'vue'; export default new Vue();- 在需要使用的組件中引入
import Bus from '@/untils/eventBus.js'; // 方法觸發(fā) handleBus(){ Bus.$emit('tryBus'); } // 方法定義及實現(xiàn) Bus.$on('tryBus', ()=>{ console.log('點著我了'); }); // 若不是全局使用，記得清除方法 beforeDestroy(){ Bus.$off('tryBus'); }使用Bus的時候在接收Bus的組件的beforeDestroy函數(shù)中銷毀Bus，否則會一直疊加調(diào)用這個方法。
應(yīng)用場景：“退出登錄” -> ①點擊退出登錄；②修改密碼后自動退出登錄 -
組件跨級傳值
$attrsa->b->c
$listeners監(jiān)聽// a <parent :toCVal="val" @fromSon="chgVal"></parent> // b <child v-bind="$attrs" v-on="$listeners"></child> // c props:['toCVal'], this.$emit('fromSon'); vue事件修飾符有哪些？
.stop.prevent.self.once.passive.sync箭頭函數(shù)中的this？
不具有this綁定，但函數(shù)體可以使用this，這個this指向的是箭頭函數(shù)當(dāng)前所處的詞法環(huán)境中的this對象。vue中watch與computed使用及區(qū)別？
computed:
支持緩存。只有依賴數(shù)據(jù)變化才會重新計算；
不支持異步，無法監(jiān)聽數(shù)據(jù)變化；
會默認走緩存，是基于響應(yīng)式依賴進行緩存的，及通過data聲明過或props數(shù)據(jù)計算得到；
屬性值為函數(shù)，默認走get方法；數(shù)據(jù)變化走set方法。
watch:
監(jiān)聽器，不支持緩存，數(shù)據(jù)變化直接出發(fā)；
支持異步；
接收兩個參數(shù)，新值與舊值；
監(jiān)聽數(shù)據(jù)必須是data中聲明過或父組件傳遞props中的數(shù)據(jù)。為什么vue組件中data必須是一個函數(shù)？
如果不是函數(shù)的話，每個組件的data都是內(nèi)存的同一個地址，一個數(shù)據(jù)改變了其他也改變了，當(dāng)他是一個函數(shù)時，每個組件實例都有自己的作用域，每個實例相互獨立，就不會互相影響。v-if 和 v-show區(qū)別？
v-if 是對標(biāo)簽的創(chuàng)建與銷毀， v-show 則僅在初始化時加載一次，v-if 開銷相對來說比v-show 大；
v-if 是惰性的；v-show 做的僅是簡單的css切換。v-text 與 v-html區(qū)別？
v-text 用于普通文本，不能解析html；
v-html 反之。v-for key的作用？
使用v-for更新渲染過的數(shù)據(jù)，它默認用“就地復(fù)用”策略。如果數(shù)據(jù)項的順序改變，vue將不是移動DOM元素來匹配數(shù)據(jù)項的改變，而是簡單地復(fù)用此處每個元素，并確保在特定索引下顯示已被渲染過的每個元素。key屬性類型只能是string或number。
key的特殊屬性主要用在虛擬DOM算法，在新舊node對比時辨識VNods。如不使用key，vue會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類型元素的算法，它會基于key的變化重新排列元素順序。Scss是什么？在vue-cli中安裝步驟？有哪幾大特性？
npm 下載loader （sass-loader,css-loader,node-sass）,在webpack中配置extends屬性（加.scss拓展） Vscode中可在擴展中下載;
特性：可以用變量，可以用混合器，可以嵌套等。vue獲取dom？
refvue初始化頁面閃動問題？
webpack、vue-router
v-cloak css:[v-cloak]:display:none什么是vue-router？
vue router 是官方路由管理器。
主要功能：路由嵌套，模塊化 基于組件路由配置，路由參數(shù)、查詢、通配符，細粒度導(dǎo)航控制，自定義的滾動條行為等。vue路由傳參，接收？
傳：this.$router.push({path:'', query(params):{}})
接：this.$router.query.xxx防抖和節(jié)流？
節(jié)流是一定時間內(nèi)執(zhí)行一次函數(shù)，多用在scroll事件上；
防抖是在一定時間內(nèi)執(zhí)行最后一次的函數(shù)，多用在input輸入操作，表單提交等。如何讓scss只在當(dāng)前組件中起作用？
<style scoped>vue observable？
類似vuex數(shù)據(jù)共享-
解構(gòu)賦值
// 交換兩個變量的值 var val1 = 5; var val2 = 10; // 常規(guī) 創(chuàng)建臨時變量temp var temp = val1; tal1 = tal2; tal2 = temp; // 運用解構(gòu)賦值 [val1, val2] = [val2, val1]; -
路由push、replace區(qū)別
this.$router.push('home'); // 跳轉(zhuǎn)到home頁會向history添加新記錄 this.$router.replace('home'); // 一般使用replace來做404頁面，不會向history添加新記錄 -
Array.from() 用于將兩類對象轉(zhuǎn)為真正的數(shù)組
let obj=[{id:5, a:7}] Array.from(obj) -
Array.of() 用于將一組值轉(zhuǎn)換為數(shù)組
Array.of(1,2,3) // [1,2,3] -
數(shù)組實例的 find() 和 findIndex()
[1,2,-5,10].find(n => n<0) // -5 [1,5,10,15].findIndex((val, i, arr) => { return val>9 }) // 2 -
數(shù)組實例 fill()
[1,2,3].fill(7) // [7, 7, 7] ['a','b','c'].fill(7,1,2) // ["a", 7, "c"] -
數(shù)組實例 includes()
此方法返回一個布爾值，表示某個數(shù)組是否包含給定的值，與字符串的includes()類似[1,2,3].includes(2) // true [1,2,3].includes(4) // false [1,2,3].includes(3,2) // truestring.includes(searchvalue, start)
searchvalue必需，要查找的字符串。
start可選，設(shè)置從那個位置開始查找，默認為 0。 -
數(shù)組去重方法
var arr = ['1','2','3','4','4','6','2']; const newL = []; for(const o of arr) { if (newL.find(c=>c=== o)) { continue; } newL.push(o); }(1) Set
let el = new Set(arr)(2) indexOf
let el1=[]; arr.forEach(item => { if(el1.indexOf(item) === -1){ el1.push(item) } })(3) filter
let arr2 = arr.filter((x, index,self) => { return self.indexOf(x)===index; }); -
字符串?dāng)?shù)組轉(zhuǎn)為數(shù)字數(shù)組
['1','2','3'].map(Number) // [1, 2, 3] for...in 返回鍵列表
for...of 數(shù)值屬性的值列表
更詳細的解釋請見：https://blog.csdn.net/qq_33226029/article/details/111179890?spm=1001.2014.3001.5502-
閉包
常常用來「間接訪問一個變量」。換句話說，「隱藏一個變量」，JS 的函數(shù)內(nèi)部可以使用函數(shù)外部的變量。
定義在函數(shù)內(nèi)部的函數(shù);
匿名函數(shù)創(chuàng)建閉包；
將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。內(nèi)層函數(shù)可以使用外層函數(shù)的所有變量，即使外層函數(shù)已執(zhí)行完畢，閉包函數(shù)可以用來模仿作用域等。
應(yīng)用場景：setTimeOut
setTimeOut傳遞的第一個函數(shù)不能帶參數(shù)，即setTimeout(func(param),1000) function func(param){ return function(){ alert(1) } } var f = func(1) setTimeout(f,1000) 內(nèi)存泄露
內(nèi)存泄露是指你用不到（訪問不到）的變量，依然占居著內(nèi)存空間，不能被再次利用起來。-
Map類型也稱為 簡單映射
作用：保存一組鍵值對兒 用普通對象保存鍵值對兒會導(dǎo)致鍵容易與原生屬性混淆，簡單映射能做到鍵和值與對象屬性分離，從而保證對象屬性的安全存儲。var map = new Map(); map.set('name','pp'); map.set('book','js'); console.log(map.has('name')); // true console.log(map.get('name')); // "pp" map.delete('name');與簡單映射相關(guān)的是
Set類型。集合就是一組不重復(fù)的元素。集合中只有鍵，沒有與鍵關(guān)聯(lián)的值。
在集合中添加元素用add()方法，
檢查元素是否存在要使用has()方法，
刪除元素delete()方法。var set = new Set(); set.add('name'); console.log(set.has('name')); // true set.delete('name'); console.log(set.has('name')); // false 轉(zhuǎn)JSON對象 JSON.parse()
轉(zhuǎn)成字符串 JSON.stringify()-
Object.assign() 對象合并
const target = {a:1, b:2}; const source = {b:4, c:5}; const returnTarget = Object.assign(target, source); console.log(returnTarget); // {a: 1, b: 4, c: 5} Router-link: 封裝a標(biāo)簽
Router-view:視圖渲染路由-
css隔離方案
- BEM(Block Element Modifier) 約定前端前綴
- CSS-Modules 打包時生成不沖突的選擇器名
- Shawdow DOM
- css-in-js
less 和 sass有什么區(qū)別？
less：用@定義變量
scss：用$定義變量；可以判斷語句 if else 可以循環(huán) forconst 為什么能改變對象和數(shù)組？
const僅保證指針不發(fā)生改變，修改對象屬性不會改變對象的指針，所以是被允許的。
引用類型：引用地址，保存的只是要給只想實際數(shù)據(jù)的指針。
基本類型：地址固定，值就草存在變量指向的那個內(nèi)存地址。
const用來定義常量，且定義的時候必須初始化，且定義后不能改變。-
v-deep
如果不使用scoped屬性改公共組件的樣式會被污染到全局,但設(shè)置scoped屬性的話，直接覆蓋樣式會不生效。
vue組件中使用第三方組件庫，需要在這個組件中定制樣式又不想影響其他地方使用此第三方組件的樣式。
用deep選擇器，可以穿透scoped但又不會污染全局樣式。// scss /deep/會發(fā)生警告 ::v-deep.el-btn-small{} // css .a>>> .b{}
別走，還有后續(xù)吶······
本文只是我個人的知識點整理，日后還會不斷的進行補充，工作中遇到的知識點如果不及時記錄過后很有可能會被遺忘。如果小伙伴們還能想到其他vue前端面試題，歡迎在評論區(qū)留言，分享是種美德，謝謝你的貢獻。
PS：寫作不易，如要轉(zhuǎn)裁，請標(biāo)明轉(zhuǎn)載出處。
