Vue 3中的计算属性（computed）是一种方便的属性类型，用于根据其他变量或属性计算值。通过定义一个计算属性，您可以指定一个依赖于其他变量或属性的函数，每当依赖项发生变化时，该函数将重新计算并返回新的值。

在Vue 3中，您可以使用computed选项来定义计算属性。vue中计算属性也是我们在开发时常用的，vue2中计算属性computed定义如下：

export default {
  data() {
    return {
      fruits: ['apple', 'banana']
    }
  },
  computed: {
    fruitLen() {
      return this.fruits.length
    }
  },
  mounted() {
    ...
  },
  methods: {
    ...
  },
  components: {
    ...
  }
}

vue3中定义计算属性和vue2不一样，看下面例子：

<template>
    <button @click="change">修改</button>
    <div>{{ fullName }}</div>
</template>

<script setup>
import { ref, computed } from 'vue'

const xing = ref('张')
const ming = ref('三')

const fullName = computed(() => xing.value + ' ' + ming.value)

function change() {
    const rand = Math.random() * 10
    let xingVal = '张'
    let mingVal = '三'
    if (rand > 7) {
        xingVal = '李'
        mingVal = '华'
    } else if (rand < 4) {
        xingVal = '王'
        mingVal = '晴'
    }
    xing.value = xingVal
    ming.value = mingVal
}
</script>

vue3中是通过 import { computed } from'vue' 引入的计算属性。

计算属性优点是仅会在其响应式依赖更新时才重新计算，对于数据量大的情况下可以减少不必要的重复计算。

vue3中计算属性computed默认是只读的，如果想要直接修改，可以通过同时使用get 和 set来实现：

<template>
    <button @click="change">修改</button>
    <div>{{ fullName }}</div>
</template>

<script setup>
import { ref, computed } from 'vue'

const xing = ref('张')
const ming = ref('三')

// 返回的是一个ref
let fullName = computed({
  get() {
    return xing.value + ' ' + ming.value
  },
  set(newValue) {
    [xing.value, ming.value] = newValue.split(' ')
  }
})

function change() {
    const rand = Math.random() * 10
    if (rand > 7) {
        fullName.value = '李 华'
    } else if (rand < 4) {
        fullName.value = '王 晴'
    } else {
        fullName.value = '张 三'
    }
}
</script>

注：computed返回的是一个ref，所以使用时要加个.value来。

在使用set和get的时候最好不要额外做其它更改动作，比如更改DOM，比如做异步请求等，防止带来副作用。