數(shù)組去重
? ? 1.利用ES6 Set去重(ES6中最常用) ...new set()
? ? 2.利用for嵌套for佃乘,然后splice去重
? ? 3.利用indexOf去重
? ? 4.利用sort()
? ? 5.利用filter
? ? 6.利用Map數(shù)據(jù)結(jié)構(gòu)去重
vuex
1.vuex是一個(gè)為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式思杯。采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)注益,以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化堡距。
2.每個(gè)模塊擁有自己的 state离唬、mutation啦桌、action准颓、getter梯刚、甚至是嵌套子模塊凉馆,從上至下進(jìn)行同樣方式的分割
3.單向數(shù)據(jù)流
數(shù)據(jù)可視化
https://www.cnblogs.com/xiyangbaixue/p/4034437.html
v-if和v-show的區(qū)別
共同點(diǎn):v-if 和 v-show 都能實(shí)現(xiàn)元素的顯示隱藏
區(qū)別:
? ? 1. v-show 只是簡(jiǎn)單的控制元素的 display 屬性,而 v-if 才是條件渲染(條件為真亡资,元素將會(huì)被渲染澜共,條件為假,元素會(huì)被銷毀)锥腻;
? ? 2.? v-show 有更高的首次渲染開銷嗦董,而 v-if 的首次渲染開銷要小的多;
? ? 3. v-if 有更高的切換開銷瘦黑,v-show 切換開銷芯└铩奇唤;
? ? 4. v-if 有配套的 v-else-if 和 v-else,而 v-show 沒有
? ? 5. v-if 可以搭配 template 使用匹摇,而 v-show 不行
基本數(shù)據(jù)類型:number咬扇,string,boolean廊勃,null懈贺,undefined,symbol等坡垫;
引用數(shù)據(jù)類型:object({}對(duì)象梭灿,數(shù)組[]),function函數(shù)等冰悠;
棧: 原始數(shù)據(jù)類型(Undefined堡妒,Null,Boolean溉卓,Number涕蚤、String)
堆: 引用數(shù)據(jù)類型(對(duì)象、數(shù)組的诵、函數(shù))
深拷貝淺拷貝
淺拷貝万栅,只是拷貝指向原來對(duì)象的地址,新舊對(duì)象共享一塊內(nèi)存西疤;
深拷貝烦粒,復(fù)制并創(chuàng)建一個(gè)一摸一樣的對(duì)象(拷貝的值是一樣的,但是內(nèi)存地址不一樣代赁,)
1.列表內(nèi)容會(huì)創(chuàng)建一個(gè)新的內(nèi)存空間扰她,
? ? 2.不共享內(nèi)存,修改新對(duì)象芭碍,舊對(duì)象保持不變
實(shí)現(xiàn)淺拷貝的方法
1.利用es6 Obect.assign()實(shí)現(xiàn)淺拷貝
var obj = {name:"lily",age:18};
var copy_obj = Object.assign({},obj)? //??{name: "lily", age: 18}
2.直接引用賦值
?var arr1 = ["a","b",1,2,3];var arr2 = arr1
3.$.extend( [deep ], target, object1 [, objectN ] )jquery實(shí)現(xiàn)淺拷貝
$.extend( [deep ], target, object1 [, objectN ] )
deep表示是否深拷貝徒役,為true為深拷貝,為false窖壕,則為淺拷貝
target?Object類型 目標(biāo)對(duì)象忧勿,其他對(duì)象的成員屬性將被附加到該對(duì)象上。
object1??objectN可選瞻讽。 Object類型 第一個(gè)以及第N個(gè)被合并的對(duì)象鸳吸。?
var obj1 = {name:"lily"};
var obj2 = {age:16};
var obj3 = {sex:male};
var objnew = $.extend(false,{},obj1,obj2,obj13)
實(shí)現(xiàn)深拷貝的方法
1.$.extend( [deep ], target, object1 [, objectN ] )jquery實(shí)現(xiàn)淺拷貝
第一個(gè)參數(shù)改為true可以實(shí)現(xiàn)深拷貝
2.遞歸實(shí)現(xiàn)深拷貝
function deepClone(obj){? ?
?let objClone = Array.isArray(obj)?[]:{};? ??
if(obj && typeof obj==="object"){? ? ? ?
?for(key in obj){? ? ? ? ? ?
?if(obj.hasOwnProperty(key)){? ? ? ? ? ? ? ? //判斷ojb子元素是否為對(duì)象,如果是速勇,遞歸復(fù)制? ? ? ? ? ? ? ? if(obj[key]&&typeof obj[key] ==="object"){? ? ? ? ? ? ? ? ? ? objClone[key] = deepClone(obj[key]);? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? //如果不是晌砾,簡(jiǎn)單復(fù)制? ? ? ? ? ? ? ? ? ? objClone[key] = obj[key];? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ??
? }??
? }? ? return objClone;}??
3.可以借用JSON對(duì)象的parse和stringify
function deepClone(obj){? ? let _obj = JSON.stringify(obj),? ? ? ? objClone = JSON.parse(_obj);? ? return objClone}
使用typeof來檢測(cè)數(shù)據(jù)類型
可以使用typeof來檢測(cè)數(shù)據(jù)類型:
“undefined”-->這個(gè)變量是未定義的(為初始化的變量和未聲明的變量的typeof操作都返回undefined)
”boolean“-->這個(gè)值是布爾值
”string“ -->這個(gè)值是字符串
”number“-->這個(gè)值是數(shù)字
”object“-->這個(gè)值為null或者obejct
”function“-->這個(gè)值是函數(shù)、
div居中
1.text-align:center
2:margin:0 auto
3:行內(nèi)元素的垂直居中把height和line-height的值設(shè)置成一樣的即可烦磁。
4:使用css3的translate水平垂直居中元素
?position:?absolute;
????top:?50%;
????left:?50%;
????transform: translate(-50%,?-50%);
5:??使用css3計(jì)算的方式居中元素calc
? position:?absolute;
????top: calc(50%?-?50px);? ?//高的一半
????left: calc(50%?-?150px);??//寬的一半
????width:?300px;
????height:?100px;
6:使用position:fixed為最佳方案养匈,因?yàn)閜osition:fixed定位是相對(duì)于整個(gè)瀏覽器頁面的哼勇。
7:flex布局
父級(jí)元素:{ display:flex;flex-direction:row;justify-content:center;align-items:center;}
子級(jí)元素:{flex:1}
lass和scss? 與 css 的區(qū)別
sass的內(nèi)聯(lián)寫法:
<style lang="sass" scoped>
? //sass樣式
</style>
less的內(nèi)聯(lián)寫法:
<style lang="less" scoped>
? //less樣式
</style>
css的內(nèi)聯(lián)寫法:
<style lang="css" scoped>
? //css樣式
</style>
less和sass引用方法
<style lang="sass" src="./index.sass"></style>
css引用方法
<style lang="css">
? ? ? @import './index.css'
</style>
? 或者
<style lang="css" src="./index.css"></style>
寫法區(qū)別
Sass 時(shí)不帶有大括號(hào)和分號(hào),
1.變量呕乎,Less-作用域
如
@color:#00c;
#header{
@color:#c00;/*red*/
border:1px solid @color;/*紅色邊框*/
}
#footer{
border:1px solid @color;/*藍(lán)色邊框*/
}
就相當(dāng)于js里面設(shè)置全局變量和局部變量的作用域
2.嵌套猴蹂,
3.運(yùn)算符,可以直接在css預(yù)處理中進(jìn)行樣式計(jì)算
body{
margin:(14px/2);
top:50px+100px;
right:100px-50px;
left:10*10;
}
4.混入(Minxin)楣嘁,
創(chuàng)建一個(gè)minxin來處理不同瀏覽器的css寫法是很簡(jiǎn)單的磅轻,節(jié)省了大量的重復(fù)工作和痛苦的代碼編輯。
Sass
@mixin border-radius($values){
-webkit-border-radius:$values;
-moz-border-radius:$values;
border-radius:$values;
}
5.繼承逐虚,
如:sass寫法
.block{
margin:10px 5px;
padding:2px;
}
p{
@extend .block;/*繼承上面聲明的.block*/
border:1px solid #fee;
}
6.顏色處理聋溜,
css預(yù)處理一般都會(huì)內(nèi)置一些顏色處理函數(shù)用來對(duì)顏色值進(jìn)行處理,如:加亮叭爱,變暗撮躁,顏色梯度等。
如sass的部分顏色處理函數(shù):
lighten($color,10%);
darken($color,10%);
實(shí)例:
$color:#89234c
h1{
background:$color;
border:3px solid darken($color,50%)
}
????Less和Sass的主要不同就是他們的實(shí)現(xiàn)方式买雾。
????Less是基于JavaScript把曼,是在客戶端處理的。
????Sass是基于Ruby的漓穿,是在服務(wù)器端處理的嗤军。
????關(guān)于變量在Less和Sass中的唯一區(qū)別就是Less用@,Sass用$晃危。
keep—alive
以Vue提供了一個(gè)內(nèi)置組件keep-alive來緩存組件內(nèi)部狀態(tài)叙赚,避免重新渲染。(在開發(fā)Vue項(xiàng)目的時(shí)候僚饭,有一部分部分組件是沒必要多次渲染的)
keep-alive屬性:
include - 字符串或正則表達(dá)式震叮。只有匹配的組件會(huì)被緩存。
exclude - 字符串或正則表達(dá)式鳍鸵。任何匹配的組件都不會(huì)被緩存苇瓣。
緩存動(dòng)態(tài)組件:
包裹動(dòng)態(tài)組件時(shí),會(huì)緩存不活動(dòng)的組件實(shí)例偿乖,而不是銷毀它們(此種方式并無太大的實(shí)用意義)
緩存路由組件:
使用keep-alive可以將所有路徑匹配到的路由組件都緩存起來击罪,包括路由組件里面的組件,keep-alive大多數(shù)使用場(chǎng)景就是這種汹想。
meta:{
? ? ? ? ? ? ? ? keepAlive:true
? ?}
緩存你想要緩存的:
使用v-if通過路由元信息判斷緩存哪些路由
生命周期鉤子:
在被keep-alive包含的組件/路由中外邓,會(huì)多出兩個(gè)生命周期的鉤子:activated 與 deactivated
activated在組件第一次渲染時(shí)會(huì)被調(diào)用撤蚊,之后在每次緩存組件被激活時(shí)調(diào)用
deactivated:組件被停用(離開路由)時(shí)調(diào)用
注意:使用了keep-alive就不會(huì)調(diào)用beforeDestroy(組件銷毀前鉤子)和destroyed(組件銷毀)古掏,因?yàn)榻M件沒被銷毀,被緩存起來了侦啸。
新增屬性:
include:匹配的 路由/組件 會(huì)被緩存
exclude:匹配的 路由/組件 不會(huì)被緩存
include和exclude支持三種方式來有條件的緩存路由:采用逗號(hào)分隔的字符串形式槽唾,正則形式丧枪,數(shù)組形式。
注:當(dāng)組件被exclude匹配庞萍,該組件將不會(huì)被緩存拧烦,不會(huì)調(diào)用activated 和 deactivated。
commponted和行watch區(qū)別
computed?是計(jì)算屬性钝计,依賴其他屬性計(jì)算值恋博,并且?computed?的值有緩存,只有當(dāng)計(jì)算值變化才會(huì)返回內(nèi)容私恬。
watch?監(jiān)聽到值的變化就會(huì)執(zhí)行回調(diào)债沮,在回調(diào)中可以進(jìn)行一些邏輯操作。
所以一般來說需要依賴別的屬性來動(dòng)態(tài)獲得值的時(shí)候可以使用?computed本鸣,對(duì)于監(jiān)聽到值的變化需要做一些復(fù)雜業(yè)務(wù)邏輯的情況可以使用?watch疫衩。computed計(jì)算屬性,用于對(duì)原數(shù)據(jù)進(jìn)行修改
computed: {
? ? newPrice () {
? ? ? ? return '¥' + this.price + '元';
? ? }
}
TCP三次握手建立連接
1 . 第一次握手
客戶端發(fā)送帶有SYN標(biāo)志的連接請(qǐng)求報(bào)文段荣德,然后客戶端就進(jìn)入了SYN_SEND狀態(tài) 等待服務(wù)器確認(rèn)
2 . 第二次握手
服務(wù)端接收到了客戶端瀏覽器發(fā)送的SYN標(biāo)志報(bào)文段后闷煤,需要發(fā)送ACK確認(rèn)報(bào)文段對(duì)這個(gè)SYN報(bào)文段進(jìn)行確認(rèn)。同時(shí)又會(huì)向客戶端發(fā)生自己的SYN請(qǐng)求信息涮瞻。服務(wù)端會(huì)將上述信息放到一個(gè)報(bào)文段(SYN+ACK報(bào)文段)中 一同發(fā)送給客戶端鲤拿。此時(shí)服務(wù)端進(jìn)入SYN_RECV階段
第三次握手
客戶端瀏覽器接收到了服務(wù)端返回的SYN+ACK報(bào)文段(請(qǐng)求+返回)后,會(huì)向服務(wù)器發(fā)送新的ACK確認(rèn)報(bào)文段署咽。該報(bào)文段發(fā)送完畢后皆愉,客戶端和服務(wù)端都進(jìn)入到了ESTABLISHED狀態(tài),此時(shí) 就完成了三次握手
實(shí)例事件
$on接收兩個(gè)參數(shù)艇抠,第一個(gè)參數(shù)是調(diào)用時(shí)的事件名稱幕庐,第二個(gè)參數(shù)是一個(gè)匿名方法
你了解插槽不?
回答:插槽就是slot家淤,是組件的一塊Hmtl模板
你了解axios嗎异剥?
Axios 是基于 promise 的 HTTP 庫,用在瀏覽器和 node.js 中絮重。就是前端最火最簡(jiǎn)單的一個(gè)http請(qǐng)求解決方案冤寿。
v-if和v-for的優(yōu)先級(jí)
v-for和v-if不應(yīng)該一起使用,必要情況下應(yīng)該替換成computed屬性青伤。
原因:v-for比v-if優(yōu)先級(jí)高督怜,如果每一次都需要遍歷整個(gè)數(shù)組,將會(huì)影響速度狠角,尤其是當(dāng)之需要渲染很小一部分的時(shí)候号杠。
防抖和節(jié)流
防抖:在事件被觸發(fā)n秒后再執(zhí)行回調(diào),如果在這n秒內(nèi)又被觸發(fā),則重新計(jì)時(shí)姨蟋。
?應(yīng)用場(chǎng)景
(1) 用戶在輸入框中連續(xù)輸入一串字符后屉凯,只會(huì)在輸入完后去執(zhí)行最后一次的查詢ajax請(qǐng)求,這樣可以有效減少請(qǐng)求次數(shù)眼溶,節(jié)約請(qǐng)求資源悠砚;
(2) window的resize、scroll事件堂飞,不斷地調(diào)整瀏覽器的窗口大小灌旧、或者滾動(dòng)時(shí)會(huì)觸發(fā)對(duì)應(yīng)事件,防抖讓其只觸發(fā)一次绰筛;流
節(jié)流:規(guī)定一個(gè)單位時(shí)間节榜,在這個(gè)單位時(shí)間內(nèi),只能有一次觸發(fā)事件的回調(diào)函數(shù)執(zhí)行别智,如果在同一個(gè)單位時(shí)間內(nèi)某事件被觸發(fā)多次宗苍,只有一次能生效。
應(yīng)用場(chǎng)景:
(1)鼠標(biāo)連續(xù)不斷地觸發(fā)某事件(如點(diǎn)擊)薄榛,只在單位時(shí)間內(nèi)只觸發(fā)一次讳窟;
(2)在頁面的無限加載場(chǎng)景下,需要用戶在滾動(dòng)頁面時(shí)敞恋,每隔一段時(shí)間發(fā)一次 ajax 請(qǐng)求丽啡,而不是在用戶停下滾動(dòng)頁面操作時(shí)才去請(qǐng)求數(shù)據(jù);
(3)監(jiān)聽滾動(dòng)事件硬猫,比如是否滑到底部自動(dòng)加載更多补箍,用throttle來判斷;
效果:
函數(shù)防抖是某一段時(shí)間內(nèi)只執(zhí)行一次啸蜜;而函數(shù)節(jié)流是間隔時(shí)間執(zhí)行坑雅,不管事件觸發(fā)有多頻繁,都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)衬横。
-- 原理:
防抖是維護(hù)一個(gè)計(jì)時(shí)器裹粤,規(guī)定在delay時(shí)間后觸發(fā)函數(shù),但是在delay時(shí)間內(nèi)再次觸發(fā)的話蜂林,都會(huì)清除當(dāng)前的?timer?然后重新設(shè)置超時(shí)調(diào)用遥诉,即重新計(jì)時(shí)。這樣一來噪叙,只有最后一次操作能被觸發(fā)矮锈。
節(jié)流是通過判斷是否到達(dá)一定時(shí)間來觸發(fā)函數(shù),若沒到規(guī)定時(shí)間則使用計(jì)時(shí)器延后睁蕾,而下一次事件則會(huì)重新設(shè)定計(jì)時(shí)器苞笨。、
vue傳參方式
1:父?jìng)髯?/p>
父? ?v-bind:fData="data1"?
字:?props: ['fData', 'fMessage'],
2:子傳父
子:在子組件中創(chuàng)建一個(gè)按鈕,定義一個(gè)點(diǎn)擊事件猫缭,點(diǎn)擊事件里用this.$emit方法觸發(fā)一個(gè)自定義事件葱弟,并傳遞一個(gè)參數(shù)
觸發(fā)一個(gè)方法? ?調(diào)用? this.$emit("toFatherData","給爸爸的愛")
父:在父組件中的子標(biāo)簽中監(jiān)聽該自定義事件并添加一個(gè)響應(yīng)該事件的處理方法壹店,將接收到的值賦給data中的sendSonMessage
<Son :toSonData="toSonData" @toFatherData="sendSonData"></Son>
sendSonData(data){ this.sendSonMessage=data; }
Vue更改了data里的數(shù)據(jù)猜丹,但是視圖卻沒有更新
1、v-for遍歷的數(shù)組硅卢,當(dāng)數(shù)組內(nèi)容使用的是arr[0].xx =xx更改數(shù)據(jù)射窒,vue無法監(jiān)測(cè)到
數(shù)組數(shù)據(jù)變動(dòng):我們使用某些方法操作數(shù)組,變動(dòng)數(shù)據(jù)時(shí)将塑,有些方法無法被vue監(jiān)測(cè)脉顿,有些可以
Vue包裝了數(shù)個(gè)數(shù)組操作函數(shù),使用這些方法操作的數(shù)組去点寥,其數(shù)據(jù)變動(dòng)時(shí)會(huì)被vue監(jiān)測(cè):
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
vue2.0還增加個(gè)方法可以觀測(cè)Vue.set(items, indexOfItem, newValue)
filter(), concat(), slice() 艾疟。這些不會(huì)改變?cè)紨?shù)組,但總是返回一個(gè)新數(shù)組敢辩。當(dāng)使用非變異方法時(shí)蔽莱,可以用新數(shù)組替換舊數(shù)組
Vue 不能檢測(cè)以下變動(dòng)的數(shù)組:
① 當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí),vm.items[indexOfItem] = newValue
② 當(dāng)你修改數(shù)組的長度時(shí)戚长,例如: vm.items.length = newLength
map filter foreach區(qū)別
1.forEach循環(huán)盗冷,循環(huán)數(shù)組中每一個(gè)元素并采取操作, 沒有返回值同廉, 可以不用知道數(shù)組長度
2.map函數(shù)仪糖,遍歷數(shù)組每個(gè)元素,并回調(diào)操作迫肖,需要返回值锅劝,返回值組成新的數(shù)組,原數(shù)組不變
3.filter函數(shù)蟆湖, 過濾通過條件的元素組成一個(gè)新數(shù)組鸠天, 原數(shù)組不變
4.some函數(shù),遍歷數(shù)組中是否有符合條件的元素帐姻,返回Boolean值
5:every函數(shù)稠集, 遍歷數(shù)組中是否每個(gè)元素都符合條件, 返回Boolean值
js數(shù)組轉(zhuǎn)字符串(3種方法)
1:?toString()
2:?toLocalString()?
3:?join()?
vara=[1,2,3,4,5];//定義數(shù)組
vars=a.join("==");//指定分隔符
console.log(s);//返回字符串“1==2==3==4==5”
js字符串轉(zhuǎn)數(shù)組
1: split()?方法把字符串轉(zhuǎn)換為數(shù)組饥瓷。
split()?方法是 String?對(duì)象方法剥纷,與?join()?方法操作正好相反。該方法可以指定兩個(gè)參數(shù)
第 1?個(gè)參數(shù)為分隔符呢铆,指定從哪兒進(jìn)行分隔的標(biāo)記晦鞋;第 2?個(gè)參數(shù)指定要返回?cái)?shù)組的長度
vars="1==2== 3==4 ==5";
vara=s.split("==");
console.log(a);
console.log(a.constructor==Array);