前言：
本文主要是针对vue.js计算属性computed中的getter和setter的一些理解。
简单介绍
在 Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值，因此在 computed 中可以分成 getter（读取） 和 setter（设值），一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值。
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里的代码完整的写法应该是：
computed: { fullName: { get(){ return this.firstName + ' ' + this.lastName } } }
计算属性getter的触发时间
<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，都会触发computed以及updated ()，也就是说会执行： console.log('computed getter...')和console.log('updated') (用来验证是不是执行了，没有其他意思)
需要注意的是，不是说我们更改了getter里使用的变量，就会触发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以及lastName都不会触发computed 中的 getter 中的console.log('computed getter...')，而只会触发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的值，那么就会触发setter，同时也会触发getter以及updated函数。其执行顺序是setter -> getter -> updated，如下：
console.log('computed setter...') console.log('computed getter...') console.log('updated')
这里需要注意的是，并不是触发了setter也就会触发getter，他们两个是相互独立的。我们这里修改了fullName会触发getter是因为setter函数里有改变firstName 和 lastName 值的代码。也就是说我们如果注释掉上边的setter中修改firstName 和lastName的代码后就不会执行getter，如下：
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 }
会执行，且顺序如下
console.log('computed setter...') console.log('updated')
