vue中计算属性通过什么实现 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue中的计算属性是通过computed属性实现的。计算属性是Vue中非常常用的一个功能，它可以根据已有的数据进行计算，并且在计算结果发生变化时自动更新，而不需要手动去操作。

在Vue的实例中，我们可以通过在computed对象中定义计算属性来实现，形式上类似于一个普通的对象。计算属性可以是一个函数，也可以是一个对象。如果是一个函数，那么计算属性的返回值将作为属性的值；如果是一个对象，那么对象的get方法将作为计算属性的计算函数，set方法将作为计算属性的更新函数。

下面是一个简单的示例，展示了如何在Vue中使用计算属性：

<template>
  <div>
    <p>{{ fullName }}</p>
    <p>{{ age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
      yearOfBirth: 1990
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    },
    age() {
      return new Date().getFullYear() - this.yearOfBirth;
    }
  }
}
</script>

在上面的代码中，我们定义了两个计算属性fullName和age。fullName的计算函数通过拼接firstName和lastName来返回一个完整的姓名；age的计算函数通过当前年份减去yearOfBirth来计算年龄。

在模板中，我们可以直接通过{{ fullName }}和{{ age }}来使用这两个计算属性。Vue会自动计算并更新这些属性的值。

计算属性在开发中非常常用，特别适合用于根据已有的数据进行复杂的计算和处理。它使我们可以将一些复杂的逻辑封装在计算属性中，而不需要在模板中编写复杂的表达式。同时，计算属性的缓存机制可以有效提高性能，避免重复计算。所以，在Vue中，如果需要根据已有的数据进行计算，推荐使用计算属性来实现。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在Vue中，计算属性是通过Vue实例的getters和setters实现的。

getters：计算属性通过getters函数来获取数据。通过在Vue实例的computed对象中定义计算属性，将计算属性的名字作为key，函数作为value。每当计算属性被访问时，该函数会被调用，并返回计算结果。
```
computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
}
```
缓存：Vue默认会缓存计算属性的值，在数据发生变化时，会重新计算计算属性的值，但如果数据没有发生变化，则会直接返回缓存的值，提高性能。缓存计算属性是通过在计算属性的getter函数中使用this.depend()方法实现的。
依赖追踪：Vue能够自动追踪计算属性所依赖的数据，并在依赖发生变化时，重新计算计算属性的值。这是通过在getter函数中使用响应式数据来实现的。Vue会在getter函数被调用时，将当前正在计算的计算属性添加到依赖追踪的栈中，然后在getter函数里面访问响应式数据，当响应式数据被读取时，会将计算属性添加到该响应式数据的依赖列表中，然后将依赖列表的相关信息保存起来。当响应式数据发生变化时，会通过依赖列表找到对应的计算属性，并重新计算计算属性的值。

set函数：计算属性不仅能够获取数据，还可以通过set函数来设置数据。当计算属性被赋值时，set函数会被调用并传入新值，我们可以在set函数中对计算属性的值进行处理。

computed: {
  fullName: {
    get: function() {
      return this.firstName + ' ' + this.lastName;
    },
    set: function(value) {
      var names = value.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    }
  }
}

计算属性的优点：计算属性在模板中可以像普通属性一样被使用，不需要在模板中调用方法来计算值，使得代码更加简洁和清晰。计算属性还具有缓存功能，能够在数据没有发生变化时直接返回缓存值，提高性能。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，计算属性是一种便捷的方式来动态计算派生出来的属性。它们的值会根据其依赖关系自动更新，而且只要依赖发生改变，计算属性将会被重新求值。

Vue的计算属性通过利用Vue实例的对象属性访问器（getter和setter）来实现。当访问计算属性时，Vue会自动调用对应的getter方法来计算返回值。而当计算属性的依赖属性发生变化时，Vue会重新调用这个getter方法来重新计算返回值。

计算属性的定义是在Vue实例的computed选项中。下面是一个简单的例子：

new Vue({
  data: {
    message: 'Hello, Vue!',
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    }
  }
});

在上面的例子中，我们定义了一个名为reversedMessage的计算属性。当message属性的值发生变化时，reversedMessage将会被重新计算。这样，我们就可以在模板中使用reversedMessage属性来获取message的逆序字符串。

<div>{{ message }}</div>
<div>{{ reversedMessage }}</div>

上述代码将会渲染出以下结果：

Hello, Vue!
!euV ,olleH

在这个例子中，计算属性reversedMessage的getter方法将会被反复调用来计算返回值，直到它所依赖的message属性没有发生变化为止。

需要注意的是，计算属性是基于它们的依赖缓存的。只有当依赖发生改变时，计算属性才会重新求值。这就意味着在多个地方多次使用同一个计算属性时，计算属性的结果只会被计算一次，然后缓存起来，直到它所依赖的属性发生改变。这样可以大大提高性能。

如果想要在计算属性中设置属性的值，可以通过定义一个setter方法。例如：

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe',
  },
  computed: {
    fullName: {
      get: function() {
        return this.firstName + ' ' + this.lastName;
      },
      set: function(value) {
        var parts = value.split(' ');
        this.firstName = parts[0];
        this.lastName = parts[1];
      }
    }
  }
});

在这个例子中，我们定义了一个计算属性fullName，它包含了一个getter方法用来返回firstName和lastName的合并字符串。同时，我们还定义了一个setter方法，用来根据传入的字符串值来设置firstName和lastName的值。

通过上述的方法和操作流程，我们可以很方便地使用计算属性来动态计算派生属性的值，使代码更加简洁和易于维护。

1年前 0条评论