setter:设置值时触发,
getter:获取值时触发,
vue中computed属性默认为getter,但是它还提供了setter,可以由因变量去影响自变量。
1 computed: { 2 fullName: { 3 // getter 4 get: function () { 5 return this.firstName + ' ' + this.lastName 6 }, 7 // setter 8 set: function (newValue) { 9 var names = newValue.split(' ') 10 this.firstName = names[0] 11 this.lastName = names[names.length - 1] 12 } 13 } 14 }
需要注意的是,不是说我们更改了getter里使用的变量,就会触发computed的更新,前提是computed里的值必须要在模板里使用才行。如下:
1 <template> 2 <div id="demo"> 3 <!-- <p> {{ fullName }} </p> --> 4 <input type="text" v-model="firstName"> 5 <input type="text" v-model="lastName"> 6 </div> 7 </template> 8 9 var vm = new Vue({ 10 el: '#demo', 11 data: { 12 firstName: 'zhang', 13 lastName: 'san' 14 }, 15 computed: { 16 fullName: function () { 17 console.log('computed getter...') 18 return this.firstName + ' ' + this.lastName 19 } 20 }, 21 updated () { 22 console.log('updated') 23 } 24 })
注释div中的fullName语句,当firstName或者lastName改变时,console.log('computed getter...')不会改变。
还需要注意的是,并不是触发了setter也就会触发getter,他们两个是相互独立的。我们这里修改了fullName会触发getter是因为setter函数里有改变firstName 和 lastName 值的代码。