计算属性的getter和setter

Posted 2020-11-25 yizhiran

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 值的代码。