理解Vue.js

一 什麼是Vue.js

1.1 vue是什麼

vue是一個web app框架，它提供數據（PJSO，Plain JavaScript Object）和視圖（DOM對象，或者說HTML模版）的綁定。修改數據，視圖自動更新。

vue是一種MVVM，其中Model是PJSO，View是DOM對象，ViewModel由vue提供，它包括一系列DOM listeners和helper functions。

# 最小的vue app的例子

一個DOM div元素。一個Vue對象，通過id確定綁定的div元素，提供數據。

<div id="app"> {{ message }}</div>new Vue({ el: "d", data: { message: foo bar }})

1.2 Vue組件與vue對象

vue組件（vue component）與vue實例的關係類似與class與instance。Vue.extend() 可以生成一個vue組件，new該組件生成vue對象。vue對象才可以與DOM元素綁定。

1.3 Vue-loader

vue-loader用於Webpack，可以把與一個vue component相關聯的CSS、JavaScript寫在一個文件里，並且把這個文件編譯為plain JavaScript module（可以被其他module使用）

二 多個vue組件

一個Web App很難只由一個vue組件構成。多個vue組件會出現交互問題。

2.1 父子組件

vue實例的作用域是孤立的。父子組件通過props傳遞數據。這點和reactjs很像。父子組件也可以通過vue提供的方法獲得對方，但是子組件修改父組件是很差的實踐。

2.2 事件機制

vue也提供一套事件機制，用於組件間通信。

2.3 Vue-router

vue-router提供了一套通過link url切換vue組件的功能。

使用多個vue組件帶來的問題是，我們是否該用Root Component代表整個app。如果我們在Root Component里儲存app的數據，只存一份，那麼需要增加很多組件間的交互給其他組件提供數據，如果我們在每個組件里兜儲存數據，那麼需要格外的數據同步與更新的方法。Vuex提供了一種解決方法。

三 Vuex是什麼

Vuex是vue版的Flux/Redux。vuex主要解決兩個問題，一個是在哪裡存放整個app的數據（vuex里的store），一個是各個vue組件如何通信（vuex里的action）。

Vuex集中管理兩種數據，一是整個app的state。整個app只有一份state，存在vuex的state里。所有的vue組件從這裡獲取data。另一個是action，組件之間無法直接互相通信。所有信息溝通由action完成。

Vuex還提供兩類函數，一類是getter。getter類似於vue組件中的computed property，也類似於redux中的reducer。getter一定是純函數。Vue組件可以直接讀取vuex的state，也可以調用getter。

另一類是mutations。mutations代表對store的修改。任何組件不允許直接修改自身的data。這一點等於是取消了vue本身提供的雙向綁定的功能。每個對state的修改，都需要用mutations封裝。

mutations只用來修改state。複雜、非同步的操作使用actions。

四 總結

Vuejs是一個web框架，它以DOM元素為模版，提供數據綁定的功能。

一個web app可能會含有多個vue組件。

Vuex是基於vue的web app框架。
推薦閱讀：