vue 计算属性返回什么

Vue计算属性返回的是根据依赖数据动态计算得到的值。在Vue中，计算属性是一个函数，通过将函数定义在Vue实例的computed选项中，可以使用计算属性来处理和返回数据。

计算属性有以下几个特点：

1. 缓存：计算属性会根据依赖数据的变化进行缓存，只有当依赖数据发生改变时，计算属性才会重新计算。这样可以避免不必要的计算，提高性能。

2. 响应式：计算属性会自动追踪依赖的数据，当依赖数据发生改变时，计算属性会自动重新计算并更新其值。这样可以实现数据的响应式更新。

3. 依赖关系自动建立：计算属性会自动建立与依赖数据的联系，当使用到计算属性时，Vue会自动进行依赖收集，当依赖数据发生改变时，计算属性会自动重新计算。

4. 异步：计算属性可以具有异步特性，可以通过在计算属性的函数内进行异步操作，当异步操作完成后，计算属性会自动更新值。

计算属性的使用示例：

// 在Vue实例中定义计算属性
computed: {
  // 定义一个计算属性fullName
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
}

// 在模板中使用计算属性
<template>
  <div>
    <p>First Name: {{ firstName }}</p>
    <p>Last Name: {{ lastName }}</p>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

上述例子中，每当firstName或lastName的值发生改变时，fullName计算属性会重新计算并更新其值，从而实现了全名的实时更新。

Vue的计算属性是一种便捷的方式来对响应式数据进行简单的处理和计算。它们提供了一种方式来定义一些数据相关的逻辑，然后在模板中使用这些逻辑的结果。

计算属性的返回值是根据响应式数据的变化而自动更新的。

下面是计算属性的一些返回值的示例：

1. 单一属性值：如果计算属性只返回一个单一的属性值，比如一个字符串或者数字，那么计算属性会根据依赖的数据变化来自动更新。

computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
}

2. 对象：计算属性也可以返回一个对象，当依赖的数据变化时，计算属性会重新计算对象的值。

computed: {
  userInfo: function() {
    return {
      name: this.name,
      age: this.age,
      gender: this.gender
    }
  }
}

3. 计算属性与方法：计算属性也可以返回一个方法，与普通方法的区别是，计算属性只有在依赖的数据变化时才会重新计算，而普通方法在每次调用时都会重新执行。

computed: {
  fullName: function() {
    return this.getFullName(this.firstName, this.lastName);
  }
},
methods: {
  getFullName: function(firstName, lastName) {
    return firstName + ' ' + lastName;
  }
}

4. Getter和Setter：计算属性还可以自定义属性的Getter和Setter方法，用于对属性进行读取和设置操作。

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

5. 联合计算属性：计算属性也可以依赖其他的计算属性，实现更复杂的逻辑。

computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  },
  greeting: function() {
    return 'Hello, ' + this.fullName + '!';
  }
}

Vue计算属性返回的是一个计算结果，这个计算结果基于依赖的响应式数据，并且会缓存起来，只要依赖的响应式数据没有改变，计算属性就不会重新执行计算操作，而是直接返回缓存的结果。

计算属性可以看作是Vue中的一个响应式数据，计算属性的值会根据依赖的响应式数据自动更新，并可以在模板中进行绑定和使用。

下面是一个计算属性的使用示例：

data() {
  return {
    name: 'John',
    age: 20
  }
},
computed: {
  introduction() {
    return `My name is ${this.name} and I am ${this.age} years old.`
  }
}

在上面的示例中，introduction是一个计算属性，它依赖于name和age这两个响应式数据。当name或age的值发生变化时，introduction的值会自动更新。

在模板中可以通过双花括号绑定计算属性的值：

<template>
  <div>
    <p>{{ introduction }}</p>
  </div>
</template>

当name的值为'John'，age的值为20时，上述模板会渲染出My name is John and I am 20 years old.。

计算属性还可以带有setter函数，用于处理计算属性的赋值操作。下面是一个带有setter函数的计算属性的示例：

data() {
  return {
    firstName: 'John',
    lastName: 'Doe'
  }
},
computed: {
  fullName: {
    get() {
      return `${this.firstName} ${this.lastName}`
    },
    set(value) {
      const [firstName, lastName] = value.split(' ')
      this.firstName = firstName
      this.lastName = lastName
    }
  }
}

在上面的示例中，fullName是一个计算属性，同时定义了get和set函数。当访问fullName时，会执行get函数返回计算结果；当给fullName赋值时，会执行set函数进行赋值操作。

计算属性的使用可以简化模板的逻辑和提高性能，特别是在需要进行复杂的数据计算或处理时，使用计算属性可以使代码更加清晰和易于维护。