Vue 中的 computed 和 methods 有什么区别？

最新推荐文章于 2025-07-06 22:47:46 发布

JJCTO袁龙

最新推荐文章于 2025-07-06 22:47:46 发布

阅读量892

点赞数 18

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yuanlong12178/article/details/144545198

Vue 专栏收录该内容

759 篇文章

订阅专栏

Vue 中的 computed 和 methods 有什么区别？

Vue.js 是一个非常流行的前端框架，它极大地简化了开发者在构建用户界面时的工作。而在 Vue 中，computed 和 methods 是两个非常重要的概念。尽管它们在某些情况下似乎具有相似的功能，但它们之间存在显著的区别。本文将深入探讨这两个特性，并通过示例代码帮助大家理解它们的使用场景和优劣。

1. 什么是 computed?

computed 是 Vue.js 提供的一个计算属性，它基于其依赖的响应式数据进行缓存。当依赖的数据变化时，计算属性会重新计算；而如果依赖的数据未变化，重复访问该计算属性时会直接返回缓存的值。由于这一特性，computed 非常适合用于复杂的逻辑计算，以提高性能。

示例代码

下面是一个简单的示例，展示如何使用 computed：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>原始价格：{{ price }}</p>
    <p>折扣后价格：{{ discountedPrice }}</p>
    <input v-model="discount" placeholder="输入折扣百分比">
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '商品',
      price: 100, // 原始价格
      discount: 0, // 折扣
    };
  },
  computed: {
    discountedPrice() {
      return this.price - (this.price * (this.discount / 100));
    },
  },
};
</script>

在上面的示例中，discountedPrice 是一个计算属性，它的值依赖于 price 和 discount。只有当 discount 或 price 变化时，discountedPrice 才会重新计算。这样不仅简化了代码，也提升了性能。

2. 什么是 methods?

methods 是 Vue.js 中用于定义方法的选项，它包含了一组函数可以在模板中被调用。与计算属性不同，methods 不会进行缓存，每次调用都会执行函数。

示例代码

我们来看一个使用 methods 的例子：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>原始价格：{{ price }}</p>
    <p>折扣后价格：{{ calculateDiscountedPrice(discount) }}</p>
    <input v-model="discount" placeholder="输入折扣百分比">
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '商品',
      price: 100, // 原始价格
      discount: 0, // 折扣
    };
  },
  methods: {
    calculateDiscountedPrice(discount) {
      return this.price - (this.price * (discount / 100));
    },
  },
};
</script>