問：我們在使用Vue時，實際上幹了什麼？ 答：實際上只幹了一件事——new了一個Vue對象。後面的事，都交由這個對象自動去做。就好像按了下開關，機器跑起來了，剩下的事就不用我們再操心了。 各位看官先別不服，FEer在基於Vue開發項目時，確實寫了很多代碼，但本質上，這些代碼都是在往這台機器的固定工作 ...
問：我們在使用Vue時，實際上幹了什麼？ 答：實際上只幹了一件事——new了一個Vue對象。後面的事，都交由這個對象自動去做。就好像按了下開關，機器跑起來了，剩下的事就不用我們再操心了。 各位看官先別不服，FEer在基於Vue開發項目時，確實寫了很多代碼，但本質上，這些代碼都是在往這台機器的固定工作程式上添加自定義的行為。譬如說，一個組件被初始化時，其created生命周期鉤子一定會被執行，我們可以做的只是填寫具體的執行內容，至於這些內容何時被真正執行，是完全由Vue對象控制的，開發者無從插手。 為什麼這樣設計呢？根本原因是前端項目越來越複雜，傳統的開發方式顯得力不從心。舉個例子，用jQuery時，我們自己操作DOM；用Vue時，我們不再親自操作DOM，而是讓Vue去做。我們之所以願意把DOM管理權讓渡給Vue，因為這本就是個臟活累活，隨著前端項目規模迅速增長，手動管理DOM的難度、出錯率和對性能的影響都在急劇升高，以至於手動管理顯得不現實，必須應用一套自動化的管理方式。 什麼叫自動化的管理方式？ DOM本質上是數據的呈現，或者說是數據映射成的視圖。當然，嚴格地說，DOM本身也只是一種描述用戶界面的模型，最終的呈現是由瀏覽器在解析DOM後完成的，但在前端語境下，可以把DOM與視圖等同。 所以前端程式的核心任務是：達成數據與視圖之間的映射。 用jQuery時，映射是我們親自做的，比如說有一個name需要展示出來，我們就創造一個div，把name放在div里，然後把div掛載到DOM樹上；但用Vue時，情況不一樣了，我們告訴Vue有一個name變數需要被映射，並且（以字元串的形式）告訴Vue映射的模板是個div，但真正創造div結點並將其掛載到DOM樹上這一步，是由Vue完成的。 看出區別了嗎？用上Vue後，我們不再關心DOM結點增/刪/改的具體實現，而是專註於創造數據與視圖的映射規則（業務邏輯），Vue自會根據這些規則，以最優的策略完成DOM操作，這就是自動化的管理方式。 從前文描述可以看出，Vue值得我們瞭解的重點包括： 1. 如何監聽數據變化？因為只有實現了監聽數據變化，才能把變化同步到視圖上。尤雨溪說基本原理是用Object.defineProperty方法劫持data對象各個屬性的getter和setter。 2. DOM更新策略。React和Vue都採用了Virtual DOM技術，以儘量減少DOM操作數量和範圍。 另外一個值得關註的點是組件的實現，因為現代前端項目體積龐大，必須依賴組件化功能將項目拆分為相對獨立的模塊，方能有效地組織和復用代碼。 Vue生態還擁有許多其他工具，它們都是基於Vue所要完成的任務，在某個具體的方面提供支持，如vuex是為了實現跨組件通信、數據共用和狀態集中管理，vue-router是為了管理組件和路徑的映射關係等。 以上提到的三點在Vue.js中的具體實現，且待下回分解。
