前言：
本文主要是針對vue.js計算屬性computed中的getter和setter的一些理解肛宋。
簡單介紹
在 Vue 中汁果，computed 的屬性可以被視為是 data 一樣山卦，可以讀取和設(shè)值聚霜，因此在 computed 中可以分成 getter（讀刃濉） 和 setter（設(shè)值）噩茄，一般情況下是沒有 setter 的，computed 預(yù)設(shè)只有 getter 续徽，也就是只能讀取蚓曼，不能改變設(shè)值。
vue.js計算屬性默認只有 getter钦扭，因為是默認值所以我們也常常省略不寫纫版，如下代碼：
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
其實computed里的代碼完整的寫法應(yīng)該是：
computed: {
fullName: {
get(){
return this.firstName + ' ' + this.lastName
}
}
}
計算屬性getter的觸發(fā)時間
<template>
<div id="demo">
<p> {{ fullName }} </p>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
</div>
</template>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'zhang',
lastName: 'san'
},
computed: {
fullName: function () {
console.log('computed getter...')
return this.firstName + ' ' + this.lastName
}
},
updated () {
console.log('updated')
}
})
如果我們改變上邊代碼里的2個輸入框的值firstName或者lastName，都會觸發(fā)computed以及updated ()客情，也就是說會執(zhí)行： console.log('computed getter...')和console.log('updated') (用來驗證是不是執(zhí)行了其弊，沒有其他意思)
需要注意的是，不是說我們更改了getter里使用的變量膀斋，就會觸發(fā)computed的更新瑞凑，前提是computed里的值必須要在模板里使用才行。怎么理解呢概页？
如下代碼，我們把template里的fullName 注釋掉：
<template>
<div id="demo">
<!-- <p> {{ fullName }} </p> -->
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
</div>
</template>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'zhang',
lastName: 'san'
},
computed: {
fullName: function () {
console.log('computed getter...')
return this.firstName + ' ' + this.lastName
}
},
updated () {
console.log('updated')
}
})
就算我們更改了firstName以及l(fā)astName都不會觸發(fā)computed 中的 getter 中的console.log('computed getter...')练慕，而只會觸發(fā)console.log('updated')
計算屬性settter
<template>
<div id="demo">
<p> {{ fullName }} </p>
<input type="text" v-model="fullName">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
</div>
</template>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'zhang',
lastName: 'san'
},
computed: {
fullName: {
//getter 方法
get(){
console.log('computed getter...')
return this.firstName + ' ' + this.lastName
}惰匙，
//setter 方法
set(newValue){
console.log('computed setter...')
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
return this.firstName + ' ' + this.lastName
}
}
},
updated () {
console.log('updated')
}
})
在template 中，我們可以看到铃将，input 是直接綁 v-model="fullName"项鬼，如果我們這里直接修改了fullName的值，那么就會觸發(fā)setter劲阎，同時也會觸發(fā)getter以及updated函數(shù)绘盟。其執(zhí)行順序是setter -> getter -> updated，如下：
console.log('computed setter...')
console.log('computed getter...')
console.log('updated')
這里需要注意的是，并不是觸發(fā)了setter也就會觸發(fā)getter龄毡，他們兩個是相互獨立的吠卷。我們這里修改了fullName會觸發(fā)getter是因為setter函數(shù)里有改變firstName 和 lastName 值的代碼。也就是說我們?nèi)绻⑨尩羯线叺膕etter中修改firstName 和lastName的代碼后就不會執(zhí)行g(shù)etter沦零，如下：
set(newValue){
console.log('computed setter...')
// var names = newValue.split(' ')
// this.firstName = names[0]
// this.lastName = names[names.length - 1]
return this.firstName + ' ' + this.lastName
}
會執(zhí)行祭隔，且順序如下
console.log('computed setter...')
console.log('updated')
