vue3computed

computed是Vue 3中的一个属性，也被称为计算属性。它允许我们根据响应式数据的变化来动态地计算和生成新的值。computed具有缓存机制，只有在依赖的响应式数据发生变化时，才会重新计算。在Vue 3中，可以使用简写形式和完整形式来定义computed。

简写形式只能用于读取计算属性的值，无法修改关联的响应式数据。下面是一个使用computed简写形式的例子：

import { computed, reactive } from 'vue'

export default {
  setup() {
    let per = reactive({
      surname: '勇敢',
      name: '小陈'
    })

    const fullName = computed(() => {
      return per.surname + '~' + per.name
    })

    return {
      per,
      fullName
    }
  }
}

在上面的例子中，我们使用了reactive函数将per对象转换为响应式对象。然后，我们使用computed函数来定义fullName计算属性，它返回per.surname和per.name的拼接结果。最后，我们将per和fullName返回给模板进行展示。

完整形式可以用于读取和设置计算属性的值。下面是一个使用computed完整形式的例子：

import { computed, reactive } from 'vue'

export default {
  setup() {
    let per = reactive({
      surname: '勇敢',
      name: '小陈'
    })

    const fullName = computed({
      get() {
        return per.surname + '~' + per.name
      },
      set(value) {
        var arr = value.split('~')
        per.surname = arr[0]
        per.name = arr[1]
      }
    })

    return {
      per,
      fullName
    }
  }
}

在上面的例子中，我们使用computed函数的完整形式来定义fullName计算属性。我们通过get函数定义了计算属性的读取逻辑，返回per.surname和per.name的拼接结果。通过set函数，我们可以修改计算属性关联的响应式数据。在set函数中，我们根据传入的value值拆分并更新per.surname和per.name。