很多年没有写过前端代码了，我的前端水平还停留在Jquery一统天下的年代。最近想趁着假期补补一下前端知识，于是看了一下最近很火的Vue.js。看看也没关系，发现自己已经落后了整整一个时代。前端编程的思想已经从Jquery时代的事件驱动编程模型过渡到以Vue.js为代表的数据驱动编程时代。我觉得前端编程思维从事件驱动到数据驱动的转变意义重大。和后端MVC的思想一样，具有划时代的意义。可以说，一切新技术和编程思想的出现都是时代发展的必然产物。后端MVC思想的出现是因为当时后端逻辑越来越复杂，代码越来越难维护。为了使项目结构更清晰、更易于维护，人们提出了代码分层的概念；于是就出现了Model层、View层、Controller层。现在前端页面越来越复杂，尤其是随着移动互联网时代的到来，为了更好的维护越来越复杂的前端代码，前端也提出了分层的概念，划分代码分为三部分。层是模型层、视图层和视图模型层。这就是VUE框架的指导思想，简称MVVC。前端MVC的本质和后端MVC是一样的，这也印证了很多简单的道理其实是通用的。我和很多后端程序员聊过，他们都说前端难学，甚至不经意间流露出某种羡慕和仇恨的表情。一位知名的技术大师曾开玩笑说，你甚至可以学习JavaScript，但你无法学习C++。其实后端程序员学前端难的原因大概有两个。一是由于JavaScript语法本身的特点，灵活多变，而JavaScript走的是原型继承的路线，这与其他面向对象语言完全不同。第二个原因是编程思维不同。大多数前端程序员是事件驱动的编程思想，而很多后端程序员是数据驱动的编程思想。Data-drivenVSEvent-driven数据驱动编程：所谓数据驱动编程就是从数据的角度出发，把一切抽象成数据模型，然后进行数据建模。大部分后端程序员都有这种数据驱动的编程思维。举一个简单的例子。如果要实现一个博客系统，后端程序员尤其是Java程序员首先要考虑的是创建一个Blog对象模型，它包括标题、作者、内容、发布时间等属性。然后会考虑Blog需要进行哪些操作，比如添加Blog，查询Blog，删除修改Blog。这是典型的数据驱动编程。在编程之前，我们更多地思考数据模型，以及数据模型之间的关系和变化。事件驱动编程：所谓事件驱动编程就是一切从事件的角度出发，以事件为思考点。因为前端更多的是处理页面和用户之间的交互，比如点击一个元素显示不同的页面内容，点击一个按钮提交表单等，这些都是由事件触发的，所以大部分前端程序员都是事件驱动编程的思维方式。VUEJquery的出现是事件编程的代表，VUE是数据驱动编程的代表，也是前端MVVC思想的具体体现。下面就通过“监控页面表单元素变化”这个小功能来感受下两种编程方式的区别吧。事件驱动编程Demo1。实现静态页面form2。事件绑定varnameInputEl=document.getElementById("name-input");varemailInputEl=document.getElementById("email-input");//监听输入事件，此时updateValue函数未定义nameInputEl.addEventListener("input",updateNameValue);emailInputEl.addEventListener("input",updateEmailValue);3.事件触发，更新页面内容varnameValueEl=document.getElementById("name-value");varemailValueEl=document.getElementById("email-value");//定义updateValue函数更新页面内容functionupdateNameValue(e){nameValueEl.innerText=e.srcElement.value;}functionupdateEmailValue(e){emailValueEl.innerText=e.srcElement.value;}这就是事件驱动的编程方式。在整个写代码的过程中，我们一直在思考事件，即触发什么事件，这个事件会带来什么结果。数据驱动编程Demo1。数据建模表单包含两个数据框，name和Email，所以我们定义一个数据模型。//包括名称和电子邮件值exportdefault{data:{return{name:"",email:""};}};2.将数据与前端显示连接起来，并为相应的元素绑定事件3.在数据模型中添加相应的处理逻辑exportdefault{data:{return{name:"",email:""};}，方法：{//绑定输入事件，获取输入值，设置为对应的数据}}};这就是VUE数据驱动编程思想的体现。数据一直是思考的中心，考虑的是数据的变化，而不是事件的变化。如果你是后端程序员，尤其是Java程序员，应该很容易接受这种编程方式。以上就是我学习Vue的一些心得。事件驱动编程和数据驱动编程可以混合使用。毕竟，我们的世界不是非黑即白的。主要看我们实际项目的使用场景。
