计算属性

计算属性 computed

计算属性怎么用

<template>
	<div>{{ getMsg }}</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: 'I am '
			};
		},
		computed: {
			getMsg() {
				return this.msg + 'girl!';
			}
		}
	}
</script>

计算属性中的setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ，当调用getMsg='You are’时，msg也会发生变化

<template>
	<div>{{ getMsg }}</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: 'I am '
			};
		},
		computed: {
			getMsg: {
				get() {
					return this.msg + 'girl!';
				},
				set(newMsg) {
					this.msg = newMsg;
				}
			}
		}
	}
</script>

使用计算属性的优点

当多次调用计算属性的方法时，如果this.msg的值发生变化，getMsg函数才会重新计算值，如果this.msg没有发生值变化，getMsg会立即之前计算的值