Vue 30 天学习 - 方法和计算属性

2025-06-04

Vue 30 天学习 - 方法和计算属性

本文摘自《30 Days of Vue》。这是一个免费资源，以 30 个小节介绍了 Vue.js 框架！您可以直接从网站https://www.fullstack.io/30-days-of-vue/查看和下载所有文章。

方法

Vue 实例中的方法行为类似于普通的 JavaScript 函数，仅在显式调用时才会执行。我们也可以不使用方法，而是在模板中内联编写所需的功能变更。

让我们看一个例子。我们将重用 Vue 文档中的示例，该示例涉及反转字符串中的一系列字符。首先，我们将创建一个 Vue 实例，其中包含一个message值为 的属性'Greetings!'：

new Vue({
  el: '#app',
  data: {
    message: 'Greetings!',
  },
});
Enter fullscreen mode Exit fullscreen mode

在模板中，我们将尝试直接绑定，并将其反转后的状态message绑定。我们将通过将 属性拆分为字符数组 ( )，反转数组中的元素 ( )，然后将反转后的数组重新合并为单个字符串 ( )，来反转 的值。messagemessage.split('').reverse().join('')

<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet"
      href="https://unpkg.com/bulma/css/bulma.css" />
  </head>

  <body>
    <div id="app">
      <div class="card">
        <header class="card-header card-header-title">
          <span>Original:</span>
          {{ message }}
        </header>

        <header class="card-header card-header-title">
          <span>Reversed:</span>
          {{ message.split('').reverse().join('') }}
        </header>
      </div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

在Bulma提供的样式的帮助下，我们的简单应用程序将如下所示：

像上面那样，以内联方式指定功能变更本身并没有错。然而，当预期的变更难以解读时，使用方法通常更合适。

我们可以改变上面的示例，改为使用Vue 实例中的方法message来帮助反转字符串：

new Vue({
  el: '#app',
  data: {
    message: 'Greetings!',
  },
  methods: {
    reverseString(string) {
      return string.split('').reverse().join('');
    },
  }
});
Enter fullscreen mode Exit fullscreen mode

该方法被赋予了名称reverseString并期望有效载荷。我们可以在模板中声明此方法，并将message属性作为有效载荷传入：

<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet"
      href="https://unpkg.com/bulma/css/bulma.css" />
  </head>

  <body>
    <div id="app">
      <div class="card">
        <header class="card-header card-header-title">
          <span>Original:</span>
          {{ message }}
        </header>

        <header class="card-header card-header-title">
          <span>Reversed:</span>
          {{ reverseString(message) }}
        </header>
      </div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

我们的 UI 会像以前一样运行，显示消息问候语和其下方的反转版本：

从功能上讲，以上两个示例实现了相同的功能。方法可能更合适，因为它使模板更简洁易懂。

我们还可以使用另一个属性（称为计算属性）来实现与上述相同的结果。

计算属性

计算属性用于处理需要在视图中显示的信息的复杂计算。在构建同一个简单应用程序的第三次迭代中，我们将引入一个名为 的计算属性，它像以前一样reverseMessage简单地反转数据属性：message

new Vue({
  el: '#app',
  data: {
    message: 'Greetings!',
  },
  computed: {
    reverseMessage() {
      return this.message.split('').reverse().join('');
    },
  }
});
Enter fullscreen mode Exit fullscreen mode

在模板中，我们可以渲染计算属性的值，reverseMessage就像渲染任何其他数据属性一样：

<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet"
      href="https://unpkg.com/bulma/css/bulma.css" />
  </head>

  <body>
    <div id="app">
      <div class="card">
        <header class="card-header card-header-title">
          <span>Original:</span>
          {{ message }}
        </header>

        <header class="card-header card-header-title">
          <span>Reversed:</span>
          {{ reverseMessage }}
        </header>
      </div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

这样，我们的应用程序就会按预期运行：

这就引出了一个问题，使用计算属性或让方法返回值有什么区别？

方法与计算属性

在上面的例子中，使用方法或计算属性几乎可以实现完全相同的结果。使用计算属性的关键区别在于，计算属性会根据其依赖项进行缓存。

如果我们看一下reverseMessage我们声明的计算属性，我们可以看到它有一个数据依赖项 -message属性。

computed: {
  reverseMessage() {
    return this.message.split('').reverse().join('');
  },
}
Enter fullscreen mode Exit fullscreen mode

的值reverseMessage直接依赖于message数据属性。当 的值message发生变化时， 的值也会发生变化reverseMessage。计算属性很有用，因为只要依赖的数据属性 ( message) 保持不变（即未更改），多次调用计算属性 ( ) 总是会返回相同的缓存值。reverseMessage

让我们直观地看一个简单的例子。我们可以在计算console.log()属性函数中放置一条消息，以便在函数运行时提醒我们：

computed: {
  reverseMessage() {
    console.log('computed function is run!');
    return this.message.split('').reverse().join('');
  },
}
Enter fullscreen mode Exit fullscreen mode

reverseMessage在模板中，我们可以多次渲染计算属性：

<div id="app">
  <div class="card">
    <header class="card-header card-header-title">
      <span>Original:</span>
      {{ message }}
    </header>
  </div>

  <div class="card">
    <header class="card-header card-header-title">
      <span>Reversed:</span>
      {{ reverseMessage }}
    </header>
  </div>

  <div class="card">
    <header class="card-header card-header-title">
      <span>Reversed:</span>
      {{ reverseMessage }}
    </header>
  </div>

  <div class="card">
    <header class="card-header card-header-title">
      <span>Reversed:</span>
      {{ reverseMessage }}
    </header>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

通过运行应用程序并打开浏览器控制台，我们将看到仅console.log()记录一次的消息：

首次reverseMessage计算该属性时，其值会被缓存。之后每次渲染 的值时reverseMessage，该message属性都不会改变，因此只会返回缓存的结果，而无需再次运行计算函数。

如果我们重复一个类似的示例，但在模板中多次调用方法console.log()，则每次声明该方法时都会运行该消息：

总而言之，虽然方法可以代替计算属性，但如果我们打算从数据属性计算值，则应该使用计算属性。一旦我们的应用程序开始拥有无数的属性，并且每个派生功能都可能在计算上耗费一些资源，那么缓存可以帮助提高应用程序的性能。

下表突出显示了使用方法或计算属性之间的主要区别：

一个值得遵循的经验法则是：

  • 在响应变化时使用方法（例如单击按钮、提交表单等）或在实例中运行明确的功能变化（例如从生命周期挂钩调用方法）。
  • 使用计算属性进行数据操作（例如，从实例中的未排序数组创建已排序数组）。

如果您有任何疑问，请随时发表评论，我会尽力解答。您也可以在 Twitter 上关注我 - @djirdehh！

如果您是 Vue.js 的新手，并且有兴趣深入了解其他主题 - 请随时查看https://www.fullstack.io/30-days-of-vue/。

文章来源：https://dev.to/djirdehh_93/30-days-of-vue---methods-and-compulated-properties-18m8
Devto 翻译
PREV
保护你的 Node.js 应用免受跨站请求伪造
NEXT
工程经理阅读指南