[[411080]]

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

前端編程思想已經(jīng)由Jquery 時代的事件驅(qū)動編程 模型過渡到了以Vue.js 為代表的數(shù)據(jù)驅(qū)動編程 時代。

前端編程思想由事件驅(qū)動 到 數(shù)據(jù)驅(qū)動 的轉(zhuǎn)變我覺得意義重大，跟后端的MVC的思想一樣，都具有劃時代的意義。

可以說所有新的技術(shù)及編程思想的出現(xiàn)都是時代發(fā)展的必然產(chǎn)物。后端的MVC 思想出現(xiàn)，是因?yàn)楫?dāng)時后端邏輯變得越來越復(fù)雜，代碼維護(hù)起來難度越來越大。為了讓項(xiàng)目結(jié)構(gòu)更清晰，維護(hù)起來更容易，人們提出了代碼分層的概念; 所以出現(xiàn)了Model 層，View 層，以及Controller層。

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

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

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

其實(shí)后端程序員覺得前端難學(xué)的原因，大概有兩點(diǎn)，其一是因?yàn)镴avaScript語法本身的特性，靈活多變，并且JavaScript走的是原型繼承的路線，跟其他面向?qū)ο笳Z言截然不同;第二點(diǎn)原因就是編程思維方式不一樣，大部分前端程序員都是事件驅(qū)動的編程思維，而很多后端程序員都是數(shù)據(jù)驅(qū)動的編程思維。

數(shù)據(jù)驅(qū)動VS事件驅(qū)動

數(shù)據(jù)驅(qū)動編程：

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

事件驅(qū)動編程：

所謂的事件驅(qū)動編程，就是一切從事件的角度出發(fā)，以事件為思考點(diǎn)。因?yàn)榍岸烁嗟氖翘幚眄撁媾c用戶的互動關(guān)系，比如點(diǎn)擊某個元素呈現(xiàn)不同的頁面內(nèi)容，點(diǎn)擊某個按鈕進(jìn)行表單提交等，這些都是由事件觸發(fā)的，所以前端程序員大部分都是事件驅(qū)動編程的思維方式。

VUE的出現(xiàn)

Jquery 是事件編程的代表，而VUE 則是數(shù)據(jù)驅(qū)動編程的代表，也是前端MVVC思想的具體體現(xiàn)。

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

事件驅(qū)動編程Demo

1. 實(shí)現(xiàn)靜態(tài)頁面表單

<!-- 實(shí)現(xiàn)靜態(tài)頁面 --> 
<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"); 
// 監(jiān)聽輸入事件，此時 updateValue 函數(shù)未定義 
nameInputEl.addEventListener("input", updateNameValue); 
emailInputEl.addEventListener("input", updateEmailValue); 

3. 事件觸發(fā)，更新頁面內(nèi)容

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

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

數(shù)據(jù)驅(qū)動編程Demo

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

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

2. 將數(shù)據(jù)與前端展示建立聯(lián)系，并為相應(yīng)元素綁定事件

<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. 給數(shù)據(jù)模型添加相應(yīng)的處理邏輯

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

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

以上就是我學(xué)習(xí)Vue的一些體會，事件驅(qū)動編程跟數(shù)據(jù)驅(qū)動編程 可以混合使用，畢竟我們的世界不是非黑即白，主要看我們真實(shí)項(xiàng)目的使用場景。