vue中计算属性computed和普通属性method的区别小结_Vue.js

1. 计算属性computed

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

computed 的使用场景包括：

数据衍生：当需要根据已有数据计算出新的数据时，可以使用计算属性。例如，根据商品的价格和数量计算出总价。
数据过滤和转换：当需要对数据进行过滤、格式化或转换时，可以使用计算属性。例如，将日期格式化为特定的显示格式。

需要注意的是，计算属性只会在依赖的数据发生变化时才重新计算，因此适用于那些相对稳定的数据计算场景。

2. 普通属性method

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

methods 的使用场景包括：

事件处理：当需要处理用户交互事件时，可以使用方法。例如，点击按钮时执行特定的操作。
复杂逻辑：当需要执行复杂的业务逻辑，或者需要进行条件判断和循环操作时，可以使用方法。

需要注意的是，每次调用方法时，都会执行其中的代码，不会进行缓存。因此，如果方法中包含复杂的计算逻辑或者涉及频繁调用的场景，可能会对性能产生影响。

3. 应用场景

3.1. computed

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

3.2. method

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

总结：computed 和 methods 在 vue 中有不同的用途和特点。computed 适用于根据已有数据衍生新数据和数据过滤/转换场景，并具有缓存机制优化性能；methods 适用于处理事件和复杂逻辑的场景。

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 property
    reversedmessage() {
      return this.message.split('').reverse().join('');
    }
  },
  methods: {
    // method
    uppercasemessage() {
      return this.message.touppercase();
    }
  }
};
</script>

到此这篇关于vue中计算属性computed和普通属性method的区别小结的文章就介绍到这了,更多相关vue computed和method区别内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！