vue computed计算属性getter 与setter的使用

getter 读调用
setter 写调用

计算属性的 setter
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter

getter的使用，如下：

<template>
	<div class="page">
		<p>{{firstName}}</p>
		<p>{{lastName}}</p>
		<p>{{fullName}}</p>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				firstName: 'Foo',
				lastName: 'Bar'
			}
		},
		computed: {
			fullName: {  //仅读
				get: function() {
					return this.firstName + ' ' + this.lastName
				}
			}
		}
	}
</script>

setter的使用，如下：

<template>
	<div class="page">
		<ul>
			<li v-for='(item,index) in tableData' :class='{activeClass:currentIndex == index}' @click='changeCurrent(index)'>
				第{{item.id}}个：{{item.title}}
			</li>
		</ul>
		<h5>选中的标题：{{currentTitle}}</h5>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				tableData: [{
						id: 1,
						title: 'title1',
					},
					{
						id: 2,
						title: 'title2'
					},
					{
						id: 3,
						title: 'title3'
					}
				],
				currentIndex: 0
			}
		},
		//计算属性
		computed: {
			currentTitle: {
				// getter 读调用
				get: function() {
					console.log('getter666')
					return this.tableData[this.currentIndex].title;
				},
				// setter  写调用
				set: function(index) {
					console.log('setter666')
					this.currentIndex = index;
				}
			}
		},
		methods: {
			changeCurrent(index) {
				this.currentTitle = index;
			}
		}
	}
</script>
<style>
	.page {
		margin: 20px;
	}

	ul li {
		list-style: none;
		cursor: pointer;
		line-height: 30px;
	}

	.activeClass,
	h5 {
		color: red;
	}
</style>