vue生命周期
加載渲染過程 父 beforeCreate -> 父 created -> 父 beforeMount ->
子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted 子組件更新過程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父組件更新過程
父 beforeUpdate -> 父 updated
銷毀過程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
vue-router 有哪幾種導航鈎子?
三種全局導航鈎子 router.beforeEach(to, from, next), router.beforeResolve(to, from, next), router.afterEach(to, from ,next)組件內鈎子 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave 單獨路由獨享組件beforeEnter
vue 的雙向綁定的原理是什么(常考)
vue.js 是采用數據劫持結合發布者-訂閱者模式的方式，通過 Object.defineProperty()來劫持各個屬性的 setter，getter， 在數據變動時發布消息給訂閱者，觸發相應的監聽回調。 具體步驟： 第一步：需要 observe 的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter 和 getter 這樣的話， 給這個對象的某個值賦值，就會觸發 setter，那么就能監聽到了數據變化
第二步：compile 解析模板指令，
將模板中的變量替換成數據，然后初始化渲染頁面視圖，並將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，
一旦數據有變動，收到通知，更新視圖
第三步：Watcher 訂閱者是 Observer 和 Compile 之間通信的橋梁，主要做的事情是:在自身實例化時往屬性訂閱器(dep)里面
添加自己自身必須有一個 update()方法待屬性變動 dep.notice()通知時，能調用自身的 update() 方法，並觸發 Compile 中綁定的回調，
則功成身退。第四步：MVVM 作為數據綁定的入口，整合 Observer、Compile 和 Watcher 三者，通過 Observer 來監聽自己的 model 數據變化，
通過 Compile 來解析編譯模板指令，最終利用 Watcher 搭起 Observer 和 Compile 之間的通信橋梁，達到數據變化 -> 視圖更新；
視圖交互變化(input) -> 數據 model 變更的雙向綁定效果。
axios取消請求
原理 將正在請求的ajax放入一個數組中 名稱為url+請求方式+參數字符串=>[{ajaxName:'http://crm/login&post',fun:xxx}]
在請求的時候先去這個數組中找是否有這個ajax，如果有就調用這個ajax的fun函數，取消了上一次請求，如果沒有就 在這個數組中添加上這個ajax
結束的時候將這個ajax從數組中清除了
import axios from 'axios';
axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';
let pending = []; //聲明一個數組用於存儲每個ajax請求的取消函數和ajax標識
let cancelToken = axios.CancelToken;//重要代碼
let removePending = (ever) => {
for(let index in pending){
if(pending[index].ajaxName === ever.url + '&' + ever.method) { //當當前請求在數組中存在時執行函數體
pending[index].fun(); //執行取消操作
pending.splice(index, 1); //把這條記錄從數組中移除
}
}
}
//http request 攔截器
axios.interceptors.request.use(
config => {
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type':'application/x-www-form-urlencoded'
}
// ------------------------------------------------------------------------------------
removePending(config); //在一個ajax發送前執行一下取消操作
config.cancelToken = new cancelToken((c)=>{//重要代碼
//c是一個回調函數，就是取消ajax的函數！ajax就是這么定義的
// 這里的ajax標識我是用請求地址&請求方式拼接的字符串，當然你可以選擇其他的一些方式最好把參數也加上
// 因為會出現一種 比如配置薪酬模板 同一個接口只是參數不同但是一進頁面需要將四種模板的數據全部加載出來
pending.push({
ajaxName: config.url + '&' + config.method,
fun: c
});
// 如果不是 封裝的話 就為某一個 請求單獨寫的話 那就需要 用一個全局變量接住這個c 然后在某個函數中調用它
});
// -----------------------------------------------------------------------------------------
return config;
},
error => {
return Promise.reject(err);
}
);
//http response 攔截器
axios.interceptors.response.use(
response => {
// ------------------------------------------------------------------------------------------
removePending(res.config); //ajax響應后 刪除數組中的ajax，把已經完成的請求從pending中移除
// -------------------------------------------------------------------------------------------
return response;
},
error => {
return Promise.reject(error)
}
)
xss-csrf
xss是在請求參數中寫入一些代碼
格式化參數如
比如用戶輸入：<script>alert("222")</script>，保存后最終存儲的會是
<script>alert="222;</script>在展現時瀏覽器會對這些字符轉換成文本內容顯示，而不是一段可執行的代碼
csrf是拿到用戶的cookie在自己的網址上利用cookie去模擬用戶發送請求
1利用token校驗，
2利用Request Headers 中Referer的值他里面存儲了請求是從哪個網址來的 來做一個基本的判斷
http-https(http+ssl/tls(數字證書)的組合)
Http與Https的基本概念和他們的區別:
HTTP 標准端口是 80 ，而 HTTPS 的標准端口是 443
HTTP無需認證證書,而https需要認證證書
在 OSI 網絡模型中，HTTPS的加密是在傳輸層完成的,因為SSL是位於傳輸層的,TLS的前身是SSL,所以同理
簡單來說http是用來進行html等超媒體傳輸的,但是http不安全,為了安全,使用證書SSL和HTTP的方式進行數據傳輸,也就是HTTPS
Https工作原理：
服務器給客戶端傳輸證書 證書就是公鑰里面包含證書的過期時間證書頒發機構等信息
客戶端驗證證書是否過期等 如果一切正常就生成一個隨機值（私鑰）然后證書對私鑰進行加密，發送給服務器
服務器將消息進行對稱加密（簡單說就是 將消息和私鑰進行混合，只有私鑰才能解開消息 正好只有客戶端有私鑰（安全））發送給客戶端
客戶端用私鑰進行信息解密
HTTP優化
資源內斂 : 資源內聯 : 既然每個資源的首次訪問都會存在握手等rtt損耗,那么越少數量的資源請求就越好,例如咋一個html中src訪問css,不如直接將其這個css集成到html中
圖片懶加載 ; 用到的時候在加載,這個已經很普遍了,就不細說了
服務器渲染 : 讓服務端先將頁面渲染好,在發送給客戶端,也可以減少rtt的次數
HTTP1.0-HTTP2.0
http1.0:
無連接,無狀態,一次請求一個tcp連接
一個請求接收到響應之后才會接着發送下一個,這也造成了head of line blocking(隊頭阻塞),
現在的瀏覽器為了解決這個問題,采用了一個頁面可以建立多個tcp連接的方式來進行
http1.1:
持久連接：持久連接新增加了connecion字段,里面可以設置keey-Alive(保持連接)或者close(關閉長連接),
避免了每次請求都會新建連接,提高了網絡的利用率,
請求管道化(有一些缺陷)：http1.1的管道:可以發送很多請求到服務端,但是服務端必須要按順序返回響應,
由此可以看出http1.1的管道只是把客戶端的請求序列變成了服務端的響應序列,還是有問題,很多瀏覽器並不是很支持 ,
增加了host字段,緩存,斷點續傳
http2.0 : 二進制分幀(多路復用的實現基礎), 多路復用,頭部壓縮
http緩存機制
HTTP1.0
采用Expires頭部控制來實現 Expires只能根據絕對時間來刷新緩存內容
HTTP1.0
Cache-Control支持max-age用來表示相對過期時間
另外請求服務器時也可以根據Etag和Last-Modified來判斷是否從瀏覽器端緩存中加載文件，
此時緩存的控制和判斷將決定服務器的響應報文中頭部內容的狀態碼200還是304。
具體過程：
第一步：瀏覽器會先查詢Cache-Control (這里用Expires判斷也是可以的，如果兩者都設置了，則只有Cache-Control的設置生效)
來判斷內容是否過期，如果未過期，則直接讀取瀏覽器端緩存文件，不發送HTTP請求，否則進入下一步。
第二步：在瀏覽器端判斷上次文件返回頭中是否含有Etag信息，有則帶上If-None-Match字段信息發送請求給服務器，
服務端判斷Etag未修改則返回304，如果修改則返回200，否則進入下一步。
第三步：在瀏覽器端判斷上次文件返回頭中是否含有Last-Modifed信息，有則帶上
If-Modified-Since字段信息發送請求，服務端判斷Last-Modified失效則返回200， 有效則返回304。
第四部：如果Etag和Last-Modified都不存在，則直接向服務器請求內容。
這就是Cache-Control、Etag 和Last-Modified控制請求緩存的主要過程。
