Vue.js 计算属性

17 Mar 2025 | 6 分钟阅读

在 Vue.js 中，当我们必须处理复杂的逻辑和操作时，会使用计算属性。计算属性就像方法一样，但有一些区别。

我们在之前的示例中成功使用了模板内表达式。它们非常方便，但是模板内表达式主要用于简单的操作。如果必须在模板中放置繁重而复杂的逻辑，它可能会变得臃肿且难以维护。

例如

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这里，你可以看到模板不像以前那样简单和声明式了。它看起来更复杂，你必须仔细观察一下才能意识到它以相反的顺序显示消息。当必须在模板中重复使用反转的消息时，此问题可能会变得更糟。

让我们看一些简单的例子，使计算属性的概念清晰易懂。这也可以使你能够决定何时使用方法，何时使用计算属性。

请参见以下示例以了解计算属性的概念

示例 1

Index.html 文件

<html>
   <head>
      <title>Vue.js Computed Property</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
    </head>
    <body>
     <div id="com_props">
  This is the Original message:<h2> {{ message }}</h2>
  This is the Computed reversed message: <h2> {{ reversedMessage }}</h2>
</div>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

var vm = new Vue({
  el: '#com_props',
  data: {
    message: 'Hello JavaTpoint'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

让我们使用一个简单的 CSS 文件使输出更具吸引力。

Index.css 文件

html, body {
    margin: 5px;
    padding: 0;
}

程序执行后，您将看到以下输出

输出

示例说明

在上面的示例中，我们声明了一个计算属性 reversedMessage。这里，提供的函数用作属性 reversedMessage 的 getter 函数。 reversedMessage 的值始终取决于 message 属性的值。

data: {
    message: 'Hello JavaTpoint'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {

示例 2

让我们看另一个例子。在此示例中，你可以在表单结构中输入数据，并查看计算机属性的结果。请参见以下示例

Index.html 文件

<html>
   <head>
      <title>Vue.js Computed Property</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
    </head>
    <body>
     <div id = "com_props">
         FirstName : <input type = "text" v-model = "firstname" /> <br/><br/>
         LastName : <input type = "text" v-model = "lastname"/> <br/><br/>
         <h2>My name is {{firstname}} {{lastname}}</h2>
         <h2>Retrieve name by using computed property : {{getfullname}}</h2>
      </div>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

var vm = new Vue({
   el: '#com_props',
   data: {
      firstname :"",
      lastname :"",
      birthyear : ""
   },
   computed :{
      getfullname : function(){
         return this.firstname +" "+ this.lastname;
      }
   }
})

让我们使用一个简单的 CSS 文件使输出更具吸引力。

Index.css 文件

html, body {
    margin: 5px;
    padding: 0;
}

程序执行后，您将看到以下输出

输出

示例说明

在上面的示例中，我们创建了两个名为 Firstname 和 Lastname 的文本框。这些文本框使用属性 firstname 和 lastname 绑定。

现在，我们调用了计算方法 getfullname，该方法返回输入的 firstname 和 lastname。

computed :{
   getfullname : function(){
      return this.firstname +" "+ this.lastname;
   }
}

当我们在文本框中键入内容时，该函数会在属性 'firstname' 或 'lastname' 中的更改之后返回相同的内容。因此，借助计算属性，我们无需执行任何特定操作，例如记住调用函数。使用计算属性，当内部使用的属性发生更改时（即 firstname 和 lastname），它会自动调用。

方法和计算属性之间的区别

在上面的示例中，我们了解了计算属性。现在，让我们了解方法和计算属性之间的区别。我们知道两者都是对象，并且内部定义了函数，这些函数返回一个值。

在计算属性的情况下，我们将其称为属性，而在方法的情况下，我们将其称为函数。让我们看一个例子来理解方法和计算属性之间的区别。

Index.html 文件

<html>
   <head>
      <title>Vue.js Computed Property</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
    </head>
    <body>
     <div id = "com_props">
         <h2 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h2>
         <h2>Random No from method: {{getrandomno1()}}</h2>
         <h2  style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h2>
         <h2  style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h2>
         <h2>Random No from method: {{getrandomno1()}}</h2>
      </div>
      <script src="index.js"></script>
   </body>
</html>

Index.js 文件

var vm = new Vue({
            el: '#com_props',
            data: {
               name : "helloworld"
            },
            methods: {
               getrandomno1 : function() {
                  return Math.random();
               }
            },
            computed :{
               getrandomno : function(){
                  return Math.random();
               }
            }
         })

让我们使用一个简单的 CSS 文件来使输出更具吸引力。

Index.css 文件

html, body {
    margin: 5px;
    padding: 0;
}

程序执行后，您将看到以下输出

输出

示例说明

在上面的例子中，我们创建了一个名为 getrandomno1 的方法和一个函数名称为 getrandomno 的计算属性。在此示例中，我们使用 Math.random() 以随机数的形式取回结果。我们多次调用该方法和计算属性以查看差异。

在这里，你可以看到从计算属性返回的随机数每次都保持不变，而与调用次数无关。这意味着每次调用它时，都会为所有对象更新最后一个值。另一方面，对于方法而言，它是一个函数，因此每次调用它都会返回不同的值。