Vue回頭路（一）

 

 

1.計算屬性

 <div id="example">
   <p>Original message: "{{ message }}"</p>
   <p>Computed reversed message: "{{ reversedMessage }}"</p>
 </div>

 var vm = new Vue({
   el: '#example',
   data: {
     message: 'Hello'
  },
   computed: {
     // 計算屬性的 getter
     reversedMessage: function () {
       // `this` 指向 vm 實例
       return this.message.split('').reverse().join('')
    }
  }
 })

Computed	計算屬性是基於它們的響應式依賴進行緩存的只在相關響應式依賴發生改變時它們纔會從新求值。這就意味着只要 message 尚未發生改變，屢次訪問 reversedMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。	簡單來講呢，就是計算屬性的結果是能夠進行緩存的。 1. 適用於一些重複使用數據或複雜及費時的運算。咱們能夠把它放入computed中進行計算, 而後會在computed中緩存起來, 下次就能夠直接獲取了。 2. 若是咱們須要的數據依賴於其餘的數據的話, 咱們能夠把該數據設計爲computed中。
Method	當檢測到數值存在變化後，直接調用對應的方法，進行計算。可是不緩存結果。	Method並不是是響應式的。只有當Dom中發生一些事件須要做出迴應時，或者被一些其餘指令調用
Watch	設置對某個屬性進行監聽，當檢測到屬性變化時出發對應的規則	只能檢測一個屬性，可是通常來講 Try to use computed properties for everything. If it won’t work as a computed property, use a watcher.

 

譬如1中所舉的例子，咱們經過methods或者watch也能夠實現相同的效果，那麼他們的區別在哪呢？

2.Compted || Methods || Watch

 

如上，當message發生變化之後，因爲data的message已經和當前的vm.message 進行綁定，故也會修改vm.message 的值，同時 全部依賴於該值的綁定都會刷新，所以致使觸發vm.reversedMessage