计算属性

通过使用计算属性，您可以将复杂的逻辑封装到一个可重用的功能中，从而使组件更加简洁和可维护。它们还能够自动进行依赖追踪，以确保计算得到的值始终与依赖项保持同步。

在 Vue 3 中，计算属性被引入为计算的一部分 API，以便更好地与 Composition API 进行集成。计算属性允许您基于其他响应式状态（如 data、props 或其他计算属性）计算出新的值。

使用方式

使用 Vue 3 中的计算属性非常简单，可以按照以下步骤进行操作：

首先，确保已经从 Vue 库中导入所需的函数：

javascript

import { computed, reactive } from "vue";

创建具有响应性的数据对象：

javascript

const data = reactive({
  firstName: "Alice",
  lastName: "Smith",
});

使用computed()函数定义计算属性，并传递一个 getter 函数，该函数计算并返回所需的值：

javascript

const fullName = computed(() => {
  return `${data.firstName} ${data.lastName}`;
});

现在，您可以像访问普通数据属性一样访问计算属性。计算属性具有一个名为value的属性用来访问其计算结果：

javascript

console.log(fullName.value); // 输出 "Alice Smith"

计算属性将自动追踪其依赖项（在此示例中是firstName和lastName）。每当依赖项发生变化时，计算属性将立即重新计算其值。例如，如果我们修改firstName：

javascript

data.firstName = "Bob";
console.log(fullName.value); // 输出 "Bob Smith"

基础示例

下面是一个基础示例，展示了如何在 Vue 3 中使用计算属性：

HTML:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue 3 Computed Property Example</title>
  </head>
  <body>
    <div id="app">
      <h1>Full Name:</h1>
      <p>{{ fullName }}</p>

      <h2>Change First Name:</h2>
      <input v-model="firstName" />

      <h2>Change Last Name:</h2>
      <input v-model="lastName" />
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="app.js"></script>
  </body>
</html>

JavaScript (app.js):

javascript

import { createApp, ref, computed } from "vue";

const app = createApp({
  setup() {
    const firstName = ref("Alice");
    const lastName = ref("Smith");

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

    return {
      firstName,
      lastName,
      fullName,
    };
  },
});

app.mount("#app");

在上面的示例中，使用 data() 方法定义了两个响应式数据属性：firstName 和 lastName。

可以通过 v-model 指令绑定到 firstName 和 lastName，从而实现动态改变原始数据，并观察计算属性的更新。

当用户在输入框中更改 firstName 或 lastName 时，计算属性 fullName 会自动更新，并在页面上展示最新的全名。

计算属性缓存 vs 方法

在 Vue 3 中，计算属性和方法都可以用于根据响应式状态计算出新的值。它们有各自的特点和应用场景。

计算属性缓存：

计算属性具有缓存机制，只有当其依赖的响应式状态发生变化时，才会重新计算。
当多次访问同一个计算属性时，会直接返回缓存的值，而不会每次都重新计算。
计算属性适合用于根据多个响应式状态进行复杂计算的场景，或者需要频繁访问的计算结果。

示例：

javascript

import { computed } from "vue";

const data = reactive({
  firstName: "Alice",
  lastName: "Smith",
});

const fullName = computed(() => {
  return `${data.firstName} ${data.lastName}`;
});

方法：

方法没有缓存机制，每次调用方法时都会重新执行方法体内的代码。
方法适合用于执行一些较复杂的操作、触发副作用、响应用户事件等。

示例：

javascript

import { reactive } from 'vue';

const data = reactive({
  firstName: 'Alice',
  lastName: 'Smith'
});

methods: {
  getFullName() {
    return `${this.data.firstName} ${this.data.lastName}`;
  }
}

选择使用计算属性还是方法取决于具体的场景和需求：

如果需要在模板中多次使用计算的结果，并且希望利用缓存机制节省计算开销，那么选择计算属性更合适。
如果只需要在某个特定情况下调用并执行一段逻辑，或者需要执行一些异步操作，那么使用方法更为适合。

需要注意的是，无论是计算属性还是方法，都能够实现相同的功能，这取决于您的具体需求和设计。同时，Vue 3 还提供了更灵活的 Composition API，可以根据实际情况选择使用计算属性、方法还是自定义的函数来处理响应式状态。

计算属性 ​

使用方式 ​

基础示例 ​

计算属性缓存 vs 方法 ​

计算属性

使用方式

基础示例

计算属性缓存 vs 方法