vue3 computed 计算器

Vue 3中的计算属性（computed）是一种方便的方式来根据已有的数据计算出新的数据。它们可以在模板中像普通属性一样使用，并且会自动追踪其依赖的数据，只有当依赖的数据发生变化时，计算属性才会重新计算。

在Vue 3中，计算属性的定义方式与Vue 2有所不同。下面是一个示例：

import { computed } from 'vue';

export default {
  data() {
    return {
      num1: 10,
      num2: 5,
    };
  },
  computed: {
    sum() {
      return this.num1 + this.num2;
    },
    product: {
      get() {
        return this.num1 * this.num2;
      },
      set(value) {
        // 在这里可以对计算属性进行赋值操作
        this.num1 = value / this.num2;
      },
    },
  },
};

在上面的示例中，我们定义了两个计算属性：`sum`和`product`。`sum`计算属性返回`num1`和`num2`的和，而`product`计算属性则返回`num1`和`num2`的乘积。注意，在`product`计算属性中，我们还定义了一个setter函数，用于在对计算属性进行赋值时更新相关的数据。

使用计算属性时，可以像访问普通属性一样在模板中使用它们：

<template>
  <div>
    <p>Sum: {{ sum }}</p>
    <p>Product: {{ product }}</p>
  </div>
</template>

当`num1`或`num2`的值发生变化时，`sum`和`product`计算属性会自动重新计算并更新模板中的数据。