计算属性的getter和setter

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

上一篇:(VueJs)计算属性和methods的对比


下一篇:2.计算属性与监听器