Vue 中计算属性、监听属性与函数方法的区别详解-优快云博客

在 Vue 中，计算属性、监听属性和函数方法各自承担不同的职责，理解它们的区别和适用场景对于高效开发至关重要。

一、计算属性（Computed Properties）

‌是什么‌：

计算属性是基于它们的依赖进行缓存的属性。计算属性只有在它的相关依赖发生改变时才会重新求值。这有助于避免不必要的计算和渲染，提高应用性能。

‌干什么用的‌：

计算属性通常用于处理模板中的复杂逻辑，尤其是那些依赖于其他响应式数据的逻辑。通过计算属性，我们可以将复杂的逻辑从模板中抽离出来，使模板更加简洁和易于维护。

‌代码示例‌：

<template>
  <div>
    <p>原始消息: "{{ message }}"</p>
    <p>反转后的消息: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
};
</script>

何时使用‌：

当需要基于其他数据派生出新数据时。
当派生数据需要被多个组件或模板部分使用时。
当派生数据的计算逻辑较为复杂时。

‌何时避免‌：

当数据不需要派生，直接使用即可。
当派生数据的计算非常简单，且只在一个地方使用时。

计算属性适用于派生数据且计算逻辑复杂的场景。

二、监听属性（Watch Properties）

‌是什么‌：

监听属性用于观察和响应 Vue 实例上的数据变动。当需要执行异步或开销较大的操作时，监听属性非常有用。

‌干什么用的‌：
监听属性通常用于执行副作用操作，如数据变化后的异步请求、手动更改 DOM 属性等。

‌代码示例‌：

<template>
  <div>
    <p>问答: "{{ question }}"</p>
    <p>答案: "{{ answer }}"</p>
    <button @click="fetchAnswer">获取答案</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      question: '',
      answer: '问题通常来自……（默认提示）'
    };
  },
  watch: {
    question(newQuestion) {
      if (newQuestion.includes('?')) {
        this.fetchAnswer(); // 实际上，这里我们可能想用方法调用或防抖，但为了示例，我们直接调用
      }
    }
    // 更常见的做法是使用一个方法来处理，并通过事件或方法调用触发，但watch也可以用于此目的（尽管可能不是最佳）
    // 更好的做法可能是将fetchAnswer作为一个方法，并在@click和watch中都调用它（如果需要的话），但这里为了展示watch
    // 我们假设有一个场景，当question变化时自动获取答案（比如输入框实时搜索）
    // 但注意，实际中可能需要防抖
  },
  methods: {
    // 这里我们为了示例的完整性，将fetchAnswer放在methods中，但在watch中直接调用它可能不是最佳实践
    // 更好的做法是在watch中设置一个标志，然后在methods中根据标志执行操作，或者直接在methods中处理
    // 但为了保持示例的简单性，我们暂时这样写
    async fetchAnswer() { // 注意，这里我们将其改为async以便演示异步，但在watch中直接调用async函数可能不是最佳
      // 实际上，我们可能不想在watch中直接调用异步函数，因为我们需要处理加载状态、错误等
      // 所以，更好的做法可能是使用一个计算属性或方法来触发，或者使用一个专门的库如lodash的debounce
      // 但由于这是一个关于watch的示例，我们简化处理
      this.answer = '思考中...';
      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.answer = '答案就是……（示例）';
    }
    // 实际上，对于上面的需求，我们可能更倾向于使用一个输入框和@input事件，然后结合防抖函数来调用fetchAnswer
  }
  // 修正后的示例可能如下（但为了不改变原结构，我们保留原代码，仅作为watch的示例）
  // 更好的结构可能是：
  // - data中有question和answer
  // - watch question，但使用防抖函数来调用fetchAnswer（防抖函数可能放在methods中或作为watch的handler的一部分）
  // - 或者，使用一个计算属性来派生是否需要获取答案，但获取答案本身是异步的，所以可能还是需要watch或方法
};
// 由于上述示例可能引起混淆，我们提供一个更简单的watch示例，仅用于演示watch的基本用法
// 修正后的简单示例：
// export default {
//   data() { return { count: 0 }; },
//   watch: {
//     count(newVal, oldVal) {
//       console.log(`count从${oldVal}变到了${newVal}`);
//     }
//   }
// };
</script>
<!-- 
为了清晰，我们替换为上面的简单示例的说明，但保留原代码作为复杂（尽管可能不是最佳实践）的示例的参考 
实际中，对于问题答案的示例，我们可能会这样设计：
- 有一个输入框，v-model绑定到question
- 当question变化时，如果它包含'?'，则调用一个方法（可能通过watch的handler调用，但使用防抖）
- 该方法设置一个加载状态，并异步获取答案，然后更新answer
- 同时，我们可能有一个按钮来手动触发获取答案（如果不需要实时）
-->

更简单的watch示例（用于演示）‌：

export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count从${oldVal}变到了${newVal}`);
    }
  }
};

何时使用‌：

当需要在数据变化时执行异步或开销较大的操作时。
当需要观察某个数据的变化并做出相应响应时。

‌何时避免‌：

当响应逻辑非常简单，可以直接在模板或计算属性中处理时。
当需要避免不必要的重复执行时（如没有防抖处理的输入框实时搜索）。

监听属性适用于需要执行异步或开销较大操作的场景。

三、函数方法（Methods）

是什么‌：
函数方法是 Vue 实例上定义的函数，用于处理用户输入、触发状态变更或执行其他操作。

‌干什么用的‌：
函数方法通常用于响应用户事件（如点击、输入等），或者执行一些不直接与数据派生相关的操作。

‌代码示例‌：

<template>
  <div>
    <p>点击次数: {{ clickCount }}</p>
    <button @click="incrementClickCount">点击我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clickCount: 0
    };
  },
  methods: {
    incrementClickCount() {
      this.clickCount++;
    }
  }
};
</script>

何时使用‌：

当需要响应用户事件时。
当需要执行一些不直接与模板渲染相关的操作时。

‌何时避免‌：

当操作可以或应该通过计算属性或监听属性来处理时。
当方法过于复杂，难以维护或测试时。

函数方法适用于响应用户事件或执行不直接与模板渲染相关操作的场景。

四、计算属性、监听属性与函数方法的区别

‌缓存性‌：
- 计算属性：基于它们的依赖进行缓存，只有当依赖发生变化时才重新计算。
- 监听属性：不缓存，每次变化时都会执行回调函数。
- 函数方法：不缓存，每次调用都会执行。
‌用途‌：
- 计算属性：用于派生数据，简化模板中的复杂逻辑。
- 监听属性：用于观察数据变化并执行副作用操作。
- 函数方法：用于响应用户事件或执行特定操作。
‌执行时机‌：
- 计算属性：在模板渲染时自动求值，且仅当依赖变化时重新求值。
- 监听属性：在数据变化时执行，可以是同步或异步的。
- 函数方法：在调用时执行。

五、适用场景总结

特性/场景	计算属性	监听属性	函数方法
‌缓存性‌	缓存结果	无缓存	无缓存
‌主要用途‌	派生数据，简化模板逻辑	观察数据变化，执行副作用	响应用户事件，执行特定操作
‌执行时机‌	模板渲染时，依赖变化时重新求值	数据变化时	方法被调用时
‌适用场景‌	复杂数据派生，多处使用	异步操作，数据变化响应	用户交互，特定操作执行
‌避免场景‌	简单数据直接使用，无需派生	简单逻辑，无需副作用	复杂逻辑应拆分，避免大方法