青少年编程与数学 02-006 前端开发框架VUE 09课题、计算属性

一、计算属性
- - 特点
  - 使用场景
  - 定义计算属性
  - 在模板中使用计算属性
  - 计算属性与方法的区别
  - [计算属性的 setter](#计算属性的 setter)
二、应用示例
- - `App.vue`

课题摘要:本文介绍了Vue.js中的计算属性，它是一种基于响应式数据自动重新计算值的特殊方法。计算属性具有缓存性，只有依赖的数据变化时才会重新计算，且它们是响应式的，可以在模板中直接使用。计算属性适用于需要根据现有数据派生状态、执行昂贵计算或在模板中使用复杂表达式的场景。文章通过一个简单的计算器应用示例，展示了如何使用Vue 3的组合式API和计算属性。在这个示例中，计算属性根据输入的数字和选择的操作计算结果，并且会在相关响应式数据变化时自动更新。这个示例说明了计算属性在状态管理和模板渲染中的高效性和便捷性。

一、计算属性

在 Vue.js 中，计算属性（Computed Properties）是一种特殊的方法，它们根据组件中响应式数据的变化自动重新计算值。计算属性非常类似于 JavaScript 中的 getter，但是它们是响应式的，这意味着当依赖的响应式数据变化时，计算属性也会自动更新。

特点

缓存性：计算属性是缓存的。只有当计算属性依赖的响应式数据变化时，计算属性才会重新计算。如果依赖的数据没有变化，返回的是之前的计算结果，这使得计算属性非常高效。
响应式：计算属性是响应式的，它们可以在模板中直接使用，就像普通的数据属性一样。
可观察性：计算属性依赖于响应式数据，当这些数据变化时，计算属性会自动更新。

使用场景

计算属性适用于以下场景：

当需要根据现有数据派生出一些状态时。
当需要执行一些昂贵的计算，并且只有当相关数据变化时才需要重新计算时。
当需要在模板中使用复杂的表达式，而这些表达式依赖于多个数据源时。

定义计算属性

在 Vue 组件中，计算属性定义在 computed 选项中：

javascript 复制代码

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    // 计算属性 fullName 是响应式的
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};

在这个例子中，fullName 是一个计算属性，它依赖于 firstName 和 lastName。当 firstName 或 lastName 发生变化时，fullName 会自动更新。

在模板中使用计算属性

计算属性可以在模板中直接使用，就像使用数据属性一样：

vue 复制代码

<template>
  <div>
    <p>{{ fullName }}</p>
  </div>
</template>

计算属性与方法的区别

计算属性：是基于它们的响应式依赖进行缓存的，只有当依赖项变化时才会重新计算。
方法：每次调用时都会执行函数，不管依赖项是否变化。

计算属性的 setter

计算属性也可以定义 setter，使其成为可写的：

javascript 复制代码

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      // getter
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      // setter
      set(newValue) {
        [this.firstName, this.lastName] = newValue.split(' ');
      }
    }
  }
};

在这个例子中，fullName 计算属性是可写的，当设置 fullName 时，setter 会被调用，并将新的值分割成 firstName 和 lastName。

计算属性是 Vue 中一个强大的功能，它使得状态管理和模板渲染变得更加简洁和高效。

二、应用示例

下面是一个使用 Vue 3 组合式 API 的完整示例，其中包含了计算属性。这个示例是一个简单的计算器应用，它允许用户输入两个数字，并根据选择的操作（加法、减法、乘法、除法）计算结果。

`App.vue`

vue 复制代码

<template>
  <div>
    <h1>Simple Calculator</h1>
    <input type="number" v-model="num1" placeholder="Enter first number">
    <input type="number" v-model="num2" placeholder="Enter second number">
    <select v-model="operation">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <button @click="calculate">Calculate</button>
    <p>Result: {{ result }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const num1 = ref(0);
const num2 = ref(0);
const operation = ref('+');

// 计算属性：根据输入的数字和选择的操作计算结果
const result = computed(() => {
  const value1 = parseFloat(num1.value);
  const value2 = parseFloat(num2.value);
  switch (operation.value) {
    case '+':
      return value1 + value2;
    case '-':
      return value1 - value2;
    case '*':
      return value1 * value2;
    case '/':
      return value2 !== 0 ? value1 / value2 : 'undefined';
    default:
      return 'Invalid operation';
  }
});

// 方法：执行计算
function calculate() {
  // 计算结果已经在计算属性中处理，这里可以执行其他逻辑（如果需要）
}
</script>

<style>
/* 样式可以根据需要添加 */
input, select, button {
  margin: 10px;
  padding: 8px;
}
</style>

在这个示例中：

使用 ref 创建了两个响应式数据 num1 和 num2，用于输入两个数字。
使用 ref 创建了一个响应式数据 operation，用于选择操作符。
使用 computed 创建了一个计算属性 result，它根据 num1、num2 和 operation 的值计算结果。
使用 v-model 实现了输入框和选择框的双向数据绑定。
使用 v-on 监听按钮点击事件，并在点击时调用 calculate 方法。

计算属性 result 会在 num1、num2 或 operation 的值发生变化时自动更新。这个示例展示了如何使用 Vue 3 的组合式 API 和计算属性来创建一个简单的计算器应用。