响应式基础
computed函数
0 前言
前面我们学会了用reactive实现一个响应式对象。
那假设现在我们现在有一个响应式变量count,要让他实现下面的场景:
当count加1时,另一个变量doublecount变为count的两倍
我们如何实现?直接赋值可以吗?代码如下
<template>
<div>
<p>当前数字是: {{ count }}</p>
<p>两倍数字是: {{ doubleCount }}</p>
<button @click="increment">加一</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
// 直接赋值为count*2
const doubleCount = count.value * 2;
const increment = () => {
count.value++;
};
</script>
我们看一下效果
很显然是不行的,那这种联动,其实就要用到我们今天的新语法,computed。
1 语法
import { computed } from 'vue';
const doubleCount = computed(() => /* 计算逻辑 */ );
computed 函数用于创建一个计算属性,它会根据其依赖的响应式数据自动计算其值,并且进行缓存,仅在相关依赖变化时才重新计算。
2 示例
我们看一下通过computed修改后的代码,
<template>
<div>
<p>Count is: {{ count }}</p>
<p>Double Count is: {{ doubleCount }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
const increment = () => {
count.value++;
};
</script>
const doubleCount = computed(() => count.value * 2);
通过上述语句声明一个计算变量,变量的值为当前响应变量的count的值的两倍,所以当count变化的时候doubleCount也会自动变化。
效果如下,
我们可以看到,我们可以通过computed函数,非常高效快捷的实现对响应式变量的监控而数值的联动,从而应对复杂的应用场景。
3 结语
我们了解了如何通过computed监控数值变化并实现变量联动。
虽然computed可以高效的实现变量之间的联动,但是它无法在联动的同时进行别的业务逻辑操作,无法在进行一些页面修改或者调用其它函数的操作,存在一定的限制性,那如果我们要联动的同时,可以触发我们的一些语句该怎么办?
那就要看我们watch函数!
让我们继续更上一层楼!