vue 计算属性

计算属性

在 Vue 2 中使用 computed

在 Vue 2 中，计算属性是通过 computed 选项来定义的。

示例中，我们定义了一个 fullName 计算属性，它会根据 firstName 和 lastName 的值计算出完整的姓名。

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};

进阶：输入姓和名会显示全名，以及输入全名分别显示姓和名

<template>
  <div>
    <h1>计算属性</h1>
    <p>姓：<input type="text" v-model="person.firstName"></p>
    <p>名：<input type="text" v-model="person.lastName"></p>
    <p>全名：{{ fullName }}</p>
    <p>全名修改：<input type="text" v-model="fullName"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        firstName: '',
        lastName: ''
      }
    };
  },
  computed: {
    fullName: {
      get() {
        return this.person.firstName + this.person.lastName;
      },
      set(value) {
        this.person.firstName = value.slice(0, 1);
        this.person.lastName = value.slice(1);
      }
    }
  }
};
</script>

在 Vue 3 中使用 computed

示例中，我们使用了 Vue 3 的 computed 函数来定义计算属性 fullName。在 Vue 3 中，computed 函数接收一个函数作为参数，该函数返回计算属性的值。

需要注意的是，在 Vue 3 中，计算属性的定义方式发生了变化，不再是直接在 computed 选项中定义，而是使用 computed 函数来创建计算属性。

import { computed } from 'vue';

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: computed(function() {
      return this.firstName + ' ' + this.lastName;
    })
  }
};

进阶：输入姓和名会显示全名，以及输入全名分别显示姓和名

<template>
    <h1>计算属性</h1>
    <p>姓：<input type="text" v-model="person.firstName"></p>
    <p>名：<input type="text" v-model="person.lastName"></p>
    <p>全名：{{ person.fullName }}</p>
    <p>全名修改：<input type="text" v-model="person.fullName"></p>
</template>

<script setup>
    import {reactive,computed} from "vue";

    const person = reactive({
        firstName: '',
        lastName: ''
    })
    person.fullName=computed({
        get(){
            return person.firstName+person.lastName
        },
        set(value){
            person.firstName=value.slice(0,1)
            person.lastName=value.slice(1)
        }
    })

</script>

总结

• 在 Vue 2 中，计算属性通过 computed 选项来定义，直接通过计算属性名称访问。
• 在 Vue 3 中，计算属性通过 computed 函数来创建，需要导入并调用，通过访问 .value 属性来获取计算属性的值。