Vue中的computed函数怎么使用

## 什么是computed函数 在Vue框架中，computed函数是用于计算响应式数据的函数。在Vue实例中，计算属性computed与数据属性data、方法methods同级别，且它的返回值会被缓存，只有当计算属性所依赖的响应式数据发生变化时才会重新计算，以提高Vue实例的性能。 ## computed函数的使用 在Vue框架中，你可以通过computed函数对响应式数据进行计算并获得计算后的响应式数据。以下是computed函数的基本使用方法： ### 计算属性的基本使用

计算属性的基本使用
{{ message }}

computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

{{ reversedMessage }}

在上面的代码中，我们定义了一个计算属性`reversedMessage`，它用于将数据属性`message`倒序排列。在模板中调用`reversedMessage`，会根据`message`重新计算出新的响应式数据，并将其显示在页面中。 ### 计算属性的Getter和Setter 有时候我们需要对计算属性进行双向绑定，这时就需要用到计算属性的Getter和Setter。以下是一个例子：

计算属性的Getter和Setter
{{ fullName }}

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

在上述代码中，我们定义了一个计算属性`fullName`，实现了对数据属性`firstName`和`lastName`进行双向绑定。通过计算属性`fullName`，我们可以快速地将`firstName`和`lastName`合并成一个字符串，同时也可以将一个字符串分割成`firstName`和`lastName`。 ### 计算属性的依赖 computed函数可以监听该函数所依赖的响应式数据，在响应式数据发生变化时，重新计算该函数，并更新显示在页面的数据。以下是一些使用计算属性的例子：

计算属性的依赖
{{ fullName }}

data: {
  firstName: 'Foo',
  lastName: 'Bar'
},
computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
},
methods: {
  changeName: function () {
    this.firstName = 'John'
  }
}

Change Name

在上述代码中，我们定义了一个计算属性`fullName`，它依赖于数据属性`firstName`和`lastName`。在模板中调用`fullName`，它会在初始化时计算出初始值，并在响应式数据发生变化时重新计算，然后更新页面中的数据。 ### 计算属性的缓存 computed函数会将结果缓存起来，只有在计算属性依赖的响应式数据发生变化时才会重新计算。这也是计算属性比方法更高效的原因。

计算属性的缓存
{{ reversedMessage }}

computed: {
  reversedMessage: function () {
    console.log('computed')
    return this.message.split('').reverse().join('')
  }
},
methods: {
  reverse: function () {
    console.log('method')
    return this.message.split('').reverse().join('')
  }
}

Reverse

在上述代码中，我们通过计算属性`reversedMessage`和方法`reverse`分别实现了将`message`倒序排列并返回的功能。在方法中，每次调用都会重新计算数据，而在计算属性中，只有在`message`发生变化时才会重新计算数据。因此，在方法中多次调用时会多次计算数据，而在计算属性中多次调用时只会计算一次数据。 ## 总结 通过computed函数，我们可以方便地对响应式数据进行计算，并获得计算后的响应式数据。computed函数会自动监听依赖的响应式数据，只有在响应式数据发生变化时才会重新计算数据并更新页面。同时，computed函数会将结果缓存起来，提高了Vue实例的性能。 在使用computed函数时，我们可以根据实际需求灵活控制计算属性的Getter和Setter，实现对计算属性的双向绑定。同时，计算属性的缓存机制也是我们在实际开发中需要注意的地方，避免不必要的计算从而提高应用的性能。