整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
tml的主體結(jié)構(gòu)
標(biāo)簽的分類(lèi)
標(biāo)簽的關(guān)系
sublime快捷鍵
單標(biāo)簽
雙標(biāo)簽
路徑
超鏈接額外知識(shí)運(yùn)用
錨點(diǎn)
空連接
超鏈接的優(yōu)化寫(xiě)法 寫(xiě)在head標(biāo)簽中
特殊標(biāo)記符
列表
<!doctype html><html><head>
單標(biāo)簽
<!doctype html>
雙標(biāo)簽
<head></head>
包含（嵌套關(guān)系、父子關(guān)系）
<head>
并列
<head></head><body></body>
| 快捷鍵 | 作用 |
|---|---|
| html:xt + tab | html4.01模板【新版本可能失效】 |
| html + tab | html5模板 |
| tab | 補(bǔ)全標(biāo)簽 |
| ctrl + shift + d | 快速?gòu)?fù)制一行 |
| ctrl + shift + k | 快速刪除一行 |
| ctrl + 鼠標(biāo)左鍵單擊 | 集體輸入 |
| ctrl + h | 查找替換 |
| ctrl + f | 查找 |
| ctrl + / | 注釋 |
| ctrl + L | 快速選中當(dāng)前行 |
| ctrl + shift + ↑(↓) | 代碼的快速上移和下移 |
<!-- --> 注釋標(biāo)簽<br /> 換行標(biāo)簽<hr /> 水平線(xiàn)標(biāo)簽<img src="logo.gif" alt="logo" title="這是淘寶的logo" width="200" height="100" />圖片標(biāo)簽
<p></p> 段落標(biāo)簽<h1></h1> 標(biāo)題標(biāo)簽 h1 - h6<font></font> 文本標(biāo)簽<strong></strong> 文本加粗標(biāo)簽，有語(yǔ)音加強(qiáng)<b></b> 文本加粗標(biāo)簽<em></em> 文字傾斜，有語(yǔ)音加強(qiáng)<i></i> 文字傾斜<del></del> 刪除線(xiàn)，有語(yǔ)音加強(qiáng)<s></s> 刪除線(xiàn)<ins></ins> 下劃線(xiàn)，有語(yǔ)音加強(qiáng)<u></u> 下劃線(xiàn)<a title="百度" target="_blank">百度</a> 超鏈接
相對(duì)路徑
同一個(gè)目錄下直接寫(xiě)文件的名稱(chēng)就可以
文件和圖片在下一級(jí)目錄中，需要文件夾名稱(chēng) + \ + 文件名稱(chēng)
圖片在上一級(jí)目錄中 ../ + 文件名稱(chēng)
圖片在上一級(jí)的其它文件夾中 ../ + 文件夾名稱(chēng) + 文件名稱(chēng)
總結(jié)：找到下級(jí)目錄使用/，找到上一級(jí)目錄使用../
絕對(duì)路徑
從盤(pán)符中開(kāi)始的，這種路徑不能使用！因?yàn)轫?xiàng)目最后都要移動(dòng)，文件的路徑都是會(huì)變的。如：c:\baidu\logo.jpg
錨點(diǎn)
1.設(shè)置一個(gè)錨點(diǎn) 設(shè)置一個(gè)id
<div id="top"></div>
2.超鏈接到錨點(diǎn)
<a href="#top"></a>
空連接
<a href="#"></a>
超鏈接的優(yōu)化寫(xiě)法 寫(xiě)在head標(biāo)簽中
<base targer="_blank">
讓所有的超鏈接都是從新窗口中打開(kāi)
| 空格 | |
|---|---|
| < | < |
| > | > |
| ? | © |
更多信息請(qǐng)查閱
無(wú)序列表
<ul type="disc">
類(lèi)型：disc 默認(rèn)小黑點(diǎn) circle 空心小圓點(diǎn) square 小方塊
有序列表
<ol type="A" start="C">
類(lèi)型：a A 字母順序 i I羅馬順序 1數(shù)字 start 表示開(kāi)始的位置
自定義列表
<dl>
解析HTML，生成DOM樹(shù)，解析CSS，生成CSSOM樹(shù)
將DOM樹(shù)和CSSOM樹(shù)結(jié)合，生成渲染樹(shù)(Render Tree)
Layout(回流):根據(jù)生成的渲染樹(shù)，進(jìn)行回流(Layout)，得到節(jié)點(diǎn)的幾何信息（位置，大小）
Painting(重繪):根據(jù)渲染樹(shù)以及回流得到的幾何信息，得到節(jié)點(diǎn)的絕對(duì)像素
Display:將像素發(fā)送給GPU，展示在頁(yè)面上
表示臨時(shí)響應(yīng)并需要請(qǐng)求者繼續(xù)執(zhí)行操作的狀態(tài)代碼
表示成功處理了請(qǐng)求的狀態(tài)碼。
例：200 – 服務(wù)器成功返回網(wǎng)頁(yè)
表示要完成請(qǐng)求，需要進(jìn)一步操作。 通常，這些狀態(tài)代碼用來(lái)重定向
例：
301 （永久移動(dòng)） 請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置。 服務(wù)器返回此響應(yīng)時(shí)，會(huì)自動(dòng)將請(qǐng)求者轉(zhuǎn)到新位置。
302 （臨時(shí)移動(dòng)） 服務(wù)器目前從不同位置的網(wǎng)頁(yè)響應(yīng)請(qǐng)求，但請(qǐng)求者應(yīng)繼續(xù)使用原有位置來(lái)進(jìn)行以后的請(qǐng)求。
304 （未修改） 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁(yè)未修改過(guò)。 服務(wù)器返回此響應(yīng)時(shí)，不會(huì)返回網(wǎng)頁(yè)內(nèi)容。
例：404 – 請(qǐng)求的網(wǎng)頁(yè)不存在
這些狀態(tài)代碼表示服務(wù)器在嘗試處理請(qǐng)求時(shí)發(fā)生內(nèi)部錯(cuò)誤。 這些錯(cuò)誤可能是服務(wù)器本身的錯(cuò)誤，而不是請(qǐng)求出錯(cuò)。
例：
500 （服務(wù)器內(nèi)部錯(cuò)誤） 服務(wù)器遇到錯(cuò)誤，無(wú)法完成請(qǐng)求。
503 （服務(wù)不可用） 服務(wù)器目前無(wú)法使用（由于超載或停機(jī)維護(hù)）。 通常，這只是暫時(shí)狀態(tài)。
服務(wù)器解析 HTTP1.1 的請(qǐng)求時(shí)，必須不斷地讀入字節(jié)，直到遇到分隔符 CRLF 為止。而解析 HTTP2 的請(qǐng)求就不用這么麻煩，因?yàn)?HTTP2 是基于幀的協(xié)議，每個(gè)幀都有表示幀長(zhǎng)度的字段。
HTTP2 提供了首部壓縮功能。多請(qǐng)求請(qǐng)求時(shí)，有很多消息頭都是重復(fù)的。如果可以把相同的首部存儲(chǔ)起來(lái)，僅發(fā)送它們之間不同的部分，就可以節(jié)省不少的流量，加快請(qǐng)求的時(shí)間。
HTTP/2 在客戶(hù)端和服務(wù)器端使用“首部表”來(lái)跟蹤和存儲(chǔ)之前發(fā)送的鍵－值對(duì)，對(duì)于相同的數(shù)據(jù)，不再通過(guò)每次請(qǐng)求和響應(yīng)發(fā)送。如果服務(wù)器收到了請(qǐng)求，它會(huì)照樣創(chuàng)建一張表。 當(dāng)客戶(hù)端發(fā)送下一個(gè)請(qǐng)求的時(shí)候，如果首部相同，它可以直接發(fā)送這樣的首部塊：服務(wù)器會(huì)查找先前建立的表格，并把這些數(shù)字還原成索引對(duì)應(yīng)的完整首部。
HTTP2 可以對(duì)比較緊急的請(qǐng)求設(shè)置一個(gè)較高的優(yōu)先級(jí)，服務(wù)器在收到這樣的請(qǐng)求后，可以?xún)?yōu)先處理。
由于一個(gè) TCP 連接流量帶寬（根據(jù)客戶(hù)端到服務(wù)器的網(wǎng)絡(luò)帶寬而定）是固定的，當(dāng)有多個(gè)請(qǐng)求并發(fā)時(shí)，一個(gè)請(qǐng)求占的流量多，另一個(gè)請(qǐng)求占的流量就會(huì)少。流量控制可以對(duì)不同的流的流量進(jìn)行精確控制。
HTTP2 新增的一個(gè)強(qiáng)大的新功能，就是服務(wù)器可以對(duì)一個(gè)客戶(hù)端請(qǐng)求發(fā)送多個(gè)響應(yīng)。換句話(huà)說(shuō)，除了對(duì)最初請(qǐng)求的響應(yīng)外，服務(wù)器還可以額外向客戶(hù)端推送資源，而無(wú)需客戶(hù)端明確地請(qǐng)求。
措施：
1、驗(yàn)證 HTTP Referer 字段
2、添加token驗(yàn)證
利用的是用戶(hù)對(duì)惡意網(wǎng)站的權(quán)限，攻擊者會(huì)在用戶(hù)瀏覽某個(gè)網(wǎng)站時(shí)，通過(guò)偽裝成一個(gè)受信任的網(wǎng)站發(fā)送請(qǐng)求，CSRF 通過(guò)利用用戶(hù)的身份信息，從而讓用戶(hù)無(wú)意識(shí)地執(zhí)行惡意操作。這些操作通常是由第三方發(fā)起的，而用戶(hù)并不知情。
措施：
1、輸入過(guò)濾
2、輸出轉(zhuǎn)義
3、使用 HttpOnly Cookie
引擎優(yōu)化。是一種方式：利用搜索引擎的規(guī)則提高網(wǎng)站在有關(guān)搜索引擎內(nèi)的自然排名。
1、SSR服務(wù)器渲染
2、預(yù)渲染prerender-spa-plugin
3、的title、description、keywords
4、化的HTML代碼，符合W3C規(guī)范
5、飾性圖片必須加alt
6、外鏈
7、向各大搜索引擎提交收錄自己的站點(diǎn)
8、少用iframe：iframe中的內(nèi)容是不會(huì)被抓取到的
先創(chuàng)建XHR對(duì)象即XMLHttpRequest()
然后open準(zhǔn)備發(fā)送，open中有三個(gè)參數(shù)一是提交方式get和post,二是接口地址，三是同步和異步
第三步是用send發(fā)送
第四步再發(fā)送的過(guò)程中通過(guò)onreadystatechange來(lái)監(jiān)聽(tīng)接收的回調(diào)函數(shù)，可以通過(guò)判斷readyState＝＝4和status=＝200來(lái)判斷是否成功返回，然后通過(guò)responseText接收成功返回的數(shù)據(jù)
push,pop,unshift,shift,splice,join,concat,forEach,filter,map,sort,some,every
第一種：利用ES6的set來(lái)實(shí)現(xiàn) 例如：[...new Set(arr)]
第二種：借用臨時(shí)對(duì)象的方式
JS事件代理就是通過(guò)給父級(jí)元素（例如：ul）綁定事件，不給子級(jí)元素(例如：li)綁定事件，然后當(dāng)點(diǎn)擊子級(jí)元素時(shí)，通過(guò)事件冒泡機(jī)制在其綁定的父元素上觸發(fā)事件處理函數(shù)，主要目的是為了提升性能，因?yàn)槲也挥媒o每個(gè)子級(jí)元素綁定事件，只給父級(jí)元素綁定一次就好了,在原生js里面是通過(guò)event對(duì)象的targe屬性實(shí)現(xiàn)
構(gòu)造函數(shù)就是一個(gè)普通的函數(shù)，創(chuàng)建方式和普通函數(shù)沒(méi)有區(qū)別，不同的是構(gòu)造函數(shù)習(xí)慣上首字母大寫(xiě)。另外就是調(diào)用方式的不同，普通函數(shù)是直接調(diào)用，而構(gòu)造函數(shù)需要使用new關(guān)鍵字來(lái)調(diào)用。
每當(dāng)定義一個(gè)函數(shù)數(shù)據(jù)類(lèi)型(普通函數(shù)、類(lèi))時(shí)候，都會(huì)天生自帶一個(gè)prototype屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象，并且這個(gè)屬性是一個(gè)對(duì)象數(shù)據(jù)類(lèi)型的值。
當(dāng)我們?cè)L問(wèn)對(duì)象的一個(gè)屬性或方法時(shí)，它會(huì)先在對(duì)象自身中尋找，如果有則直接使用，如果沒(méi)有則會(huì)去原型對(duì)象中尋找，如果找到則直接使用。如果沒(méi)有則去原型的原型中尋找,直到找到Object對(duì)象的原型，Object對(duì)象的原型沒(méi)有原型，如果在Object原型中依然沒(méi)有找到，則返回undefined。
淺拷貝可以理解為改變一個(gè)對(duì)象屬性值，另一個(gè)對(duì)象屬性也會(huì)發(fā)生改變，即互相影響， 對(duì)象深拷貝即就是說(shuō)改變一個(gè)對(duì)象屬性，另一個(gè)對(duì)象屬性值不會(huì)發(fā)生改變，可以通過(guò)多種方法來(lái)實(shí)現(xiàn)對(duì)象深拷貝，
淺拷貝方法：
深拷貝方法:
核心思想：引用數(shù)據(jù)類(lèi)型是有基本數(shù)據(jù)類(lèi)型構(gòu)成的，并且，基本數(shù)據(jù)類(lèi)型是不存在深淺拷貝這一說(shuō)的，那么我們只需要將引用數(shù)據(jù)類(lèi)型的每一層次的基本數(shù)據(jù)類(lèi)型賦值，并遍歷到最深處的基本數(shù)據(jù)并賦值就可以完成深拷貝。
JS原生綁定事件主要為三種：
一是html事件處理程序
例如：點(diǎn)我
二是DOM0級(jí)事件處理程序
例如：var btn=document.getElementById(‘id元素’)
btn.onclick=function() {
//要處理的事件邏輯
}
三是DOM2級(jí)事件處理程序
例如： var btn=document.getElementById(‘id元素’)
//綁定事件
btn.addEventListener(‘click’,綁定的事件處理函數(shù)名,false)
//移除事件
btn.removeEventListener(‘click’,要移除的事件處理函數(shù)名，false)
== 用于比較兩者是否相等，忽略數(shù)據(jù)類(lèi)型。
=== 用于更嚴(yán)謹(jǐn)?shù)谋容^，值和值的數(shù)據(jù)類(lèi)型都需要同時(shí)比較。
定位方式：普通流 (normal flow)、浮動(dòng) (float)、絕對(duì)定位 (absolute positioning)
BFC 即 Block Formatting Contexts (塊級(jí)格式化上下文)：具有 BFC 特性的元素可以看作是隔離了的獨(dú)立容器，容器里面的元素不會(huì)在布局上影響到外面的元素，并且 BFC 具有普通容器所沒(méi)有的一些特性。
要元素滿(mǎn)足下面任一條件即可觸發(fā) BFC 特性：
浮動(dòng)元素：float 除 none 以外的值
絕對(duì)定位元素：position (absolute、fixed)
display 為 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC特性：
同一個(gè) BFC 下外邊距會(huì)發(fā)生折疊
BFC 可以包含浮動(dòng)的元素（清除浮動(dòng)）
BFC 可以阻止元素被浮動(dòng)元素覆蓋
清除浮動(dòng)解決的方法有很多，主要目的是讓父級(jí)元素有高度
方法一：給父級(jí)元素設(shè)置絕對(duì)定位：position:absolute
方法二：給父級(jí)元素設(shè)置overflow:hidden;
方法三：通過(guò)偽對(duì)象來(lái)實(shí)現(xiàn)
盒模型其實(shí)就是瀏覽器把一個(gè)個(gè)標(biāo)簽都看一個(gè)形象中的盒子，那每個(gè)盒子（即標(biāo)簽）都會(huì)有內(nèi)容(width,height)，邊框(border)，以及內(nèi)容和邊框中間的縫隙（即內(nèi)間距padding），還有盒子與盒子之間的外間距（即margin）
盒模型包括兩種：IE盒模型和w3c標(biāo)準(zhǔn)盒模型
IE盒模型總寬度即就是width寬度=border+padding+內(nèi)容寬度
標(biāo)準(zhǔn)盒模型總寬度＝border+padding+width
那如何在IE盒模型寬度和標(biāo)準(zhǔn)盒模型總寬度之間切換呢，可以通過(guò)box-sizing:border-box或設(shè)置成content-box來(lái)切換
其中：box-sizing：border-box //IE盒模型
box-sizing：content-box //w3c盒模型、
rem和em都是相對(duì)單位，主要參考的標(biāo)簽不同：
rem是相對(duì)于根字號(hào)，即相對(duì)于標(biāo)簽的font-size實(shí)現(xiàn)的，瀏覽器默認(rèn)字號(hào)是font-size:16px
em:是相對(duì)于父元素標(biāo)簽的字號(hào)，和百分比%類(lèi)似，%也是相對(duì)于父級(jí)的，只不過(guò)是%相對(duì)于父級(jí)寬度的，而em相對(duì)于父級(jí)字號(hào)的
百分比是相對(duì)于父元素標(biāo)簽的寬度和高度
vw和vh分別相對(duì)于屏幕寬度和屏幕高度的，1vw相當(dāng)于屏幕寬度的1%,100vw相當(dāng)于滿(mǎn)屏寬度100%,
定位：
flex布局: display: flex; justify-content: center; align-items: center;
在HTML中，每個(gè)元素都可以理解成一個(gè)盒子，在瀏覽器解析過(guò)程中，會(huì)涉及到回流與重繪：
回流：布局引擎會(huì)根據(jù)各種樣式計(jì)算每個(gè)盒子在頁(yè)面上的大小與位置
重繪：當(dāng)計(jì)算好盒模型的位置、大小及其他屬性后，瀏覽器根據(jù)每個(gè)盒子特性進(jìn)行繪制
防抖和節(jié)流都是為了解決短時(shí)間內(nèi)大量觸發(fā)某函數(shù)而導(dǎo)致的性能問(wèn)題，比如觸發(fā)頻率過(guò)高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象
防抖：在事件被觸發(fā)n秒后再執(zhí)行回調(diào)函數(shù)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。
節(jié)流：規(guī)定一個(gè)單位時(shí)間，在這個(gè)單位時(shí)間內(nèi)，只能有一次觸發(fā)事件的回調(diào)函數(shù)執(zhí)行，如果在同一個(gè)單位時(shí)間內(nèi)某事件被觸發(fā)多次，只有一次能生效。
防抖和節(jié)流的區(qū)別：
-- 效果：
函數(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à)，都會(huì)清除當(dāng)前的 timer 然后重新設(shè)置超時(shí)調(diào)用，即重新計(jì)時(shí)。這樣一來(lái)，只有最后一次操作能被觸發(fā)。
節(jié)流是通過(guò)判斷是否到達(dá)一定時(shí)間來(lái)觸發(fā)函數(shù)，若沒(méi)到規(guī)定時(shí)間則使用計(jì)時(shí)器延后，而下一次事件則會(huì)重新設(shè)定計(jì)時(shí)器。
閉包說(shuō)的通俗一點(diǎn)就是打通了一條在函數(shù)外部訪(fǎng)問(wèn)函數(shù)內(nèi)部作用域的通道。正常情況下函數(shù)外部是訪(fǎng)問(wèn)不到函數(shù)內(nèi)部作用域變量的，
表象判斷是不是閉包:函數(shù)嵌套函數(shù),內(nèi)部函數(shù)被return 內(nèi)部函數(shù)調(diào)用外層函數(shù)的局部變量
優(yōu)點(diǎn)：可以隔離作用域，不造成全局污染
缺點(diǎn)：由于閉包長(zhǎng)期駐留內(nèi)存，則長(zhǎng)期這樣會(huì)導(dǎo)致內(nèi)存泄露
如何解決內(nèi)存泄露：將暴露全外部的閉包變量置為null
適用場(chǎng)景：封裝組件，for循環(huán)和定時(shí)器結(jié)合使用,for循環(huán)和dom事件結(jié)合.可以在性能優(yōu)化的過(guò)程中,節(jié)流防抖函數(shù)的使用,導(dǎo)航欄獲取下標(biāo)的使用
基于ajax同源策略，因?yàn)榘踩目紤]，ajax不允許訪(fǎng)問(wèn)不同域名下的資源
只存在前后端訪(fǎng)問(wèn)，后端訪(fǎng)問(wèn)后端不存在跨域問(wèn)題。
產(chǎn)生跨域的情況有：不同協(xié)議，不同域名，不同端口以及域名和ip地址的訪(fǎng)問(wèn)都會(huì)產(chǎn)生跨域。
解決：
一、是jsonp
jsonp實(shí)現(xiàn)原理：主要是利用動(dòng)態(tài)創(chuàng)建script標(biāo)簽請(qǐng)求后端接口地址，然后傳遞callback參數(shù)，后端接收callback，后端經(jīng)過(guò)數(shù)據(jù)處理，返回callback函數(shù)調(diào)用的形式，callback中的參數(shù)就是json
二、 是代理（前端代理和后端代理）
前端代理我在vue中主要是通過(guò)vue腳手架中的config中的index文件來(lái)配置的，其中有個(gè)proxyTable來(lái)配置跨域的
三、是CORS
CORS全稱(chēng)叫跨域資源共享，主要是后臺(tái)工程師設(shè)置后端代碼來(lái)達(dá)到前端跨域請(qǐng)求的
vuex是一個(gè)狀態(tài)管理工具，主要解決大中型復(fù)雜項(xiàng)目的數(shù)據(jù)共享問(wèn)題，主要包括state,actions,mutations,getters和modules 5個(gè)要素，
主要流程：組件通過(guò)dispatch到 actions，actions是異步操作，再actions中通過(guò)commit到mutations，mutations再通過(guò)邏輯操作改變state，從而同步到組件，更新其數(shù)據(jù)狀態(tài)。
getters相當(dāng)于組件的計(jì)算屬性對(duì),組件中獲取到的數(shù)據(jù)做提前處理的.再說(shuō)到輔助函數(shù)的作用。
因?yàn)関uex中的state是存儲(chǔ)在內(nèi)存中的，一刷新就沒(méi)了，例如登錄狀態(tài)，常見(jiàn)解決方案有：
第一種：利用H5的本地存儲(chǔ)(localStorage,sessionStorage)
第二種：利用第三方封裝好的插件，例如：vuex-persistedstate
第三種：使用vue-cookie插件來(lái)做存儲(chǔ)
同步即sync，形象的說(shuō)就是代碼一行行執(zhí)行，前面代碼和請(qǐng)求沒(méi)有執(zhí)行完，后面的代碼和請(qǐng)求就不會(huì)被執(zhí)行
異步：即async,形象的說(shuō)就是代碼可以在當(dāng)前程序沒(méi)有執(zhí)行完，也可以執(zhí)行后面的代碼
異步解決方案主要有：
回調(diào)地獄：為了實(shí)現(xiàn)某些邏輯經(jīng)常會(huì)寫(xiě)出層層嵌套的回調(diào)函數(shù)，如果嵌套過(guò)多，會(huì)極大影響代碼可讀性和邏輯，這種情況也被成為回調(diào)地獄
promise的狀態(tài)改變一次以后就不會(huì)再改變，鏈?zhǔn)秸{(diào)用：then返回的是一個(gè)Promise對(duì)象，所以能進(jìn)行鏈?zhǔn)秸{(diào)用。
async/await其實(shí)是Promise的語(yǔ)法糖， async 會(huì)將其后的函數(shù)（函數(shù)表達(dá)式或 Lambda）的返回值封裝成一個(gè) Promise 對(duì)象，而 await 會(huì)等待這個(gè) Promise 完成，并將其 resolve 的結(jié)果返回出來(lái)。
減少前端資源數(shù)量，減小前端資源大小，減少dom操作 代碼層面：注意事件的銷(xiāo)毀、路由懶加載、提取公共代碼、css放前面、組件懶加載、減少代碼體積大小、字體圖標(biāo)代替圖片、使用事件委托、使用查找表、不覆蓋原生方法、減低css選擇器復(fù)雜度、使用flex、使用 transform 和 opacity實(shí)現(xiàn)動(dòng)畫(huà)
交互優(yōu)化：減少請(qǐng)求數(shù)量、使用 HTTP2（頭部壓縮、鏈路復(fù)用、解析快、可設(shè)置優(yōu)先級(jí)、流量控制、服務(wù)器推送）、減少重繪重排（innerHTML代替DOM操作、避免使用動(dòng)態(tài)屬性、脫離文檔流操作再合并）
加載優(yōu)化：按需引入、使用CDN、使用服務(wù)端渲染、善用緩存、避免卡頓
打包優(yōu)化：使用gzip、Webpack 對(duì)圖片進(jìn)行壓縮、webpack 按需加載代碼、提取第三庫(kù)代碼、webpack物理打包以及配置項(xiàng)打包優(yōu)化
其他優(yōu)化：圖片優(yōu)化（壓縮、懶加載、用webp格式，延遲加載、響應(yīng)式圖片）、使用工作線(xiàn)程Web Workers、少用全局變量
ES6新增特性常用的主要有：let/const,箭頭函數(shù)，模板字符串，解構(gòu)賦值，模塊的導(dǎo)入(import)和導(dǎo)出(export default/export),Promise,還有一些數(shù)組字符串的新方法,其實(shí)有很多，我平時(shí)常用的就這些。
call,apply,bind主要作用都是改變this指向的，但使用上略有區(qū)別，說(shuō)一下區(qū)別:
call和apply的主要區(qū)別是在傳遞參數(shù)上不同，call后面?zhèn)鬟f的參數(shù)是以逗號(hào)的形式分開(kāi)的，apply傳遞的參數(shù)是數(shù)組形式、Apply是以A開(kāi)頭的,所以應(yīng)該是跟Array(數(shù)組)形式的參數(shù)]
bind返回的是一個(gè)函數(shù)形式，如果要執(zhí)行，則后面要再加一個(gè)小括號(hào) 例如：bind(obj,參數(shù)1,參數(shù)2,)(),bind只能以逗號(hào)分隔形式，不能是數(shù)組形式
var：存在變量提升，后面聲明的變量會(huì)覆蓋前面的變量聲明、作用域不可控。
let:只能聲明一次，可以重復(fù)賦值，形成暫時(shí)性死區(qū)
cosnt:只能聲明一次,不能重復(fù)賦值，形成暫時(shí)性死區(qū)
Vue是單項(xiàng)數(shù)據(jù)流,數(shù)據(jù)雙向綁定
單向數(shù)據(jù)流主要是vue 組件間傳遞數(shù)據(jù)是單向的，即數(shù)據(jù)總是由父組件傳遞給子組件，子組件在其內(nèi)部維護(hù)自己的數(shù)據(jù)，但它無(wú)權(quán)修改父組件傳遞給它的數(shù)據(jù)，當(dāng)開(kāi)發(fā)者嘗試這樣做的時(shí)候，vue 將會(huì)報(bào)錯(cuò)。
單頁(yè)應(yīng)用SPA是一種網(wǎng)絡(luò)應(yīng)用程序或網(wǎng)站的模型，它通過(guò)動(dòng)態(tài)重寫(xiě)當(dāng)前頁(yè)面來(lái)與用戶(hù)交互，這種方法避免了頁(yè)面之間切換打斷用戶(hù)體驗(yàn)在單頁(yè)應(yīng)用中，所有必要的代碼（HTML、JavaScript和CSS）都通過(guò)單個(gè)頁(yè)面的加載而檢索
多頁(yè)應(yīng)用MPA（MultiPage-page application），翻譯過(guò)來(lái)就是多頁(yè)應(yīng)用在MPA中，每個(gè)頁(yè)面都是一個(gè)主頁(yè)面，都是獨(dú)立的當(dāng)我們?cè)谠L(fǎng)問(wèn)另一個(gè)頁(yè)面的時(shí)候，都需要重新加載html、css、js文件
我們熟知的JS框架如react,vue,angular,ember都屬于SPA
單頁(yè)應(yīng)用與多頁(yè)應(yīng)用的區(qū)別
單頁(yè)面應(yīng)用（SPA） | 多頁(yè)面應(yīng)用（MPA） | |
組成 | 一個(gè)主頁(yè)面和多個(gè)頁(yè)面片段 | 多個(gè)主頁(yè)面 |
刷新方式 | 局部刷新 | 整頁(yè)刷新 |
url模式 | 哈希模式 | 歷史模式 |
SEO搜索引擎優(yōu)化 | 難實(shí)現(xiàn)，可使用SSR方式改善 | 容易實(shí)現(xiàn) |
數(shù)據(jù)傳遞 | 容易 | 通過(guò)url、cookie、localStorage等傳遞 |
頁(yè)面切換 | 速度快，用戶(hù)體驗(yàn)良好 | 切換加載資源，速度慢，用戶(hù)體驗(yàn)差 |
維護(hù)成本 | 相對(duì)容易 | 相對(duì)復(fù)雜 |
單頁(yè)應(yīng)用優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：
具有桌面應(yīng)用的即時(shí)性、網(wǎng)站的可移植性和可訪(fǎng)問(wèn)性
用戶(hù)體驗(yàn)好、快，內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面
良好的前后端分離，分工更明確
缺點(diǎn)：
不利于搜索引擎的抓取
首次渲染速度相對(duì)較慢
MVVM 由 Model,View,ViewModel 三部分構(gòu)成，Model 層代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來(lái)，ViewModel 是一個(gè)同步View 和 Model的對(duì)象。
在MVVM架構(gòu)下，View 和 Model 之間并沒(méi)有直接的聯(lián)系，而是通過(guò)ViewModel進(jìn)行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數(shù)據(jù)的變化會(huì)同步到Model中，而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上。
ViewModel 通過(guò)雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來(lái)，而View 和 Model 之間的同步工作完全是自動(dòng)的，無(wú)需人為干涉，因此開(kāi)發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來(lái)統(tǒng)一管理。
作用域問(wèn)題，為了保證互不干擾，因?yàn)橐粋€(gè)組件是可以共享的，但他們的data是私有的，所以每個(gè)組件都要return一個(gè)新的data對(duì)象，返回一個(gè)唯一的對(duì)象，不要和其他組件共用一個(gè)對(duì)象。而且data也是一個(gè)閉包的經(jīng)典使用常見(jiàn)。
this指向直接調(diào)用者，而非間接調(diào)用者
普通函數(shù)中的this：
在Vue所有的生命周期鉤子方法（如created，mounted， updated以及destroyed）里 使用this，this指向調(diào)用它的Vue實(shí)例，即（new Vue）。
箭頭函數(shù)中的this：
箭頭函數(shù)沒(méi)有自己的this, 它的this是繼承而來(lái); 默認(rèn)指向在定義它時(shí)所處的對(duì)象(宿主對(duì)象),而不是執(zhí)行時(shí)的對(duì)象, 定義它的時(shí)候,可能環(huán)境是window; 箭頭函數(shù)可以方便地讓我們?cè)?setTimeout ,setInterval中方便的使用this
vue生命周期即為一個(gè)組件從出生到死亡的一個(gè)完整周期，主要包括以下4個(gè)階段：創(chuàng)建，掛載，更新，銷(xiāo)毀
創(chuàng)建前：beforeCreate, 創(chuàng)建后:created（有data,無(wú)$el）
掛載前：beforeMount, 掛載后：mounted（有data,有$el）
更新前：beforeUpdate, 更新后：updated
銷(xiāo)毀前：beforeDestroy, 銷(xiāo)毀后：destroyed
新增了使用內(nèi)置組件 keep-alive 來(lái)緩存實(shí)例，而不是頻繁創(chuàng)建和銷(xiāo)毀(開(kāi)銷(xiāo)大)
actived 實(shí)例激活（該鉤子在服務(wù)器端渲染期間不被調(diào)用。）
deactived 實(shí)例失效 （該鉤子在服務(wù)器端渲染期間不被調(diào)用。
前端路由實(shí)現(xiàn)原理主要通過(guò)以下兩種技術(shù)實(shí)現(xiàn)的
第一種：利用H5的history API實(shí)現(xiàn)
主要通過(guò)history.pushState 和 history.replaceState來(lái)實(shí)現(xiàn)，不同之處在于，pushState會(huì)增加一條新的歷史記錄，而replaceState則會(huì)替換當(dāng)前的歷史記錄[發(fā)布項(xiàng)目時(shí),需要配置下apache]
第二種：利用url的hash實(shí)現(xiàn)
我們經(jīng)常在 url 中看到 #，這個(gè) # 有兩種情況，一個(gè)是我們所謂的錨點(diǎn)，路由里的 # 不叫錨點(diǎn)，我們稱(chēng)之為 hash，我們說(shuō)的就是hash,主要利用監(jiān)聽(tīng)哈希值的變化來(lái)觸發(fā)事件 —— hashchange 事件來(lái)做頁(yè)面局部更新
第三種：abstract模式
適用于所有JavaScript環(huán)境，例如服務(wù)器端使用Node.js。如果沒(méi)有瀏覽器API，路由器將自動(dòng)被強(qiáng)制進(jìn)入此模式。
總結(jié)：hash 方案兼容性好，而H5的history主要針對(duì)高級(jí)瀏覽器。
路由守衛(wèi)：
第一種：全局路由鉤子
beforeEach(to,from,next) { }
第二種：路由獨(dú)享的鉤子
beforeEnter(to,from,next) {}
第三種：組件內(nèi)的鉤子
beforeRouteEnter(to,from,next) {}
beforeRouteUpdate(to,from,next) {}
beforeRouteLeave(to,from,next) {}
適用場(chǎng)景：動(dòng)態(tài)設(shè)置頁(yè)面標(biāo)題，判斷用戶(hù)登錄權(quán)限等
vue路由懶加載
vue路由懶加載主要解決打包后文件過(guò)大的問(wèn)題，事件觸發(fā)才加載對(duì)應(yīng)組件中的js
replace和push的區(qū)別
this.$router.replace方法,不計(jì)入history記錄，this.$router.push計(jì)入歷史
利用ES5中的Object.defineProperty結(jié)合觀(guān)察者模式實(shí)現(xiàn)的，然后利用里面的getter和setter來(lái)實(shí)現(xiàn)雙向數(shù)據(jù)綁定的、發(fā)布訂閱模式，數(shù)據(jù)劫持
首先要對(duì)數(shù)據(jù)進(jìn)行劫持監(jiān)聽(tīng)，設(shè)置一個(gè)監(jiān)聽(tīng)器Observer，用來(lái)監(jiān)聽(tīng)所有屬性。如果屬性發(fā)上變化了，就需要告訴訂閱者Watcher看是否需要更新。因?yàn)橛嗛喺呤怯泻芏鄠€(gè)，所以我們需要有一個(gè)消息訂閱器Dep來(lái)專(zhuān)門(mén)收集這些訂閱者，然后在監(jiān)聽(tīng)器Observer和訂閱者Watcher之間進(jìn)行統(tǒng)一管理的。接著，我們還需要有一個(gè)指令解析器Compile，對(duì)每個(gè)節(jié)點(diǎn)元素進(jìn)行掃描和解析，將相關(guān)指令（如v-model，v-on）對(duì)應(yīng)初始化成一個(gè)訂閱者Watcher，并替換模板數(shù)據(jù)或者綁定相應(yīng)的函數(shù)，此時(shí)當(dāng)訂閱者Watcher接收到相應(yīng)屬性的變化，就會(huì)執(zhí)行對(duì)應(yīng)的更新函數(shù)，從而更新視圖。
異步更新隊(duì)列:Vue在觀(guān)察到數(shù)據(jù)變化時(shí)并不是直接更新DOM，而是開(kāi)啟一個(gè)隊(duì)列，并緩沖在同一個(gè)事件循環(huán)中發(fā)生的所以數(shù)據(jù)改變。在緩沖時(shí)會(huì)去除重復(fù)數(shù)據(jù)，從而避免不必要的計(jì)算和DOM操作。然后，在下一個(gè)事件循環(huán)tick中，Vue刷新隊(duì)列并執(zhí)行實(shí)際（已去重的）工作。
因?yàn)閂ue的異步更新隊(duì)列，$nextTick是用來(lái)知道什么時(shí)候DOM更新完成的
vue中的nextTick主要用于處理數(shù)據(jù)動(dòng)態(tài)變化后，DOM還未及時(shí)更新的問(wèn)題，用nextTick就可以獲取數(shù)據(jù)更新后最新DOM的變化
適用場(chǎng)景：
第一種：有時(shí)需要根據(jù)數(shù)據(jù)動(dòng)態(tài)的為頁(yè)面某些dom元素添加事件，這就要求在dom元素渲染完畢時(shí)去設(shè)置，但是created與mounted函數(shù)執(zhí)行時(shí)一般dom并沒(méi)有渲染完畢，所以就會(huì)出現(xiàn)獲取不到，添加不了事件的問(wèn)題，這回就要用到nextTick處理
第二種：在使用某個(gè)第三方插件時(shí) ，希望在vue生成的某些dom動(dòng)態(tài)發(fā)生變化時(shí)重新應(yīng)用該插件，也會(huì)用到該方法，這時(shí)候就需要在 $nextTick 的回調(diào)函數(shù)中執(zhí)行重新應(yīng)用插件的方法，例如:應(yīng)用滾動(dòng)插件better-scroll時(shí)
第三種：數(shù)據(jù)改變后獲取焦點(diǎn)
vue最大特點(diǎn)我感覺(jué)就是“組件化“和”數(shù)據(jù)驅(qū)動(dòng)“
組件化就是可以將頁(yè)面和頁(yè)面中可復(fù)用的元素都看做成組件，寫(xiě)頁(yè)面的過(guò)程，就是寫(xiě)組件，然后頁(yè)面是由這些組件“拼接“起來(lái)的組件樹(shù)
數(shù)據(jù)驅(qū)動(dòng)就是讓我們只關(guān)注數(shù)據(jù)層，只要數(shù)據(jù)變化，頁(yè)面（即視圖層）會(huì)自動(dòng)更新，至于如何操作dom，完全交由vue去完成，咱們只關(guān)注數(shù)據(jù)，數(shù)據(jù)變了，頁(yè)面自動(dòng)同步變化了，很方便
jquery主要是玩dom操作的“神器“，強(qiáng)大的選擇器,封裝了好多好用的dom操作方法和如何獲取ajax方法 例如：$.ajax（）非常好用
vue:主要用于數(shù)據(jù)驅(qū)動(dòng)和組件化，很少操作dom，當(dāng)然vue可能通過(guò)ref來(lái)選擇一個(gè)dom或組件
vue與react：
相同點(diǎn)：數(shù)據(jù)驅(qū)動(dòng)視圖、組件化、都使用 Virtual DOM
不同點(diǎn)：核心思想不同、組件寫(xiě)法差異、diff算法不同、響應(yīng)式原理不同
特性：引入Tree-shaking，多出setup生命周期、響應(yīng)式API、響應(yīng)式偵聽(tīng)、Composition API（組合API）、Fragment、Teleport、Suspense等
v-on 指令常用修飾符：
.stop - 調(diào)用 event.stopPropagation()，禁止事件冒泡。
.prevent - 調(diào)用 event.preventDefault()，阻止事件默認(rèn)行為。
.capture - 添加事件偵聽(tīng)器時(shí)使用 capture 模式。
.self - 只當(dāng)事件是從偵聽(tīng)器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)。
.{keyCode | keyAlias} - 只當(dāng)事件是從特定鍵觸發(fā)時(shí)才觸發(fā)回調(diào)。
.native - 監(jiān)聽(tīng)組件根元素的原生事件。
.once - 只觸發(fā)一次回調(diào)。
.left - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時(shí)觸發(fā)。
.right - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時(shí)觸發(fā)。
.middle - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時(shí)觸發(fā)。
.passive - (2.3.0) 以 { passive: true } 模式添加偵聽(tīng)器
v-bind 指令常用修飾符：
.prop - 被用于綁定 DOM 屬性 (property)。(差別在哪里？)
.camel - (2.1.0+) 將 kebab-case 特性名轉(zhuǎn)換為 camelCase. (從 2.1.0 開(kāi)始支持)
.sync (2.3.0+) 語(yǔ)法糖，會(huì)擴(kuò)展成一個(gè)更新父組件綁定值的 v-on 偵聽(tīng)器。
v-model 指令常用修飾符：
.lazy - 取代 input 監(jiān)聽(tīng) change 事件
.number - 輸入字符串轉(zhuǎn)為數(shù)字
.trim - 輸入首尾空格過(guò)濾
v-if和v-show都可以顯示和隱藏一個(gè)元素，但有本質(zhì)區(qū)別
v-if：是惰性的，只是值為false就不會(huì)加載對(duì)應(yīng)元素，為true才動(dòng)態(tài)加載對(duì)應(yīng)元素
v-show：是無(wú)論為true和為false都會(huì)加載對(duì)應(yīng)html代碼，但為false時(shí)用display:none隱藏不在頁(yè)面顯示，但為true時(shí)頁(yè)面上用display:block顯示其效果
適用場(chǎng)景：切換頻繁的場(chǎng)合用v-show,切換不頻繁的場(chǎng)合用v-if
v-for的優(yōu)先級(jí)比v-if更高，這意味著 v-if將分別重復(fù)運(yùn)行于每個(gè) v-for循環(huán)中。當(dāng)你想為僅有的一些項(xiàng)渲染節(jié)點(diǎn)時(shí)，這種優(yōu)先級(jí)的機(jī)制會(huì)十分有用，vue3.x則v-if優(yōu)先級(jí)更高
提前使用js的方式表示出dom結(jié)構(gòu)樹(shù)來(lái).存儲(chǔ)在內(nèi)存里面.同樣的循環(huán).只會(huì)最終合并執(zhí)行一次,大大的提高了性能。
(這個(gè)地方有點(diǎn)兒像js中的createElementFragment文檔碎片)
而在對(duì)比的過(guò)程中.通過(guò)diff算法進(jìn)行比較差異.這個(gè)比較在我理解而言就是同層比較.降低了時(shí)間復(fù)雜度空間復(fù)雜度一些什么玩意兒.最終把差異同步到真實(shí)dom上去.這就是我理解的虛擬dom
在傳統(tǒng)的jq中,操作的都是真實(shí)的DOM,.而一個(gè)真實(shí)dom的渲染過(guò)程,要經(jīng)過(guò)渲染引擎構(gòu)建DOM樹(shù).構(gòu)建樣式表.組建成render(渲染)樹(shù),的過(guò)程,要經(jīng)過(guò)不斷的重繪回流才能夠展示給用戶(hù).
那么在直接js操作dom的過(guò)程中,比方說(shuō)一個(gè)循環(huán)10次插入dom元素,其實(shí)每一次都會(huì)經(jīng)歷上面的過(guò)程..經(jīng)歷大量的重繪回流.代價(jià)特別大.性能低下.所以出現(xiàn)了虛擬dom
diff 算法是一種通過(guò)同層的樹(shù)節(jié)點(diǎn)進(jìn)行比較的高效算法
其有兩個(gè)特點(diǎn)：
比較只會(huì)在同層級(jí)進(jìn)行, 不會(huì)跨層級(jí)比較
在diff比較的過(guò)程中，循環(huán)從兩邊向中間比較
diff 算法在很多場(chǎng)景下都有應(yīng)用，在 vue 中，作用于虛擬 dom 渲染成真實(shí) dom 的新舊 VNode 節(jié)點(diǎn)比較
原理：當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，set方法會(huì)調(diào)用Dep.notify通知所有訂閱者Watcher，訂閱者就會(huì)調(diào)用patch給真實(shí)的DOM打補(bǔ)丁，更新相應(yīng)的視圖
第一種：父?jìng)髯樱褐饕ㄟ^(guò)props來(lái)實(shí)現(xiàn)的
具體實(shí)現(xiàn)：父組件通過(guò)import引入子組件，并注冊(cè)，在子組件標(biāo)簽上添加要傳遞的屬性，子組件通過(guò)props接收，接收有兩種形式一是通過(guò)數(shù)組形式[‘要接收的屬性’ ]，二是通過(guò)對(duì)象形式{ }來(lái)接收，對(duì)象形式可以設(shè)置要傳遞的數(shù)據(jù)類(lèi)型和默認(rèn)值，而數(shù)組只是簡(jiǎn)單的接收
第二種：子傳父：主要通過(guò)$emit來(lái)實(shí)現(xiàn)
具體實(shí)現(xiàn)：子組件通過(guò)通過(guò)綁定事件觸發(fā)函數(shù)，在其中設(shè)置this.$emit(‘要派發(fā)的自定義事件’，要傳遞的值)，$emit中有兩個(gè)參數(shù)一是要派發(fā)的自定義事件，第二個(gè)參數(shù)是要傳遞的值
然后父組件中,在這個(gè)子組件身上@派發(fā)的自定義事件,綁定事件觸發(fā)的methods中的方法接受的默認(rèn)值,就是傳遞過(guò)來(lái)的參數(shù)
第三種：兄弟之間傳值有兩種方法：
方法一：通過(guò)event bus實(shí)現(xiàn)
具體實(shí)現(xiàn):創(chuàng)建一個(gè)空的vue并暴露出去，這個(gè)作為公共的bus,即當(dāng)作兩個(gè)組件的橋梁，在兩個(gè)兄弟組件中分別引入剛才創(chuàng)建的bus，在組件A中通過(guò)bus.$emit（’自定義事件名’，要發(fā)送的值）發(fā)送數(shù)據(jù)，在組件B中通過(guò)bus.$on（‘自定義事件名‘,function(v) { //v即為要接收的值 }）接收數(shù)據(jù)
方法二：通過(guò)vuex實(shí)現(xiàn)
具體實(shí)現(xiàn)：vuex是一個(gè)狀態(tài)管理工具，主要解決大中型復(fù)雜項(xiàng)目的數(shù)據(jù)共享問(wèn)題，主要包括state,actions,mutations,getters和modules 5個(gè)要素，主要流程：組件通過(guò)dispatch到 actions，actions是異步操作，再actions中通過(guò)commit到mutations，mutations再通過(guò)邏輯操作改變state，從而同步到組件，更新其數(shù)據(jù)狀態(tài)
方法三：使用全局的變量傳遞
在windons或document上聲明或綁定數(shù)據(jù)，取值
computed是多對(duì)一的關(guān)系，而watch則是一對(duì)多的關(guān)系；
methods中都是封裝好的函數(shù)，無(wú)論是否有變化只要觸發(fā)就會(huì)執(zhí)行
computed:是vue獨(dú)有的特性計(jì)算屬性，可以對(duì)data中的依賴(lài)項(xiàng)再重新計(jì)算，得到一個(gè)新值，應(yīng)用到視圖中，和methods本質(zhì)區(qū)別是computed是可緩存的，也就是說(shuō)computed中的依賴(lài)項(xiàng)沒(méi)有變化，則computed中的值就不會(huì)重新計(jì)算，而methods中的函數(shù)是沒(méi)有緩存的。Watch是監(jiān)聽(tīng)data和計(jì)算屬性中的新舊變化。
css沒(méi)有局部樣式的概念，vue腳手架通過(guò)實(shí)現(xiàn)了，即在style標(biāo)簽上添加scoped
scoped的實(shí)現(xiàn)原理：vue通過(guò)postcss給每個(gè)dom元素添加一個(gè)以data-開(kāi)頭的隨機(jī)自定義屬性、然后css根據(jù)屬性選擇器添加樣式
第三方庫(kù)的樣式穿透：
成對(duì)出現(xiàn)：provide和inject是成對(duì)出現(xiàn)的
作用：用于父組件向子孫組件傳遞數(shù)據(jù)
使用方法：provide在父組件中返回要傳給下級(jí)的數(shù)據(jù)，inject在需要使用這個(gè)數(shù)據(jù)的子輩組件或者孫輩等下級(jí)組件中注入數(shù)據(jù)。
使用場(chǎng)景：由于vue有$parent屬性可以讓子組件訪(fǎng)問(wèn)父組件。但孫組件想要訪(fǎng)問(wèn)祖先組件就比較困難。通過(guò)provide/inject可以輕松實(shí)現(xiàn)跨級(jí)訪(fǎng)問(wèn)父組件的數(shù)據(jù)
provider/inject：簡(jiǎn)單的來(lái)說(shuō)就是在父組件中通過(guò)provider來(lái)提供變量，然后在子組件中通過(guò)inject來(lái)注入變量
需要注意的是這里不論子組件有多深，只要調(diào)用了inject那么就可以注入provider中的數(shù)據(jù)。而不是局限于只能從當(dāng)前父組件的prop屬性來(lái)獲取數(shù)據(jù)。
會(huì)不定期分享前端知識(shí)，歡迎關(guān)注，評(píng)論，點(diǎn)贊~
原文鏈接：https://juejin.cn/post/7291291652139499535
TML(超文本標(biāo)記語(yǔ)言)是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言，由瀏覽器解析執(zhí)行。
接下來(lái)我來(lái)介紹一下簡(jiǎn)單的模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Ps：針對(duì)上面的這些HTML，對(duì)于初學(xué)者而言是不是一頭霧水。
那么接下來(lái)，我將為大家一一講述，讓大家明白其中這些標(biāo)簽的用處。
html元素： 是一個(gè)html頁(yè)面最外層的標(biāo)簽（HTML頁(yè)面的根元素），其他所有標(biāo)簽都被它包裹。
head元素： 是一個(gè)用來(lái)放置頁(yè)面信息的標(biāo)簽（文檔的元數(shù)據(jù)），如<meta>定義編碼格式，<title>頁(yè)面標(biāo)題等。
body元素： 是一個(gè)用來(lái)放頁(yè)面看得到的內(nèi)容（可見(jiàn)的頁(yè)面內(nèi)容），如圖表，表格，文字等
html結(jié)構(gòu)介紹
另外簡(jiǎn)單貼下兩個(gè)標(biāo)簽，放到body，就可以用瀏覽器看到效果，源碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>小成講前端</h1>
<p>本系列將隔天不定時(shí)更新</p>
</body>
</html>分別是：
h1元素：定義一個(gè)大標(biāo)題
p元素：定義一個(gè)段落
（本期完）
小成講前端---本系列將隔天不定時(shí)更新
歡迎點(diǎn)贊，關(guān)注我！！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
