axios和ajax的區(qū)別
axios是通過(guò)promise實(shí)現(xiàn)對(duì)ajax技術(shù)的一種封裝
axios可以運(yùn)行nodejs里邊,ajax只能在js中使用
攔截請(qǐng)求和響應(yīng)(Interceptors攔截器)
axios可以并發(fā)請(qǐng)求
h5+css3新特性有哪些
h5的新特性:
1.增加了語(yǔ)義化內(nèi)容的元素,如header,footer,artical,section,nav
2.增加了用于繪畫(huà)的canvas元素以及svg元素等
3.增加了用于多媒體的video和audio元素
4.增加了localstorage和secssionStorage
5.HTML5擁有更有效的服務(wù)器推送技術(shù),Server-Sent Event和WebSockets就是其中的兩個(gè)特性,這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶(hù)端的功能
CSS3的新特性:
1.新增屬性選擇器,偽元素選擇器
2.新增邊框圓角,邊框陰影,文字陰影,2d,3d轉(zhuǎn)換,漸變,動(dòng)畫(huà)等效果
LocalStorage,SessionStorage,Cookie的區(qū)別以及使用的場(chǎng)景
儲(chǔ)存方式 | 儲(chǔ)存大小 | 清除 | 使用場(chǎng)景 |
---|---|---|---|
cookie | 4K左右 | 可以設(shè)置失效時(shí)間 | 判斷用戶(hù)是否登陸過(guò)網(wǎng)站,記住密碼等 |
localStorage | 5M左右 | 除非被清除或者卸載瀏覽器,否則永久保存; | 適合長(zhǎng)期保存在本地的數(shù)據(jù),比如說(shuō)夜間模式,主題模式等 |
sessionStorage | 5M左右 | 僅在當(dāng)前會(huì)話(huà)下有效,關(guān)閉頁(yè)面或?yàn)g覽器后被清除 | 網(wǎng)上商城中的購(gòu)物車(chē),ajax的數(shù)據(jù)緩存 |
axios的二次封裝
- 接口放在一起,統(tǒng)一處理
- 配置開(kāi)發(fā)和生產(chǎn)環(huán)境地址
- 通過(guò)請(qǐng)求和響應(yīng)攔截器,對(duì)請(qǐng)求頭進(jìn)行設(shè)置,添加token等字段,添加中英文設(shè)置
- 全局loading處理
- 請(qǐng)求超時(shí)的時(shí)候發(fā)送多次請(qǐng)求,限制快速點(diǎn)擊,中斷請(qǐng)求等等
- 根據(jù)后端狀態(tài)碼,添加錯(cuò)誤處理提示,因?yàn)檫@個(gè)是國(guó)際化的,所以我們當(dāng)時(shí)是封裝了一個(gè)模塊去處理
websocket
websocket--http協(xié)議的一個(gè)補(bǔ)丁,支持長(zhǎng)久連接。http協(xié)議的服務(wù)器被動(dòng)性,只有服務(wù)器不斷發(fā)送請(qǐng)求,服務(wù)器才會(huì)返回response;而websocket協(xié)議的服務(wù)器具有主動(dòng)性,只要客服端發(fā)起一次請(qǐng)求,就會(huì)一直連接,而服務(wù)器只要有response就可以主動(dòng)給返回。
缺點(diǎn):網(wǎng)絡(luò)通信問(wèn)題,若是中間網(wǎng)絡(luò)信號(hào)等問(wèn)題,互動(dòng)通信的信息沒(méi)有抵達(dá)接受方,由于是長(zhǎng)連接,所以無(wú)法判斷是否數(shù)據(jù)丟失。
call,apply,bind的區(qū)別
- 都是用來(lái)改變函數(shù)的this對(duì)象的指向的;
- 第一個(gè)參數(shù)都是this要指向的對(duì)象;
- 都可以利用后續(xù)參數(shù)傳參,apply的第二個(gè)參數(shù)是一個(gè)參數(shù)數(shù)組,call的第二個(gè)及其以后的參數(shù)都是數(shù)組里面的元素,就是說(shuō)要全部列舉出來(lái)。
- bind是返回對(duì)應(yīng)函數(shù),便于稍后調(diào)用,apply,call是立即調(diào)用。
vue 組件通信
父-子 props
子-父 $emit $on
兄弟 vuex
路由傳參
父組件調(diào)用子組件方法
ref $refs
子組件調(diào)用父組件方法
- this.$parent
- 子組件里用$emit向父組件觸發(fā)一個(gè)事件,父組件監(jiān)聽(tīng)這個(gè)事件就行了。
- 父組件把方法傳入子組件中,在子組件里直接調(diào)用這個(gè)方法
閉包(什么是閉包?什么情況下用到閉包?有什么優(yōu)缺點(diǎn)?為什么不被垃圾回收機(jī)制回收?什么是垃圾回收機(jī)制?)
閉包就是函數(shù)內(nèi)嵌套函數(shù)
在函數(shù)中定義的變量, 被內(nèi)層函數(shù)應(yīng)用后, 不會(huì)被垃圾將回收機(jī)制回收
優(yōu)點(diǎn): 可以使用函數(shù)內(nèi)的變量, 并且不被回收 缺點(diǎn): 過(guò)多使用, 會(huì)對(duì)內(nèi)存造成壓力
因?yàn)樗麄兿嗷フ{(diào)用,所以不會(huì)被垃圾回收機(jī)制回收。
不被調(diào)用的方法或變量,就不會(huì)被垃圾回收機(jī)制回收。
跨域的解決方法
JSONP
利用src不受同源策略的限制, 可以訪問(wèn)不同源的資源
而script標(biāo)簽期望請(qǐng)求到一段JS代碼
所以利用script標(biāo)簽去請(qǐng)求不同源的后端接口
接口返回一段前端函數(shù)調(diào)用的JS代碼, 并把數(shù)據(jù)作為參數(shù)傳入 前端通過(guò)函數(shù)的處理邏輯獲取數(shù)據(jù) jsonp理論上不屬于ajax請(qǐng)求CORS
后端接口設(shè)置響應(yīng)偷, 為指定用戶(hù)或所有用戶(hù)開(kāi)發(fā)訪問(wèn)權(quán)限服務(wù)器代理
因?yàn)楹蠖嗽L問(wèn)不受同源策略的影響, 所以可以使用同源的服務(wù)器去訪問(wèn)不同源的資源 在把獲取到的資源返回給前端sorket
sorket沒(méi)有跨域問(wèn)題, 可以使用sorket進(jìn)行前后端數(shù)據(jù)交換
原型鏈
? 當(dāng)訪問(wèn)一個(gè)對(duì)象的某個(gè)屬性時(shí),會(huì)先從該函數(shù)本身屬性上找,如果沒(méi)有找到,則會(huì)在他的 _ proto _隱式屬性(即構(gòu)造函數(shù)的prototype)上去找,如果還沒(méi)有找到的話(huà),則就會(huì)再去prototyep的 _ proto _ 中去找,這樣一層一層向上查找就會(huì)形成一個(gè)鏈?zhǔn)浇Y(jié)構(gòu),就稱(chēng)之為原型鏈。
DNS是什么,解析域名的原理,過(guò)程是什么?
DNS( Domain Name System)是“域名系統(tǒng)”
DNS通過(guò)域名解析系統(tǒng)解析找到了對(duì)應(yīng)的IP地址,域
具體過(guò)程如下:
- 客戶(hù)機(jī)提出域名解析請(qǐng)求,并將該請(qǐng)求發(fā)送給本地的域名服務(wù)器.
- 當(dāng)本地的域名服務(wù)器收到請(qǐng)求后,就先查詢(xún)本地的緩存,如果有該紀(jì)錄項(xiàng),則本地的域名服務(wù)器就直接把查詢(xún)的結(jié)果返回.
- 如果本地找不到:
①用戶(hù)主機(jī)上運(yùn)行著DNS的客戶(hù)端,就是我們的PC機(jī)或者手機(jī)客戶(hù)端運(yùn)行著DNS客戶(hù)端了
②瀏覽器將接收到的url中抽取出域名字段,就是訪問(wèn)的主機(jī)名,比如http://www.baidu.com/
③DNS客戶(hù)機(jī)端向DNS服務(wù)器端發(fā)送一份查詢(xún)報(bào)文,報(bào)文中包含著要訪問(wèn)的主機(jī)名字段(中間包括一些列緩存查詢(xún)以及分布式DNS集群的工作)
④該DNS客戶(hù)機(jī)最終會(huì)收到一份回答報(bào)文,其中包含有該主機(jī)名對(duì)應(yīng)的IP地址
⑤一旦該瀏覽器收到來(lái)自DNS的IP地址,就可以向該IP地址定位的HTTP服務(wù)器發(fā)起TCP連接
介紹一下vue
mvvm , 單頁(yè)面應(yīng)用
有指令,支持雙向綁定
組件化
面向?qū)ο?br>
生命周期
vue-cli vuex vue-router
通過(guò)vue-cli搭建項(xiàng)目
路由
組件通信 props $emit $on vuex
vue ui
虛擬Dom及其作用/好處
虛擬DOM其實(shí)就是用JS來(lái)模擬DOM結(jié)構(gòu),把DOM的變化操作放在JS層來(lái)做,盡量減少對(duì)DOM的操作,然后對(duì)比前后兩次的虛擬DOM的變化,只重新渲染變化了的部分,而沒(méi)有變化的部分則不會(huì)重新渲染。
1.避免大量無(wú)謂的計(jì)算量,解決瀏覽器性能問(wèn)題
2.操作虛擬dom即js對(duì)象遠(yuǎn)快于操作真實(shí)dom
引用數(shù)據(jù)類(lèi)型和基礎(chǔ)書(shū)類(lèi)型的區(qū)別
常見(jiàn)的基本數(shù)據(jù)類(lèi)型:Number、String 、Boolean、Null和Undefined。基本數(shù)據(jù)類(lèi)型是按值訪問(wèn)的,因?yàn)榭梢灾苯硬僮鞅4嬖谧兞恐械膶?shí)際值。
引用類(lèi)型數(shù)據(jù):也就是對(duì)象類(lèi)型Object type,比如:Object 、Array 、Function 、Data等。
基本數(shù)據(jù)類(lèi)型,棧內(nèi)存保存的是值。引用數(shù)據(jù)類(lèi)型棧內(nèi)存中保存的是key,內(nèi)容放在堆內(nèi)存中。
字符串有哪些方法
lenght,indexof,search
- String.fromCodePoint()
- String.raw()
- 實(shí)例方法:codePointAt()
- 實(shí)例方法:normalize()
- 實(shí)例方法:includes(), startsWith(), endsWith()
- 實(shí)例方法:repeat()
- 實(shí)例方法:padStart(),padEnd()
- 實(shí)例方法:trimStart(),trimEnd()
- 實(shí)例方法:matchAll()
數(shù)組有哪些方法?
isArray,forEach,map,filter,reduce,every,set
- 擴(kuò)展運(yùn)算符
- Array.from()
- Array.of()
- 數(shù)組實(shí)例的 copyWithin()
- 數(shù)組實(shí)例的 find() 和 findIndex()
- 數(shù)組實(shí)例的 fill()
- 數(shù)組實(shí)例的 entries(),keys() 和 values()
- 數(shù)組實(shí)例的 includes()
- 數(shù)組實(shí)例的 flat(),flatMap()
- 數(shù)組的空位
- Array.prototype.sort() 的排序穩(wěn)定性
undefined和null區(qū)別
underfined :沒(méi)有定義
null:定義了,未賦值
jQuery獲取兄弟節(jié)點(diǎn)
$('#id').siblings() 當(dāng)前元素所有的兄弟節(jié)點(diǎn)
$('#id').prev() 當(dāng)前元素前一個(gè)兄弟節(jié)點(diǎn)
$('#id').prevAll() 當(dāng)前元素之前所有的兄弟節(jié)點(diǎn)
$('#id').next() 當(dāng)前元素之后第一個(gè)兄弟節(jié)點(diǎn)
$('#id').nextAll() 當(dāng)前元素之后所有的兄弟節(jié)點(diǎn)
link和@import的區(qū)別
兩者都是外部引用CSS的方式,但是存在一定的區(qū)別:
區(qū)別1:link是XHTML標(biāo)簽,除了加載CSS外,還可以定義RSS等其他事務(wù);@import屬于CSS范疇,只能加載CSS。
區(qū)別2:link引用CSS時(shí),在頁(yè)面載入時(shí)同時(shí)加載;@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。
區(qū)別3:link是XHTML標(biāo)簽,無(wú)兼容問(wèn)題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。
區(qū)別4:link支持使用Javascript控制DOM去改變樣式;而@import不支持。
同步,異步,延時(shí)加載
同步:一步步加載
異步:同時(shí)加載
延時(shí)加載:等到要用或者空閑時(shí)在加載
做項(xiàng)目的思路
看設(shè)計(jì)圖,選擇框架,選擇ui
搭建框架,引入ui,定制項(xiàng)目規(guī)范(公共組件,模塊,頁(yè)面放哪里,命名方式),設(shè)計(jì)公共css模塊
配置路由,axios
頁(yè)面繪制和接口(封裝公共組件,模塊)
a標(biāo)簽的優(yōu)先級(jí)
href 優(yōu)先于點(diǎn)擊事件
如何用js把一個(gè)很大的圖片壓縮
我們用的是一個(gè)叫compressor.js的插件去壓縮的,沒(méi)有自己寫(xiě),就像我們項(xiàng)目用到了上傳圖片組件,就會(huì)去壓縮圖片
如何監(jiān)聽(tīng)全局的異常,包括瀏覽器崩潰,服務(wù)器問(wèn)題等等
errorHandler
vue如何定義全局變量
- 掛載原型鏈上
- 全局變量模塊
防抖和節(jié)流
- 防抖(debounce)
所謂防抖,就是指觸發(fā)事件后在 n 秒內(nèi)函數(shù)只能執(zhí)行一次,如果在 n 秒內(nèi)又觸發(fā)了事件,則會(huì)重新計(jì)算函數(shù)執(zhí)行時(shí)間。 - 節(jié)流(throttle)
所謂節(jié)流,就是指連續(xù)觸發(fā)事件但是在 n 秒中只執(zhí)行一次函數(shù)。節(jié)流會(huì)稀釋函數(shù)的執(zhí)行頻率。
對(duì)于節(jié)流,一般有兩種方式可以實(shí)現(xiàn),分別是時(shí)間戳版和定時(shí)器版。
解釋單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定以及他們之前的區(qū)別
單向數(shù)據(jù)綁定:
是先把模板寫(xiě)好,然后把數(shù)據(jù)和模板整合一起形成html,然后把html代碼插入文檔流里面。
缺點(diǎn):Html代碼一旦生成完以后,就沒(méi)有辦法再變了,如果有新的數(shù)據(jù)來(lái)了的話(huà),只能去掉原來(lái)的HTML代碼,再重新的數(shù)據(jù)和模板一起整合到文檔流中。簡(jiǎn)單來(lái)說(shuō)就是dom操作直接改變。雙向數(shù)據(jù)綁定:
數(shù)據(jù)模型(Module)和視圖(view)之間的雙向綁定,視圖改變,數(shù)據(jù)也會(huì)改變,數(shù)據(jù)改變,視圖也會(huì)改變。
優(yōu)點(diǎn):
無(wú)需進(jìn)行和單向數(shù)據(jù)綁定的那CRUD(Create,Retrieve,Update,Delete)
操作雙向數(shù)據(jù)綁定最經(jīng)常的應(yīng)用場(chǎng)景就是表單了,這樣當(dāng)用戶(hù)在前端頁(yè)面完成輸入后,不用任何操作,我們就已經(jīng)拿到了用戶(hù)的數(shù)據(jù)存放到數(shù)據(jù)模型中了。
promise可以解決回調(diào)地獄的底層原理是什么
回調(diào)地獄是因?yàn)楫惒交卣{(diào)函數(shù)嵌套太多。
? Promise的內(nèi)部也有一個(gè) defers 隊(duì)列存放事件,而 .then 方法的作用和發(fā)布訂閱模式的on方法一樣是用來(lái)訂閱事件的,每次調(diào)用 .then 方法就會(huì)往defers隊(duì)列中放入一個(gè)事件,當(dāng)異步操作完成時(shí), resolve方法標(biāo)示前一個(gè)異步過(guò)程完成并從defers隊(duì)列中取出第一個(gè)事件執(zhí)行并返回當(dāng)前對(duì)象保證鏈?zhǔn)秸{(diào)用,以此類(lèi)推,就完成了所有異步過(guò)程的隊(duì)列執(zhí)行。
vue的生命周期
鉤子函數(shù) | 說(shuō)明 |
---|---|
beforeCreate | vue實(shí)例創(chuàng)建(newVue())之后, 初始化完成, 創(chuàng)建之前調(diào)用, 無(wú)數(shù)據(jù), 無(wú)模板, 未掛載 |
created | vue實(shí)例創(chuàng)建完成后調(diào)用, 有數(shù)據(jù), 無(wú)模板, 未掛載 |
beforeMount | vue實(shí)例掛載前調(diào)用, 有數(shù)據(jù), 有模板, 未掛載 |
mounted | vue實(shí)例掛載后調(diào)用, 有數(shù)據(jù), 有模板, 已掛載 |
beforeUpdate | 數(shù)據(jù)更新前 |
updated | 數(shù)據(jù)更新后 |
activated | keep-alive 組件激活時(shí)調(diào)用 |
deactivated | keep-alive 組件停用時(shí)調(diào)用 |
beforeDestroy | 實(shí)例銷(xiāo)毀前 |
destroyed | 實(shí)例銷(xiāo)毀后 |
errorCaptured | 當(dāng)捕獲一個(gè)來(lái)自子孫組件的錯(cuò)誤時(shí)被調(diào)用 |
深復(fù)制、淺復(fù)制
- 淺復(fù)制:
淺復(fù)制只會(huì)依次復(fù)制對(duì)象的每一個(gè)屬性,不會(huì)對(duì)這些屬性進(jìn)行遞歸復(fù)制。
只是對(duì)復(fù)制對(duì)象的引用,棧和堆的關(guān)系,像number與string,boolean,null是棧的,直接可以用。 -
深復(fù)制:
深復(fù)制需要層層遞歸,復(fù)制對(duì)象的所有屬性,包括對(duì)象屬性的屬性的屬性...
1.for循環(huán)/遍歷實(shí)現(xiàn)對(duì)象的深拷貝
2.轉(zhuǎn)換成json再轉(zhuǎn)換成對(duì)象實(shí)現(xiàn)對(duì)象的深拷貝
(json.parse(Json.strinify(arr))) -
總結(jié):
object與Array存在占中,只用一個(gè)指針來(lái)引用值,拷貝之后的對(duì)象發(fā)生變化,原對(duì)象也會(huì)變化,只有真正的深拷貝才是真正的拷貝對(duì)象。
數(shù)組去重
1.for循環(huán)
2.es6 的set方法
var arr = [1,1,2,3,5,6,8,412,112,0,0,5];
//方法一
console.log(Array.from(new Set(arr)));
//方法二
console.log([...new Set(arr)]);
數(shù)組排序
冒泡排序
選擇排序
sort排序
為什么axios在vue可以直接使用,而vuex要使用vue.use的使用場(chǎng)景
因?yàn)閍xios沒(méi)有install,開(kāi)發(fā)者在封裝axios的時(shí)候,沒(méi)有install這一步。
vue.use使用場(chǎng)景:vuex,vue-router,Mint-ui
install是默認(rèn)的方法,當(dāng)外界在use這個(gè)組件的時(shí)候就會(huì)調(diào)用本身的方法,同時(shí)傳一個(gè)vue這個(gè)類(lèi)的參數(shù)。
es6有哪些新特性?說(shuō)說(shuō)除了then跟catch,還用過(guò)哪些方法?
try..catch,try正確執(zhí)行,catch錯(cuò)誤執(zhí)行。
es6特性:
1.const,let,用于定義變量
2.箭頭函數(shù),減少代碼,函數(shù)
3.for ...of 遍歷數(shù)組
4.class,類(lèi)繼承
5.解構(gòu),減少代碼量
6.剩余展開(kāi)符,得到剩余遍歷
7.字符串模板,不用字符串拼接那么麻煩
acync await 等待一個(gè)異步方法執(zhí)行完畢,放回結(jié)果。
清除浮動(dòng)
1.clear:both
2.overflow:hidden
3.偽元素+zoom
http狀態(tài)碼
- 302:請(qǐng)求到的資源在一個(gè)不同的URL處臨時(shí)保存 處理方式: 重定向到臨時(shí)的URL
- 304: 請(qǐng)求的資源未更新 處理方式: 丟棄
- 404: 沒(méi)有找到 處理方式: 丟棄
http的 8 種請(qǐng)求方式
請(qǐng)求方式 | 說(shuō)明 |
---|---|
GET | 獲取資源, 用來(lái)請(qǐng)求已被URI識(shí)別的資源 |
POST | 傳輸實(shí)體, 向服務(wù)器傳輸數(shù)據(jù) |
HEAD | 獲得報(bào)文首部, 用于確認(rèn)URI的有效性及資源更新的日期時(shí)間等 |
PUT | 傳輸文件, 用來(lái)傳輸文件,就像FTP協(xié)議的文件上傳一樣,要求在請(qǐng)求報(bào)文的主體中包含文件內(nèi)容,然后保存在請(qǐng)求URI指定的位置 |
DELETE | 刪除文件, 服務(wù)器刪除某個(gè)資源 |
OPTIONS | 詢(xún)問(wèn)支持的方法, 查詢(xún)針對(duì)請(qǐng)求URI指定資源支持的方法 |
TRACE | 追蹤路徑, 讓W(xué)eb服務(wù)器端將之前的請(qǐng)求通信還給客戶(hù)端的方法 |
CONNECT | 要求用隧道協(xié)議連接代理, 要求在與代理服務(wù)器通信時(shí)建立隧道,實(shí)現(xiàn)用隧道協(xié)議進(jìn)行TCP通信 |
vuex有幾個(gè)屬性
Vuex有五個(gè)核心概念:state, getters, mutations, actions, modules。
- state:vuex的基本數(shù)據(jù),用來(lái)存儲(chǔ)變量
- getter:從基本數(shù)據(jù)(state)派生的數(shù)據(jù),相當(dāng)于state的計(jì)算屬性
- mutation:提交更新數(shù)據(jù)的方法,必須是同步的(如果需要異步使用action)。每個(gè) mutation 都有一個(gè)字符串的 事件類(lèi)型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。
回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方,并且它會(huì)接受 state 作為第一個(gè)參數(shù),提交載荷作為第二個(gè)參數(shù)。 - action:和mutation的功能大致相同,不同之處在于 ==》1. Action 提交的是 mutation,而不是直接變更狀態(tài)。 2. Action 可以包含任意異步操作。
- modules:模塊化vuex,可以讓每一個(gè)模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰,方便管理。
父子組件執(zhí)行的順序
- 加載渲染過(guò)程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted - 子組件更新過(guò)程
父beforeUpdate->子beforeUpdate->子updated->父updated - 父組件更新過(guò)程
父beforeUpdate->父updated - 銷(xiāo)毀過(guò)程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
你使用過(guò)的遍歷方法 (哪些可以跳出循環(huán))
for 和 for...in (使用break跳出循環(huán))
Array.every() (使用return或者return false 跳出循環(huán))
Array.some() (使用return true跳出循環(huán))
forEach 和 Array.map (不能跳出循環(huán))
$nextTick() $forceUpdate的用法
- $nextTick()
在Vue生命周期的created()鉤子函數(shù)進(jìn)行的DOM操作一定要放在Vue.$nextTick()的回調(diào)函數(shù)中
在created()鉤子函數(shù)執(zhí)行的時(shí)候DOM 其實(shí)并未進(jìn)行任何渲染,而此時(shí)進(jìn)行DOM操作無(wú)異于徒勞,所以此處一定要將DOM操作的js代碼放進(jìn)Vue.$nextTick()的回調(diào)函數(shù)中。與之對(duì)應(yīng)的就是mounted()鉤子函數(shù),因?yàn)樵撱^子函數(shù)執(zhí)行時(shí)所有的DOM掛載和渲染都已完成,此時(shí)在該鉤子函數(shù)中進(jìn)行任何DOM操作都不會(huì)有問(wèn)題 。 - $forceUpdate
迫使Vue實(shí)例重新(rander)渲染虛擬DOM,注意并不是重新加載組件。結(jié)合vue的生命周期,調(diào)用$forceUpdate后只會(huì)觸發(fā)beforeUpdate和updated這兩個(gè)鉤子函數(shù),不會(huì)觸發(fā)其他的鉤子函數(shù)。它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件,而不是所有子組件;
應(yīng)用場(chǎng)景: 當(dāng)在data里沒(méi)有顯示的聲明一個(gè)對(duì)象的屬性,而是之后給該對(duì)象添加屬性,這種情況vue是檢測(cè)不到數(shù)據(jù)變化的,可以使用$forceUpdate()
了些什么
跨站腳本漏洞xss
http://www.lxweimin.com/p/4fcb4b411a66
https://zhuanlan.zhihu.com/p/26177815
雙向數(shù)據(jù)綁定原理
vue是采用數(shù)據(jù)劫持配合發(fā)布者-訂閱者模式的方式,通過(guò)Object.definerProperty()來(lái)劫持各個(gè)屬性的setter和getter,在數(shù)據(jù)變動(dòng)時(shí),發(fā)布消息給依賴(lài)收集器,去通知觀察者,做出對(duì)應(yīng)的回調(diào)函數(shù),去更新視圖。
mvvm作為綁定的入口,整合Observer,Compile和Watcher三者,通過(guò)Observer來(lái)監(jiān)聽(tīng)model數(shù)據(jù)變化,通過(guò)Compile來(lái)解析編譯模板指令,最終利用Watcher搭起Observer,Compile之間的通信橋梁,達(dá)到數(shù)據(jù)變化=>視圖更新;視圖交互變化=>數(shù)據(jù)model變更的雙向綁定效果。
vuex的數(shù)據(jù)流向是怎么樣的
1.用戶(hù)觸發(fā)行為actions 通過(guò)this.dispach(或者可以直接commit方法)
2.通過(guò)commit Mutations中的方法 改變state中 的值
3.最后通過(guò)this.$store.state.id的方法將值映射到頁(yè)面上
vue-router的底層原理
vue-router通過(guò)hash與History interface兩種方式實(shí)現(xiàn)前端路由,更新視圖但不重新請(qǐng)求頁(yè)面”是前端路由原理的核心之一,目前在瀏覽器環(huán)境中這一功能的實(shí)現(xiàn)主要有兩種方式
1.hash ---- 利用URL中的hash(“#”)
2.利用History interface在 HTML5中新增的方法
在vue-router中,它提供mode參數(shù)來(lái)決定采用哪一種方式
- HashHistory
HashHistory真是身懷絕技,會(huì)很多東西。特別是替換路由特別厲害。還可以通過(guò)不同的方式,一個(gè)是 push ,一個(gè)是 replace . - HTML5History
History interface是瀏覽器歷史記錄棧提供的接口,通過(guò)back(), forward(), go()等方法,我們可以讀取瀏覽器歷史記錄棧的信息,進(jìn)行各種跳轉(zhuǎn)操作。
從HTML5開(kāi)始,History interface有進(jìn)一步修煉:pushState(), replaceState() 這下不僅是讀取了,還可以對(duì)瀏覽器歷史記錄棧進(jìn)行修改
axios的底層原理
promise的底層原理
webpack原理
發(fā)布訂閱模式和觀察者模式
發(fā)送ajax請(qǐng)求,瀏覽器做了什么
vue里邊對(duì)于數(shù)組的處理,有bug(數(shù)組修改了,頁(yè)面沒(méi)有修改?數(shù)組有十個(gè)數(shù)據(jù),然后讓它=0,會(huì)怎么樣?)
- 數(shù)組修改了,頁(yè)面沒(méi)有修改
1.使用forceUpdate強(qiáng)制刷新
2.使用數(shù)組方法,例如push,splice等等
3.this.$set
https://www.cnblogs.com/zigood/p/11274692.html - 數(shù)組有十個(gè)數(shù)據(jù),然后讓它=0,會(huì)怎么樣?
數(shù)組不會(huì)實(shí)時(shí)更新
vue里面有什么抽取公共方法的操作,或者說(shuō)實(shí)現(xiàn)公共方法的技術(shù)
寫(xiě)成公共方法插件
created 里面有this嗎?有dom嗎?可以操作dom嗎?
created里面有this,就是vue
沒(méi)有dom,那個(gè)時(shí)候還沒(méi)生成dom
可以操作dom,但是需要寫(xiě)在$nextTick()里邊
mounted里面有一個(gè)方法,created里面有一個(gè)方法,現(xiàn)在有三個(gè)組件要執(zhí)行這兩個(gè)方法,有什么解決方案?
mixin
keep-alive原理
深復(fù)制有什么方法,有什么bug
1.Object.assign()方法。ES6提供了Object.assign()方法用于深拷貝。(有bug)
bug:只實(shí)現(xiàn)一層深拷貝,如果里邊還有下一級(jí)對(duì)象,就不會(huì)被拷貝
2.Json.parse(Json.stringify(obj))方式
bug:只能處理簡(jiǎn)單的屬性和簡(jiǎn)單的屬性數(shù)組,構(gòu)造器信息會(huì)丟失
3.for
注意:需要用hasOwnProperty去判斷key是否存在,以防止對(duì)象中的某個(gè)key調(diào)用自己,導(dǎo)致無(wú)限循環(huán)
https://blog.csdn.net/yiyan12/article/details/79447202
對(duì)象繼承的方式有哪些
1、原型鏈繼承
2、借用構(gòu)造函數(shù)繼承
3、組合繼承(1、2)
4、原型式繼承
5、寄生式繼承
6、寄生組合式繼承