Vue computed get&set使用方法案例

1，get

<template>
	<div id="app">
		<p> {{msg}} </p>
		<p>计算属性computed {{testMsg}}</p>
		<button type="button" @click="updateTestMsg"> 改变msg的值</button>
	</div>
</template>

<script>
	export default {
		name: 'App',

		data() {
			return {
				msg: "100"
			}
		},
		computed: {
			// 使用 getter 属性的第一种方法
			// testMsg: function() {
			// 	return this.msg + "人"
			// }
			testMsg: {
				// 使用 getter 属性的第二种方法
				get() {
					console.log("调用getter属性")
					return this.msg + "人"
				},
			}
		},
	}
</script>

2，set

<template>
	<div id="app">
		<p> {{msg}} </p>
		<p>计算属性computed {{testMsg}}</p>
		<button type="button" @click="updateTestMsg"> 改变msg的值</button>
	</div>
</template>

<script>
	export default {
		name: 'App',

		data() {
			return {
				msg: "100"
			}
		},
		computed: {
			// 使用 getter 属性的第一种方法
			// testMsg: function() {
			// 	return this.msg + "人"
			// }
			testMsg: {
				// 使用 getter 属性的第二种方法
				get() {
					console.log("调用getter属性")
					return this.msg + "人"
				},

				// 使用 setter 属性的方法
				set(newValue) {
					console.log("调用setter属性", newValue)
					this.msg = newValue
				}

			}
		},

		methods: {
			// 触发 setter 的方法
			updateTestMsg() {
				this.testMsg = 200
			}
		}
	}
</script>