浅谈 Vue3的计算属性 Computed(如何在 Vue3 中异步使用 computed 计算属性)

Vue3的计算属性

我所理解的计算属性就是通过已有的值，二次加工得到一个新的值 ,这就叫计算属性。但是计算属性 仅仅有这些 还是不够的。计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。
Vue3的计算属性也是 组合式API，我平时再用的时候，只用到了get很少用 set。
只用到get时代码 可以这样写：

const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})

当你要用到set的时候可以这样写：

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

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

我 最近接到了一个任务，该原理之前的代码，要在计算属性里面 调接口取数据，可能不明白的小伙伴 就会问，为什么可以在computed里面调接口呢？是的 ，不能在计算属性里面调接口，Vue 中的 computed 计算属性默认必须同步调用，这也就意味着，所有值都必须立即返回，如果试图异步调用，那么 Vue 会立刻报错。 那么我的需求就实现不了吗?

**第一种解决办法：**我不能就不用计算属性，写一个异步函数 调接口取数据，可以创建一个 reactive 对象或 ref 引用，然后在组件 onMounted 生命周期手动为这个对象赋值。这种办法多简单，非要用计算属性吗？不需要。

 let userDatas = ref({})
// 监听 父组件传递过来的results ,
   watch([results], () => loadUserData(), 
   { immediate: true, deep: true });
  async function loadUserData() { 
  const url = "www.baidu.com"
	 await new Promise((resolve) => {
            window.$.getJSON(url, (data1) => {
   // 这里我用的是 JQuery的 调接口方法， 你也可以用axios or fetch
              userDatas = data1;
              resolve('resolved');
            });
          });
}

第二种解决办法： 我也不会。我在网上找一到了一篇博客，可以取看下。
点我到第二种方法