从零开始学习Vue(二)

思维方式的变化

• WebForm时代, Aspx.cs 取得数据,绑定到前台的Repeater之类的控件.重新渲染整个HTML页面.就是整个页面不断的刷新;后来微软打了个补丁,推出了AJAX控件,比如UpdatePanel,就不是整个HTML页面渲染了,只是渲染指定的UpdatePanel里面的DOM
• MVC时代, Controller的Method取得数据,传递到Model或者ViewBag,前台的Razor引擎就是比较纯粹的HTML了,对Model的数据做个循环,就能显示出需要的数据;这个方法方便和设计师合作.通常设计师设计是图片,再切图成CSS/HTML, 取消的控件的概念,整个html就比较清爽了.
• Jquery的兴起, 你要在页面改变某个元素,你得操心具体的DOM的结构.看下面的代码是不是很熟悉呢?
  

      $.ajax({
          url: '/api/data/query',
          data: {
              id: id
          }
      }).done(function(res){
          if(res.code == 200) {
              var name = res.data.name;
              $input.val(name);
              $name_text.text(name);
          }
      })
  
   var params = {name: name};
  
      $.ajax({
          url: '/api/data/save',
          data: params
      }).done(function (res) {
          if (res.code == 200) {
              $name_text.text(name);
          }
      })

  这种实现的主要问题在于：

  1）在数据变化的时候，必须手工更新DOM，看那两个ajax请求的回调就知道。对这种简单页面可能还好说，要是页面里面包含几十个不同类型的表单控件时，这些页面的更新操作就会变得非常繁杂，而且还容易出错；

  2）缺乏封装，没有体现数据的管理，功能都是直接靠请求与DOM操作实现的，实际上按照面向对象的思路以及职责分离的原则，应该把数据的同步和数据的管理功能单独封装起来，把界面变化的功能也单独封装起来，两部分的内容通过接口或者事件来交互。