已經很多年沒有寫前端代碼了，我的前端水平還停留在 Jquery 一統天下的年代。最近想趁着假期，惡補一下前端的知識，於是就看了一下最近特別流行的 Vue.js 。這一看不要緊，發現自己已經落後了整整一個時代。

前端編程思想已經由 Jquery 時代的 事件驅動編程 模型過渡到了以 Vue.js 爲代表的 數據驅動編程 時代。

前端編程思想由 事件驅動 到 數據驅動 的轉變我覺得意義重大，跟後端的 MVC 的思想一樣，都具有劃時代的意義。

可以說所有新的技術及編程思想的出現都是時代發展的必然產物。後端的 MVC 思想出現，是因爲當時後端邏輯變得越來越複雜，代碼維護起來難度越來越大。爲了讓項目結構更清晰，維護起來更容易，人們提出了代碼分層的概念; 所以出現了 Model 層， View 層，以及 Controller 層。

現在前端頁面也變得越來越複雜，特別是隨着移動互聯網時代的到來，爲了能夠更好的維護越來越複雜的前端代碼，前端也提出了分層的概念，將代碼也分爲三層，分別是 Model 層， VIew 層，以及 ViewModel 層。這就是 VUE 框架的指導思想，簡稱 MVVC 。

前端的 MVVC 跟後端的 MVC 本質是一樣的，這也印證了很多樸素的真理其實都是通用的這句話。

跟很多後端程序員都聊過，他們表示前端很難學，甚至無意中還會流露出某種羨慕嫉妒恨的表情。有個知名技術大咖曾經開玩笑說，你連JavaScript都學的會，還學不會C++。

其實後端程序員覺得前端難學的原因，大概有兩點，其一是因爲 JavaScript 語法本身的特性，靈活多變，並且 JavaScript 走的是原型繼承的路線，跟其他面嚮對象語言截然不同；第二點原因就是編程思維方式不一樣，大部分前端程序員都是 事件驅動 的編程思維，而很多後端程序員都是 數據驅動 的編程思維。

數據驅動VS事件驅動

數據驅動編程：

事件驅動編程：

所謂的事件驅動編程，就是一切從事件的角度出發，以事件爲思考點。因爲前端更多的是處理頁面與用戶的互動關係，比如點擊某個元素呈現不同的頁面內容，點擊某個按鈕進行表單提交等，這些都是由事件觸發的，所以前端程序員大部分都是事件驅動編程的思維方式。

VUE的出現

Jquery 是事件編程的代表，而 VUE 則是數據驅動編程的代表，也是前端 MVVC 思想的具體體現。

下面我們通過“監聽頁面表單元素變化”這個小功能，來體會一下兩種編程方式的區別。

事件驅動編程Demo

1. 實現靜態頁面表單

 1<!-- 實現靜態頁面 -->
 2<form>
 3  Name:
 4  <p id="name-value"></p>
 5  <input type="text" name="name" id="name-input" />
 6  Email:
 7  <p id="email-value"></p>
 8  <input type="email" name="email" id="email-input" />
 9  <input type="submit" />
10</form>

2. 事件綁定

1var nameInputEl = document.getElementById("name-input");
2var emailInputEl = document.getElementById("email-input");
3// 監聽輸入事件，此時 updateValue 函數未定義
4nameInputEl.addEventListener("input", updateNameValue);
5emailInputEl.addEventListener("input", updateEmailValue);

3. 事件觸發，更新頁面內容

1var nameValueEl = document.getElementById("name-value");
2var emailValueEl = document.getElementById("email-value");
3// 定義 updateValue 函數，用來更新頁面內容
4function updateNameValue(e) {
5  nameValueEl.innerText = e.srcElement.value;
6}
7function updateEmailValue(e) {
8  emailValueEl.innerText = e.srcElement.value;
9}

這就是事件驅動編程方式。整個編寫代碼的過程中，我們一直圍繞事件在思考，也就是觸發了什麼事件，這個事件將帶來什麼結果。

數據驅動編程Demo

1. 數據建模
表單中包含了兩個數據數據框，name及Email，所以我們定義一個數據模型。

1// 包括一個 name 和 一個 email 的值
2export default {
3  data： {
4    return {
5      name: "",
6      email: ""
7    };
8  }};

2. 將數據與前端展示建立聯繫，併爲相應元素綁定事件

 1<form>
 2  Name:
 3  <p>{{ name }}</p>
 4  <input
 5    type="text"
 6    name="name"
 7    v-bind:value="name"
 8    v-on:input="updateNameValue"
 9  />
10  Email:
11  <p>{{ email }}</p>
12  <input
13    type="email"
14    name="email"
15    v-bind:value="email"
16    v-on:input="updateEmailValue"
17  />
18 <input type="submit" />
19 </form>

3. 給數據模型添加相應的處理邏輯

 1export default {
 2  data: {
 3    return {
 4      name: "",
 5      email: ""
 6    };
 7  },
 8  methods: {
 9    // 綁定 input 事件，獲取到輸入值，設置到對應的數據中
10    updateNameValue(event) {
11      this.name = event.target.value;
12    },
13    updateEmailValue(event) {
14      this.email = event.target.value;
15    }
16  }};

這就是 VUE 的數據驅動編程思想的體現。一直以數據爲思考中心，考慮的是數據的變化，並不是事件的變化。如果你是個後端程序員，特別是 Java 程序員，應該很容易接受這種編程方式。

以上就是我學習 Vue 的一些體會， 事件驅動編程 跟 數據驅動編程 可以混合使用，畢竟我們的世界不是非黑即白，主要看我們真實項目的使用場景。另外本篇文章主要參考《深入理解Vue.js實戰》這本書，文中代碼樣例也來自於此。

點一下你會更好看耶

相關文章