从Jquery到Vue 一次编程思维的转换

已经很多年没有写前端代码了，我的前端水平还停留在 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实战》这本书，文中代码样例也来自于此。

点一下你会更好看耶