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

原创：花括号MC(微信公众号：huakuohao-mc)。关注JAVA基础编程及大数据，注重经验分享及个人成长。

已经很多年没有写前端代码了，我的前端水平还停留在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的一些体会，事件驱动编程跟数据驱动编程 可以混合使用，毕竟我们的世界不是非黑即白，主要看我们真实项目的使用场景。另外本篇文章主要参考《深入理解Vue.js实战》这本书，文中代码样例也来自于此。