标签：dem v-model model new 变量 col last zha return
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 值的代码。
标签：dem v-model model new 变量 col last zha return
原文地址：https://www.cnblogs.com/yizhiran/p/12242633.html
