Vue中计算属性里如何使用Promise

Question

我想让某个组件根据Promise的返回值动态显示隐藏如何做到

以下是简化代码 最终isShow返回的是true而不是false

 computed: {
    isShow() {
      let flag = true
      
      Promise.resolve(false).then(res=>{
        flag = res
      })
      
      return flag
    }
  }

Answer 1

你的计算属性好像没有用到其他的响应式依赖，所以使用computed意义不大。或许可以考虑这样处理：

data(){
    return {
        isShow:false
    }
}
created() {
    Promise.resolve(false).then(res=>{
        this.isShow=true
    })
 }

另外如果你仍然想要使用异步的computed，那么你可以考虑使用vue-async-computed

Answer 2

computed 支持异步没有意义呀。

放在 data 中不一样能实现吗？

为什么要使用计算属性？是因为你有一个基础变量，然后这个基础变量需要计算一下然后会多次使用，如果你把计算代码放入模板中会难以维护，同时每次都是重新计算没有缓存。

Answer 3

computed里面不建议用这种异步操作，计算属性只是用于对数据的处理，这种异步数据开销很大的，操作也不方便，建议放到methods里面

Answer 4

computed里面不能使用异步操作，如果不是以来其他响应式计算得到的结果，建议还是不要用computed。