「Vue computed與methods之差異，以及getter/setter」相關筆記
2021-07-25 18:02 Vue JavaScript
總結
此篇為參考 Vue.js 官方文件與其他網路資源後，記錄 computed 與 methods 差異、以及 getter/setter 相關筆記
環境
Vue.js: 2.X筆記
computed
- Computed properties are cached based on their reactive dependencies.
- A computed property will only re-evaluate when some of its reactive dependencies have changed.
- This also means the following computed property will never update, because
Date.now()is not a reactive dependency.computed: { now () { return Date.now() } }
小總結：
- 除非 computed 依存的變數內容有變，不然 computed 不會重新運算
- 只有在 computed 依存的變數改變時，computed 才會重新計算／回傳結果
- 上述示範的
now()永遠不會更新其回傳的內容，因為now()中的Date.now()並非 reactive dependency
reactive dependency
const vm = new Vue({
data: {
a: 1
}
})
// vm.a is reactive
vm.b = 2
// vm.b is NOT reactiveA property must be present in the data object in order for Vue to convert it and make it reactive.
const vm = new Vue({
data: {
// declare message with an empty value
message: ''
},
template: '<div>{{ message }}</div>'
})
// set `message` later
vm.message = 'Hello!'Vue doesn’t allow dynamically adding root-level reactive properties, you have to initialize Vue instances by declaring all root-level reactive data properties upfront, even with an empty value.
小總結：需要由 Vue 監視其內容是否改變的資料，一定要放在 Vue instance 的 data 物件中
computed VS methods
- A computed property will only re-evaluate when some of its reactive dependencies have changed.
- A method invocation will always run the function whenever a re-render happens.
參考Method vs Computed in Vue 討論串中 Giulio Bambini 的答案，可以觀察到「即使互動的按鈕僅更新到data.a的值，addToBmethod也會被呼叫」
而 computed property 依存的變數若沒有被更新，computed property 會直接回傳 cache 中的值，不會進行重運算
getter/setter (JavaScript Accessors)
<div id="demo">{{ fullName }}</div>data: {
firstName: 'Hello',
lastName: 'World',
fullName: 'Hello World'
},
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]
}
}
}- getter：提供計算後的值
- setter：設值，在以上範例中做的事情即是在
fullName的值被修改時，把fullName的值拆開並設定firstName與firstName的值
MDN 對 getter/setter 的定義：
- getter: the
getsyntax binds an object property to a function that will be called when that property is looked up.- Sometimes it is desirable to allow access to a property that returns a dynamically computed value, or you may want to reflect the status of an internal variable without requiring the use of explicit method calls.
- In JavaScript, this can be accomplished with the use of a getter.
- setter: the
setsyntax binds an object property to a function to be called when there is an attempt to set that property.- In JavaScript, a setter can be used to execute a function whenever a specified property is attempted to be changed.
const obj = { counter : 0 }
// Define setters
Object.defineProperty(obj, "reset", {
get: function () { this.counter = 0 }
})
Object.defineProperty(obj, "increment", {
get: function () { this.counter++ }
})
Object.defineProperty(obj, "decrement", {
get: function () { this.counter-- }
})
Object.defineProperty(obj, "add", {
set: function (value) { this.counter += value }
})
Object.defineProperty(obj, "subtract", {
set: function (value) { this.counter -= value }
})
obj.reset // { counter : 0 }
obj.add = 5 // { counter : 5 }
obj.subtract = 1 // { counter : 4 }
obj.increment // { counter : 5 }
obj.decrement // { counter : 4 }