摘要：對于一個每秒幀的狀態改變，清楚的知道那些節點被影響，更新它們，而避免那些不受影響節點的更新。而臟檢查或差分，往往會觸發整個子樹的重新渲染。截至目前還未發現開放和可復現的。

原文地址：http://blog.evanyou.me/2015/1...

vuejs是一個建造web界面的庫。配合其他工具，你也可以稱它為“框架”（盡管它更多的看起來像是一堆配合很好的工具集）。如果你從未聽說過vue，你可能會想，好吧，我懂了，又一個js框架。事實上Vue并不新，因為我兩年以前就開始了它的原型開發，第一個正式版發布于2014年2月，隨后不斷更新進步，至今已經有很多產品在使用Vue。

那么，Vue到底是干嘛的呢？究竟什么造就了它的與眾不同？當這個地球上已經有了angular，ember和react，我為什么還要學習vue？通過帶你深入vuejs的設計概念，本篇文章希望能給你一些靈感， 我相信讀后你自會有自己的答案。

保證數據和展現的一致很難，是嗎？

我們先從最基本的任務開始，展示數據，假設我們有如下一個簡單的對象

var object = {
  message: "Hello world!"
}

模板：

  {{ message }}

在Vue里面我們這樣將它們結合：

new Vue({
  el: "#example",
  data: object
})

看起來我們僅僅渲染了模板，當我們更新了數據，我們要如何去更新界面呢？什么都不用做，因為Vue已經把這個對象變成了響應式的，當你更改了object.message， html會自動更新。更重要的是，你無須擔心如果超時去調用$apply，或者setState()，監聽Store的事件，或者創建框架監聽屬性，比如ko.observable()或 Ember.Object.create()，vue就這樣簡單的運作。

Vue同時提供了一個完美的計算屬性(computed properties)：

var example = new Vue({
  data: {
    a: 1
  },
  computed: {
    b: function () {
      return this.a + 1
    }
  }
})

// both a & b are proxied on the created instance.
example.a // -> 1
example.b // -> 2
example.a++
example.b // -> 3

計算屬性b追蹤a，自動同步，不需要聲明a為b的依賴。
另外，簡單類模式（POJO-based）允許很簡單的整合任意類型的數據資源或狀態管理方案，比如，這里有一個整合了vuejs組件和Rxjs的觀察模塊，僅僅用了30行代碼。

數據綁定對小型demo來說還不錯，那么大型應用呢？

對于結構復雜的界面，vue采用了與react十分類似的方案：從上至下的組件化。我們先來看一個可復用組件的例子:

var Example = Vue.extend({
  template: "
{{ message }}
",
  data: function () {
    return {
      message: "Hello Vue.js!"
    }
  }
})

// register it with the tag 
Vue.component("example", Example)

現在我們就可以用這個組件在其他模版里，就如同一個自定義頁面元素：

一個組件包含另外一些組件，它們形成一個UI樹。為了保證它們之間的組合性，Vue組件同時包含如下內容：

定義如何從父級獲取數據，使用 props

發布自定義事件，以便在父級作用域中觸發它

組合父級引入內容，使用

這里不過多探討細節，感興趣請查看官網。

21世紀了，我們不應該把所有東西都放在全局作用域里

我們使用打包工具（Webpack, Browerify）以及 ES2015.每個組件都是一個模塊，Vue會自動把配置對象轉換到組件結構里，所以我們只需要在模塊里簡單的輸出如下內容：

// ComponentA.js
export default {
  template: "
{{ message }}
",
  data () {
    return {
      message: "Hello Vue.js!"
    }
  }
}

// App.js
import ComponentA from "./ComponentA"

export default {
  // use another component, in this scope only.
  // ComponentA maps to the tag 
  components: { ComponentA },
  template: `
    

      
Now I"m using another component.
      
    
  `
}

看起來不錯是嗎？如果我們能講頁面的模版，樣式和js邏輯封裝到一個文件里會更好！尤其是他們本身還有各自的語法高亮。實用工具諸如 Webpack + vue-loader 或者 Browerify + vueify，我們可以這么做：

什么？我們是不是重新定義了web組件？但是css依舊是全局的。

是的，一定程度上我們重新定義了web組件，除了：

我們也可以進行css封裝，只需添加scoped屬性到