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

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

vuejs是一個建造web界面的庫。配合其他工具，你也可以稱它為“框架”（盡管它更多的看起來像是一堆配合很好的工具集）。如果你從未聽說過vue，你可能會想，好吧，我懂了，又一個js框架。事實(shí)上Vue并不新，因?yàn)槲覂赡暌郧熬烷_始了它的原型開發(fā)，第一個正式版發(fā)布于2014年2月，隨后不斷更新進(jìn)步，至今已經(jīng)有很多產(chǎn)品在使用Vue。

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

保證數(shù)據(jù)和展現(xiàn)的一致很難，是嗎？

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

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

模板：

  {{ message }}

在Vue里面我們這樣將它們結(jié)合：

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

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

Vue同時(shí)提供了一個完美的計(jì)算屬性(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

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

數(shù)據(jù)綁定對小型demo來說還不錯，那么大型應(yīng)用呢？

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

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

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

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

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

定義如何從父級獲取數(shù)據(jù)，使用 props

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

組合父級引入內(nèi)容，使用

這里不過多探討細(xì)節(jié)，感興趣請查看官網(wǎng)。

21世紀(jì)了，我們不應(yīng)該把所有東西都放在全局作用域里

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

// 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邏輯封裝到一個文件里會更好！尤其是他們本身還有各自的語法高亮。實(shí)用工具諸如 Webpack + vue-loader 或者 Browerify + vueify，我們可以這么做：

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

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

我們也可以進(jìn)行css封裝，只需添加scoped屬性到