最近聽說某個(gè)朋友的移動(dòng)視頻直播的項(xiàng)目使用了vuejs，我就動(dòng)了學(xué)習(xí)vuejs的念頭。
下面是學(xué)習(xí)筆記，留待以后使用的時(shí)候做個(gè)索引。
Vue.js 的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，它讓數(shù)據(jù)與 DOM 保持同步非常簡單。
看過了vuejs的文檔，發(fā)現(xiàn)和angularjs很相似的，都是MVVM架構(gòu)。
MVVM，MVC的C變成了VM-VewModel。ViewModel在View和Model之間充當(dāng)中介者，view的變化被DOM Listeners發(fā)現(xiàn)以后寫入model中，model中的變化被viewmodel中的數(shù)據(jù)綁定刷新到view中。
組件系統(tǒng)是 Vue.js 另一個(gè)重要概念。
Vue.js 組件非常類似于自定義元素——它是Web?Component規(guī)范的一部分。實(shí)際上 Vue.js 的組件語法參考了該規(guī)范。例如 Vue 組件實(shí)現(xiàn)了Slot API與is特性。但是，有幾個(gè)關(guān)鍵的不同：
Web 組件規(guī)范仍然遠(yuǎn)未完成，并且沒有瀏覽器實(shí)現(xiàn)。相比之下，Vue.js 組件不需要任何補(bǔ)丁，并且在所有支持的瀏覽器（IE9 及更高版本）之下表現(xiàn)一致。必要時(shí)，Vue.js 組件也可以放在原生自定義元素之內(nèi)。
Vue.js 組件提供了原生自定義元素所不具備的一些重要功能，比如組件間的數(shù)據(jù)流，自定義事件系統(tǒng)，以及動(dòng)態(tài)的、帶特效的組件替換。
? 組件間的數(shù)據(jù)流? ? ? ??
? ? ? ? ?父組件可以通過props把數(shù)據(jù)傳給子組件，? ? ? ??
? ?自定義事件系統(tǒng)? ??
? ? ? ? ? 每個(gè) Vue 實(shí)例都是一個(gè)事件觸發(fā)器：? ??
? ? ? ? ? ? ? ? ? ?使用$on()監(jiān)聽事件；? ? ? ??
? ? ? ? ? ? ? ? ? ?使用$emit()在它上面觸發(fā)事件；? ? ? ??
? ? ? ? ? ? ? ? ? ?使用$dispatch()派發(fā)事件，事件沿著父鏈冒泡；? ? ? ??
? ? ? ? ? ? ? ? ? ?使用$broadcast()廣播事件，事件向下傳導(dǎo)給所有的后代。? ??
? ? ?動(dòng)態(tài)組件? ? ? ??
? ? ? ? ? ? 多個(gè)組件可以使用同一個(gè)掛載點(diǎn)，然后動(dòng)態(tài)地在它們之間切換。使用保留的元素，動(dòng)態(tài)地綁定到它的 is 特性
深入響應(yīng)式原理
? 如何追蹤變化
? ? ?data對象的setter/getter
? ? ?模板每個(gè)指令/數(shù)據(jù)綁定都有一個(gè)watcher，watcher會(huì)檢查依賴屬性，一旦屬性的setter被調(diào)用，就會(huì)觸發(fā)watcher的官僚指令-重新計(jì)算/更新DOM
? data對象的動(dòng)態(tài)添加/刪除屬性
? ? ? ?通過全局方法Vue.set(data,key, value)或者實(shí)例方法vm.$set(key, value)
? ? ? ? 但是不建議這么做，推薦在 data 對象上聲明所有的響應(yīng)屬性，僅僅是動(dòng)態(tài)的修改屬性的值，這樣對性能比較好。
? ? 異步更新隊(duì)列
? ? ? ?vuejs中的nextTick
? ? ? ? ? ?延遲回調(diào)在下次DOM 更新循環(huán)之后執(zhí)行，同樣的watcher即使被多次觸發(fā)也只會(huì)在隊(duì)列中出現(xiàn)一次。
? ? ? ? ? 看到這個(gè)我想起了window.requestNextAnimationFrame函數(shù)。
自定義指令，自定義過濾，混合這些話題很重要，但是我不再描述。
生態(tài)系統(tǒng)（包括各種工具鏈，框架和插件）
組件系統(tǒng)是用 Vue.js 構(gòu)建大型應(yīng)用的基礎(chǔ)。另外，Vue.js 生態(tài)系統(tǒng)也提供了高級工具與多種支持庫，它們和 Vue.js 一起構(gòu)成了一個(gè)更加“框架”性的系統(tǒng)。這些工具鏈在構(gòu)建大型應(yīng)用中也起到了很大的作用。
? 我想要一個(gè)最初始的boilerplate -- vue-cli
? ? ? ? 你還可以自定義模板，寫好骨架以后上傳到github上面，以后就可以使用自定義模板生成項(xiàng)目的boilerplate了。
? ?我想要類似angular中ui-router的東西 -- vue-router
? ?我想要angular中$http的東西 -- vue-resource
? ?我想要用sass或者stylus -- 在vue.js中好方便,在component定義文件中可以直接使用各種css預(yù)處理語言
? ?我想要類似flux，redux的數(shù)據(jù)流 -- vuex
? ?我想要用sublime或者webstorm作為開發(fā)工具 --都有相應(yīng)的插件，最新的webstorm2016.1.1可以使用babel作為vue文件的watcher
? 另外可能用得到的插件
? ? ?vue-async-data：異步加載數(shù)據(jù)插件。
? ? ?vue-validator：表單驗(yàn)證插件。
? ? ?vue-devtools：Chrome 開發(fā)者工具擴(kuò)展，用于調(diào)試 Vue.js 應(yīng)用。
? ? ?vue-touch：使用 Hammer.js 添加觸摸手勢指令。
? ? ?vue-element：使用 Vue.js 注冊自定義元素。
