面試題

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

  1. String.fromCodePoint()
  2. String.raw()
  3. 實(shí)例方法:codePointAt()
  4. 實(shí)例方法:normalize()
  5. 實(shí)例方法:includes(), startsWith(), endsWith()
  6. 實(shí)例方法:repeat()
  7. 實(shí)例方法:padStart(),padEnd()
  8. 實(shí)例方法:trimStart(),trimEnd()
  9. 實(shí)例方法:matchAll()

數(shù)組有哪些方法?

isArray,forEach,map,filter,reduce,every,set

  1. 擴(kuò)展運(yùn)算符
  2. Array.from()
  3. Array.of()
  4. 數(shù)組實(shí)例的 copyWithin()
  5. 數(shù)組實(shí)例的 find() 和 findIndex()
  6. 數(shù)組實(shí)例的 fill()
  7. 數(shù)組實(shí)例的 entries(),keys() 和 values()
  8. 數(shù)組實(shí)例的 includes()
  9. 數(shù)組實(shí)例的 flat(),flatMap()
  10. 數(shù)組的空位
  11. 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。

  1. state:vuex的基本數(shù)據(jù),用來(lái)存儲(chǔ)變量
  2. getter:從基本數(shù)據(jù)(state)派生的數(shù)據(jù),相當(dāng)于state的計(jì)算屬性
  3. 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ù)。
  4. action:和mutation的功能大致相同,不同之處在于 ==》1. Action 提交的是 mutation,而不是直接變更狀態(tài)。 2. Action 可以包含任意異步操作。
  5. 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變更的雙向綁定效果。


image.png

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的底層原理

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、寄生組合式繼承

在vue組件里邊,css想改第三方的樣式,但是我又想加scope,應(yīng)該怎么辦?

穿透>>>
Vue中的scoped及穿透方法,改變第三方組件庫(kù)樣式

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,333評(píng)論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,491評(píng)論 3 416
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 176,263評(píng)論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 62,946評(píng)論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,708評(píng)論 6 410
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 55,186評(píng)論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,255評(píng)論 3 441
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 42,409評(píng)論 0 288
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,939評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,774評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,976評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,518評(píng)論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,209評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 34,641評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 35,872評(píng)論 1 286
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,650評(píng)論 3 391
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,958評(píng)論 2 373