为什么vue.js一眼看上去很美?

对其他框架我是佩服,对vue.js我则是爱。我就是一眼看上了vue.js,于是用它做各种东西,反反复复多次,然后觉得有些融会贯通,然后,我稍微细的思量了下,到底vue.js靓丽在哪?

还是上案例对比说明。这次的案例,UI看起来是:

clipboard.png

一个span,两个按钮,点击按钮会让span加1或者减1。它简单到你不需要分心关注,但是由足够说明典型的html场景——就是既有数据呈现也有按钮操作。

vanilla.js

首先出场的是vanilla.js(vanilla.js的意思是,不使用任何框架) ,代码是这样的:


<div id="app">
<p><span id="count">0</span>
    <button id="inc">+</button>
    <button id="dec">-</button>
  </p>
</div>
<script>
    var counter = document.getElementById('count');
    var btn1 = document.getElementById('inc');
    var btn2 = document.getElementById('dec');
    var count = 0;
    btn1.addEventListener('click',function (){
                counter.innerHTML = ++count;
            }
    )
    btn2.addEventListener('click',function (){
                counter.innerHTML = --count;
            }
    )
</script>


代码行数倒是不算多,但是看起来的感受是:

  1. 使用了多个DOM API(getElementById,innerHTML)

  2. DOM API设计的复合词太长

我偏爱简洁的代码,而使用DOM API就构成了一种代码的臭味,让我喜欢不起来。

jquery

第二个出场的是jquery。我个人认为前端历史上来说,有几个标志性事件

  1. 微软加入了XMLHttpRequest。从此Ajax技术一发而不可收

  2. jquery。简单的Selector,精简的API,令世人只有有jquery,不知道有Vanilla.js

  3. Vue.js等相类似的框架。引入了数据绑定,以及组件技术到前端开发
    所有,jquery当然是排的上好的技术了。那么,使用jq,效果如何呢?

  <script
  src="https://code.jquery.com/jquery-3.1.1.js"
  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
  crossorigin="anonymous"></script>
<div id="app">
<p><span id="count">0</span>
    <button id="inc">+</button> 
    <button id="dec">-</button>
  </p>
</div>
<script>
var count = 0 
$('#inc').click(function(){
  $("#count").html(++count)
})
$('#dec').click(function(){
  $("#count").html(--count)
})
</script>

分析一下:

  1. jquery的选择器比起原生的更好,即使和querySelector相比也更简洁

  2. 使用精简的API替代Vanilla的。比如.html()比起.getElementById()来说,是要看着舒服点的

然而,内核基本不变:依然是添加EventListener,命令式的取值和修改值,依然你得懂得DOM的节点选择、事件监听、回调函数等。

Vue.js

最后出场的是vue,代码是这样的:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <p>{{count}}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </p>
</div>
<script>
new Vue({
  el:'#app',
  data () {
    return {
      count: 0
    }
  },
  methods: {
    inc () {
      this.count++
    },
    dec () {
      this.count--
    }
  }
})
</script>

第一感觉就是:

  1. 规整。数据(data),方法(methods)放置的工工整整,一目了然。它充分的利用js的字面量对象的语法

  2. 整个应用接口设计,基本上采用的都是简单。一眼看过去,一个复合词也没有(比如getElementById就是4个复合词)

好处是:

  1. 现在,你不需要挂接EventListener,使用@click语法自动绑定事件,使用{{}}自动绑定数据

  2. 你不需要DOM的一系列的知识就可以构造此程序;对初学者来说,这个门槛真是降低太多

Vue.js的优美和简约,来源于声明式编程的理念。就是说我不需要通过一系列的函数调用来完成一件事儿,而是直接声明想要什么事儿。比如:

  1. 程序员直接声明{{count}},告诉Vue,此处使用Vue实例中的data对象内的count属性来填充。而不是调用.getElementById,.textContent来设置。

  2. 程序员通过@click直接声明点击事件指向位置为Vue实例内对象methods对应的方法。而不是通过调用.addEventListener,传入回调函数的方式来实现事件监听

整个Vue.js的应用接口设计的非常优美,但是能量巨大,做到这一点需要很多功力。这就是我佩服的设计哲学。把麻烦留给自己,让开发者感受简洁。

作者:刘传君

创建过产品,创过业。好读书,求甚解。
可以通过 1000copy#gmail.com 联系到我

出品

bootstrap小书 https://www.gitbook.com/book/...
http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...


挚爱JavaScript
敢作敢为
1 篇内容引用

敢作敢为

4.6k 声望
541 粉丝
0 条评论
推荐阅读
Spring Boot 构建一个RESTful Web服务
本指南将指导您使用Spring创建 "Hello, World "RESTful Web服务的过程。您将构建的内容你将建立一个服务,它将接受HTTP GET请求,地址是 {代码...} 它将响应一个JSON表示的问候语,如下面的列表所示。 {代码...} ...

Reco2阅读 1.6k

Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 14.2k评论 7

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5k评论 10

封面图
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等

似曾相识17阅读 29.6k评论 7

前端开发工具
前端教程阿西河前端教程丨一个助你成为全栈开发的网站前端高手进阶JavaScript利用js实现表单的校验KeyCode 查询表现代 JavaScript 教程时间戳(Unix timestamp)转换工具HTML minifierJavaScript代码压缩-js代码压...

寒青14阅读 2.6k

万字长文~vue+express+mysql带你彻底搞懂项目中的权限控制(附所有源码)
所谓的权限,其实指的就是:用户是否能看到,以及是否允许其对数据进行增删改查的操作,因为现在开发项目的主流方式是前后端分离,所以整个项目的权限是后端权限控制搭配前端权限控制共同实现的

水冗水孚11阅读 1.5k

[译]Vue.js + Astro 比 Vue SPA 更好吗?
在本文中,我将向您展示如何使用 Astro 构建基于 Vue 的应用程序,我们将了解其独特的架构如何带来比单页应用程序 (SPA) 更好的性能。

杭州程序员张张7阅读 4.1k评论 3

敢作敢为

4.6k 声望
541 粉丝
宣传栏