Vue3 setup中computed计算属性的使用

作者：温新

时间：2021-08-22

hi，我是温新，一名PHPer

在setup中，要使用computed计算属性就必须先导入computed。

setup中计算属性的基础使用

<div id="app">
	<button @click="addCount">{{ count }}</button>
	<p>计算属性后的值：{{ countComputed }}</p>
</div>

<script>
	const app = Vue.createApp({
		setup() {
			const {ref, computed} = Vue;
			let count = ref(0);

			let addCount = () => {
				count.value+=1;
			}

			// 计算属性
			let countComputed = computed(()=>{
				// 计算属性初始化加10
				return count.value + 10;
			});

			return {count,addCount, countComputed}
		}
	});
	const vm = app.mount('#app');
</script>

setup中计算属性中的get/set

使用get/set时，computed传入的参数就是一个对象了。

<div id="app">
	<button @click="addCount">{{ count }}</button>
	<p>计算属性后的值：{{ countComputed }}</p>
</div>

<script>
	const app = Vue.createApp({
		setup() {
			const {ref, computed} = Vue;
			let count = ref(0);

			let addCount = () => {
				count.value+=1;
			}

			// 计算属性
			let countComputed = computed({
				// 获取数据时调用
				get: () => {
					return count.value + 10;
				},
				// 设置数据时调用
				set: () => {
					return count.value = 20;
				}
			});

			// 3秒后对数据进行修改
			setTimeout(()=>{
				countComputed.value = 30;
			},3000);

			return {count,addCount, countComputed}
		}
	});
	const vm = app.mount('#app');
</script>

我是温新

每天进步一点，就一点点