【八股系列】vue中计算属性computed和普通属性method的区别是什么？

本文主要是介绍【八股系列】vue中计算属性computed和普通属性method的区别是什么？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 计算属性computed

computed是基于它们的依赖项进行缓存的。如果依赖项没有发生变化，Vue.js 将返回缓存的结果，而不是重新计算。这可以大大提高性能，尤其是在处理复杂的计算时。
computed是只读的。一旦在模板中使用了计算属性，就不应该在组件中修改它的值。如果需要修改，可以将其转换为一个方法。
computed可以返回一个函数。这在需要在模板中使用函数式编程时很有用。例如，你可以使用 v-for 指令来循环执行一个函数，并返回一组结果。
computed不需要加小括号。computed可以向普通属性一样，直接使用，不需要额外加小括号调用。

2. 普通属性method

method在每次调用时都会重新执行。不生成缓存。
method需要加小括号调用。method每次使用时，都需要加小括号调用。

3. 应用场景

3.1. computed

复杂的计算: 如果你需要在模板中执行一个复杂的计算，并且这个计算涉及到多个响应式属性，那么使用计算属性是最合适的。
过滤/格式化数据: 计算属性可以用于对数据进行过滤或格式化，以便在模板中使用。
依赖于其他属性: 如果一个属性的值取决于其他属性，并且需要在多个地方使用，那么使用计算属性可以避免代码冗余。

3.2. method

事件处理: method 通常用于处理用户交互，例如点击事件、表单提交等。在事件处理函数中，可以调用 method 来执行相关的操作。
异步操作: method 也可以用于执行异步操作。例如，在 method 中可以调用 API、进行数据库查询等，并在操作完成后执行某些操作。
需要在模板中执行副作用: method 也可以用于执行一些需要在模板中执行的副作用操作。例如，在 method 中可以修改组件的状态、触发事件等。

4. 与侦听器watch的对比

watch可以用于观察一个特定的值，并在值发生变化时执行某些操作。
watch不返回值，而是执行副作用。在某些情况下，侦听器可能更合适，尤其是需要在值发生变化时执行异步操作时。

5. 示例

<template><div><!-- 使用 computed 属性 --><p>Reversed message: {{ reversedMessage }}</p><!-- 使用 method --><p>Uppercase message: {{ uppercaseMessage() }}</p></div>
</template><script>
export default {data() {return {message: 'Hello, Vue.js!'};},computed: {// Computed propertyreversedMessage() {return this.message.split('').reverse().join('');}},methods: {// MethoduppercaseMessage() {return this.message.toUpperCase();}}
};
</script>