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函数！

让我们继续更上一层楼！