[[411080]]

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

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

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

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

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

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

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

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

數據驅動VS事件驅動

數據驅動編程：

所謂的數據驅動編程，就是一切從數據的角度出發，把所有的東西都抽象成數據模型，然后進行數據建模。后端程序員大部分都是這種數據驅動的編程思維。 舉個簡單的例子。如果要實現一個博客系統，那么后端程序員，特別是Java程序員，首先考慮的是先創建一個Blog 對象模型，該模型包含了，標題，作者，內容，發布時間等屬性。然后才會考慮針對 Blog 有哪些操作，比如新增 Blog，查詢 Blog，刪除以及修改 Blog。這就是典型的數據驅動編程，編程之前思考得更多的是數據模型，以及數據模型之間的關系和變化。

事件驅動編程：

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

VUE的出現

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

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

事件驅動編程Demo

1. 實現靜態頁面表單

<!-- 實現靜態頁面 --> 
<form> 
  Name: 
  <p id="name-value"></p> 
  <input type="text" name="name" id="name-input" /> 
  Email: 
  <p id="email-value"></p> 
  <input type="email" name="email" id="email-input" /> 
  <input type="submit" /> 
</form> 

2. 事件綁定

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

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

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

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

數據驅動編程Demo

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

// 包括一個 name 和 一個 email 的值 
export default { 
  data： { 
    return { 
      name: "", 
      email: "" 
    }; 
  }}; 

2. 將數據與前端展示建立聯系，并為相應元素綁定事件

<form> 
  Name: 
  <p>{{ name }}</p> 
  <input 
    type="text" 
    name="name" 
    v-bind:value="name" 
    v-on:input="updateNameValue" 
  /> 
  Email: 
  <p>{{ email }}</p> 
  <input 
    type="email" 
    name="email" 
    v-bind:value="email" 
    v-on:input="updateEmailValue" 
  /> 
 <input type="submit" /> 
 </form> 

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

export default { 
  data: { 
    return { 
      name: "", 
      email: "" 
    }; 
  }, 
  methods: { 
    // 綁定 input 事件，獲取到輸入值，設置到對應的數據中 
    updateNameValue(event) { 
      this.name = event.target.value; 
    }, 
    updateEmailValue(event) { 
      this.email = event.target.value; 
    } 
  }}; 

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

以上就是我學習Vue的一些體會，事件驅動編程跟數據驅動編程 可以混合使用，畢竟我們的世界不是非黑即白，主要看我們真實項目的使用場景。