響應(yīng)式原理
- Observer
- Dep
- Watcher
- 遍歷整個組件樹
vue組件實例化時件蚕，會對data屬性深度遍歷（遇到數(shù)組或者對象）為每一個屬性添加數(shù)據(jù)劫持。數(shù)據(jù)劫持就是使用Object.defineProperty（de fai in pro pu tei）方法添加get/set方法芭毙。
在這個過程中會實例化一個Dep類萎馅。
1.在get攔截器里觸發(fā)dep實例的depend方法,進(jìn)行依賴收集拳锚，實質(zhì)是在dep的實例屬性sub數(shù)組中添加依賴這個屬性的watcher實例熄浓。
2.在set攔截器里觸發(fā)dep實例的notify方法，對收集到的所有依賴派發(fā)更新年鸳，（watcher的update方法）
vue組件實例化時會實例化一個渲染watcher,渲染watcher實例化過程會做兩件事情剃氧。
1.創(chuàng)建vnode,在這個過程中，訪問了data屬性阻星，觸發(fā)了get方法，完成了依賴收集已添。
2.觸發(fā)了子組件的實例化妥箕，子組件實例化又會重復(fù)上述數(shù)據(jù)劫持的過程。
這個過程就是對組件樹的深度遍歷更舞。
結(jié)合組件生命周期來看整個過程畦幢，父組件會先觸發(fā)created鉤子，子組件后觸發(fā)created鉤子缆蝉。而子組件mouted鉤子會先執(zhí)行宇葱，父組件的mouted鉤子后執(zhí)行。
Vue-Router
分步驟記憶
1刊头、實現(xiàn)頁面不刷新的原理
2黍瞧、頁面視圖刷新的原理
實現(xiàn)頁面不刷新
1.hash
2.history
3.abstract：支持所有 JavaScript 運行環(huán)境，如 Node.js 服務(wù)器端原杂。如果發(fā)現(xiàn)沒有瀏覽器的 API印颤，路由會自動強制進(jìn)入這個模式。
1.hash(哈希模式)穿肄，#符號后邊是瀏覽器行為年局，在改變的時候不對頁面進(jìn)行刷新（重新請求URL）（監(jiān)聽hashChange事件）
2.history模式，H5新增了pushState咸产，replaceState連個新API,可以修改歷史記錄卻不會使瀏覽器刷新頁面矢否。
視圖更新原理
其原理就是vue的響應(yīng)式更新dom的原理，m => v
m是數(shù)據(jù)脑溢，也就是在vue-router install時在根組件（root vue component）添加了_route屬性僵朗，在匹配到對應(yīng)路由后更新了_route屬性值，繼而觸發(fā)了該屬性值的渲染watcher,在繼而觸發(fā)dom更新。
兩種模式的不同
1.部署時衣迷，history模式需要服務(wù)端處理所有可能的路徑（例如配置nginx的配置文件）畏鼓，防止出現(xiàn)404。哈希模式則不需要壶谒。
2.URL表示不同云矫。
v-model 雙向綁定
v-model指令就是v-bind:value 和 @input的語法糖。
它即可以支持原生表單元素汗菜，也可以支持自定義組件
在自定義組件中其實際是這樣的：
let vm = new Vue({
el: '#app',
template: '<div>' +
'<child :value="message" @input="message=arguments[0]"></child>' +
'<p>Message is: {{ message }}</p>' +
'</div>',
data() {
return {
message: ''
}
},
components: {
Child
}
})
keep-alive
它的實現(xiàn)通過自定義render函數(shù), 緩存了 vnode
異步更新隊列 和 $nextTick用法
Vue 在更新 DOM 時是異步執(zhí)行的让禀，只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個隊列陨界，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更巡揍。
如果同一個 watcher 被多次觸發(fā)，只會被推入到隊列中一次菌瘪。在緩沖時會去除重復(fù)數(shù)據(jù)避免不必要的計算和 DOM 操作腮敌。
$nextTick(cb) 目的是在DOM 更新完成后傳入的回調(diào)函數(shù)再被調(diào)用。
