Computed Properties & Watch

Computed Properties

模版可以放運算邏輯，但是不建議放太複雜的邏輯，會降低可讀性

有get和set可以使用

data，就是監聽自己的變化進行更新，computed的get就是監聽很多變數的變化進行更新 - by curt

//javascript
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

< p >Original message: "{ { data value } }"< /p >

< p >Computed reversed message: "{ { function name } }"< /p >

Computed Caching vs Methods

computed比method快！computed有「快取住結果」，method沒有。

now: "{ { now } }"

nowC: "{ { nowC } }"

nowM: "{ { nowM() } }"

Computed vs Watched Property

watching dataKey1, when dataKey1 change, update dataKey2

{ { key } }

    watch: {
    dataKey1: function (dataValue1) {
        this.dataKey2 = dataValue1 + ' ' + this.dataKey3
    }
}

watch: {
    firstName: function (val) {
        this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
        this.fullName = this.firstName + ' ' + val
    }
}

fullName: { { fullName } }

fullNameC: { { fullNameC } }

firstName: { { firstName } }

lastName: { { lastName } }

Setter of Computed

像C#這樣的用法

computed: {
    fullName: {
        // getter
        get: function () {
            return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
        }
    }
}

fullName: { { fullName } }

firstName: { { firstName } }

lastName: { { lastName } }

Watchers

非watch不可的時候。

This is most useful when you want to perform asynchronous or expensive operations in response to changing data

所以...