摘要：如果要相應(yīng)狀態(tài)改變，通常最好使用計(jì)算屬性或取而代之。那解決問(wèn)題的思路便是在改變的情況下，保證頁(yè)面的不刷新。后面值的變化，并不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求，瀏覽器不發(fā)出請(qǐng)求，也就不會(huì)刷新頁(yè)面。

1.vue生命周期
2.vue 雙向綁定原理
3.vue router原理
4.vue router動(dòng)態(tài)路由

注意:所有的生命周期鉤子自動(dòng)綁定this上下文到實(shí)例中,因此你可以訪問(wèn)數(shù)據(jù),對(duì)屬性和方法進(jìn)行運(yùn)算。這意味著你不能使用箭頭函數(shù)來(lái)定義一個(gè)生命周期方法(例如:created:() => this.fetchTodos() )。這是因?yàn)榧^函數(shù)綁定了父級(jí)上下文，因此this與你期待的vue實(shí)例不同,this.fetchTodos的行為未定義。

beforeCreate 
 在實(shí)例初始化之后,數(shù)據(jù)觀測(cè)(data observer)和 event/watcher事件配置之前被調(diào)用。

created  
在實(shí)例創(chuàng)建完成后被立即調(diào)用.在這一步,實(shí)例已完成以下的配置:數(shù)據(jù)觀測(cè)(data observer),屬性和方法的運(yùn)算,watch/event 事件回調(diào)。然而，掛載階段還沒(méi)開(kāi)始，$el屬性目前不可見(jiàn)。

beforeMount 
在掛載開(kāi)始之前被調(diào)用:相關(guān)的 render 函數(shù)首次被調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。該鉤子在服務(wù)器渲染期間不被調(diào)用。

mounted 
el被新創(chuàng)建的 vm.$el 替換,病掛載到實(shí)例上去之后調(diào)用該鉤子。如果root實(shí)例掛載了一個(gè)文檔內(nèi)元素,當(dāng) mounted
被調(diào)用時(shí) vm.$el 也在文檔內(nèi)。 注意： mounted 不會(huì)承諾所有子組件也都一起被掛載。如果你希望等到整個(gè)視圖都渲染完畢，可以用
vm.$nextTick 替換調(diào) mounted:(該鉤子在服務(wù)器端渲染期間不被調(diào)用)

    mounted:function() {
        this.$nextTick(function () {
        //code that will run only after the 
        //entire view has been rendered
   }) } 

beforeUpdate  
數(shù)據(jù)更新時(shí)調(diào)用,發(fā)生在虛擬 DOM 打補(bǔ)丁之前。這里適合在更新之前訪問(wèn)現(xiàn)有的DOM,比如
手動(dòng)移除已經(jīng)添加的事件監(jiān)聽(tīng)器。 
該鉤子在服務(wù)器端渲染期間不被調(diào)用，因?yàn)橹挥谐醮武秩緯?huì)在服務(wù)端進(jìn)行。

updated 
由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁,在這之后會(huì)調(diào)用該鉤子。
當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件DOM已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)。如果要相應(yīng)狀態(tài)改變，通常最好使用計(jì)算屬性或watcher取而代之。
注意 updated 不會(huì)承諾所有的子組件都一起被重繪。如果你希望等到整個(gè)視圖都重繪完畢，可以用vm.$nextTick 替換調(diào)
mounted:(該鉤子在服務(wù)器端渲染期間不被調(diào)用)

mounted:function() {
    this.$nextTick(function () {
    //code that will run only after the 
    //entire view has been rendered
}) } 

activated 
keep-alive 組件激活時(shí)調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。 
構(gòu)建組件 keep-alive 
動(dòng)態(tài)組件 keep-alive

deactivated 
keep-alive組件停用時(shí)調(diào)用。 該鉤子在服務(wù)器端渲染期間不被調(diào)用
構(gòu)建組件 keep-alive 
動(dòng)態(tài)組件 keep-alive

beforeDestory 
實(shí)例銷(xiāo)毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。 
該鉤子在服務(wù)器端渲染期間不被調(diào)用。

destoryed 
vue實(shí)例銷(xiāo)毀后調(diào)用。調(diào)用后，vue實(shí)例指示的所有東西都會(huì)解綁定,所有的事件監(jiān)聽(tīng)器會(huì)被移除,所有的子實(shí)例也會(huì)被銷(xiāo)毀。
該鉤子在服務(wù)器端渲染期間不被調(diào)用。

Object.defineProperty是ES5新增的一個(gè)API,其作用是給對(duì)象的屬性增加更多的控制
Object.defineProperty(obj,prop,descriptor)
參數(shù)：

 obj: 需要定義屬性的對(duì)象(目標(biāo)對(duì)象)
 prop:需要定義或修改的屬性名(對(duì)象上的屬性或方法)
 對(duì)于setter和getter,我的理解是它們是一對(duì)鉤子hook函數(shù),當(dāng)你對(duì)一個(gè)對(duì)象的某個(gè)屬性賦值時(shí),則會(huì)自動(dòng)調(diào)用相應(yīng)的setter函數(shù);
 而當(dāng)獲取屬性時(shí),則調(diào)用getter函數(shù)。這也是實(shí)現(xiàn)雙向數(shù)據(jù)綁定的關(guān)鍵。
 

路由這個(gè)概念最先是后端出現(xiàn)的。在以前用模板引擎開(kāi)發(fā)頁(yè)面時(shí)，經(jīng)常會(huì)看到這樣

http://www.xxx.com/login

大致流程可以看成這樣：

1.瀏覽器發(fā)出請(qǐng)求
2.服務(wù)器監(jiān)聽(tīng)到80端口（或443）有請(qǐng)求過(guò)來(lái)，并解析url路徑
3.根據(jù)服務(wù)器路由配置，返回相應(yīng)的信息（可以是html字串,也可以是json數(shù)據(jù),圖片等）
4.瀏覽器根據(jù)數(shù)據(jù)包`Content-Type`來(lái)決定如何解析數(shù)據(jù)

簡(jiǎn)單來(lái)說(shuō)路由就是用來(lái)跟后端服務(wù)器進(jìn)行交互的一種方式,通過(guò)不同的路徑,來(lái)請(qǐng)求不同的資源,請(qǐng)求不同的頁(yè)面是路由的其中一種功能。

前端路由
1.hash模式
隨著ajax的流行,異步數(shù)據(jù)請(qǐng)求交互運(yùn)行在不刷新瀏覽器的情況下進(jìn)行。而異步交互體驗(yàn)的更高級(jí)版本就是SPA——單頁(yè)應(yīng)用。單頁(yè)應(yīng)用不僅僅在頁(yè)面交互是無(wú)刷新的，連頁(yè)面跳轉(zhuǎn)都是無(wú)刷新的，為了實(shí)現(xiàn)單頁(yè)應(yīng)用，所以就有了前端路由。
類(lèi)似于服務(wù)器路由，前端路由實(shí)現(xiàn)起來(lái)其實(shí)也很簡(jiǎn)單，就是匹配不同的url路徑,進(jìn)行解析,然后動(dòng)態(tài)的渲染出區(qū)域html內(nèi)容。但是這樣存在一個(gè)問(wèn)題，就是URL每次變化的時(shí)候，都會(huì)造成頁(yè)面的刷新。那解決問(wèn)題的思路便是在改變URL的情況下，保證頁(yè)面的不刷新。在2014年之前，大家是通過(guò)hash來(lái)實(shí)現(xiàn)路由，URL hash 就是類(lèi)似于：

http://www.xxx.com/login

這種#。后面hash值的變化，并不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求，瀏覽器不發(fā)出請(qǐng)求，也就不會(huì)刷新頁(yè)面。另外每次hash值的變化，還會(huì)觸發(fā)
hashchange這個(gè)事件,通過(guò)這個(gè)事件我們就可以知道hash值發(fā)生了哪些變化。然后我們便可以監(jiān)聽(tīng)hashchang來(lái)實(shí)現(xiàn)更新頁(yè)面部分內(nèi)容的操作:

function matchAndUpdate () {
    // todo 匹配 hash 做 DOM 更新
}
window.addEventListener("hashchange",matchAndUpdate)

2.history 模式
14年后，因?yàn)镠TML5標(biāo)準(zhǔn)發(fā)布。多了兩個(gè)API,pushState 和 replaceState,通過(guò)這兩個(gè)API 可以改變url地址且不會(huì)發(fā)送請(qǐng)求。同時(shí)還有 popState 事件。通過(guò)這些就能用另一種方式來(lái)實(shí)現(xiàn)前端路由了，但原理都是跟 hash 實(shí)現(xiàn)相同的。用了 HTML5 的實(shí)現(xiàn)，單頁(yè)路由的 url 就不會(huì)多出一個(gè)#，變得更加美觀。但因?yàn)闆](méi)有 # 號(hào)，所以當(dāng)用戶刷新頁(yè)面之類(lèi)的操作時(shí)，瀏覽器還是會(huì)給服務(wù)器發(fā)送請(qǐng)求。為了避免出現(xiàn)這種情況，所以這個(gè)實(shí)現(xiàn)需要服務(wù)器的支持，需要把所有路由都重定向到根頁(yè)面。

function matchAndUpdate () {
    // todo 匹配 hash 做 DOM 更新
}
window.addEventListener("popstate",matchAndUpdate)

vue router實(shí)現(xiàn)
我們?cè)谑褂胿ue-router的時(shí)候,主要有以下幾步:

    
    



// 1. 安裝 插件
Vue.use(VueRouter);

// 2. 創(chuàng)建router對(duì)象
const router = new VueRouter({
    routes // 路由列表 eg: [{ path: "/foo", component: Foo }]
});

// 3. 掛載router
const app = new Vue({
    router
}).$mount("#app");

vue-router 實(shí)現(xiàn) -- install
理解Object.defineProperty的作用