爲何vue.js一眼看上去很美?

對其餘框架我是佩服，對vue.js我則是愛。我就是一眼看上了vue.js,因而用它作各類東西，反反覆覆屢次，而後以爲有些融會貫通，而後，我稍微細的思量了下，到底vue.js靚麗在哪？

仍是上案例對比說明。此次的案例，UI看起來是：

一個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...