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

已经很多年没有写前端代码了，从Je次我的到的转前端水平还停留在Jquery一统天下的年代。最近想趁着假期，编程恶补一下前端的从Je次知识，于是到的转就看了一下最近特别流行的Vue.js。这一看不要紧，编程发现自己已经落后了整整一个时代。从Je次

前端编程思想已经由Jquery 时代的到的转事件驱动编程 模型过渡到了以Vue.js 为代表的数据驱动编程 时代。

前端编程思想由事件驱动 到 数据驱动 的编程转变我觉得意义重大，跟后端的从Je次MVC的思想一样，都具有划时代的到的转意义。

可以说所有新的编程技术及编程思想的出现都是时代发展的必然产物。后端的从Je次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. 实现静态页面表单

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. 将数据与前端展示建立联系，并为相应元素绑定事件

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的一些体会，事件驱动编程跟数据驱动编程 可以混合使用，毕竟我们的世界不是非黑即白，主要看我们真实项目的使用场景。