vue 如何解析：[object Promise]

在Vue中，如果你在模板中直接使用一个Promise对象，它会被解析为字符串"[object Promise]"，因为Vue默认不能直接在模板中渲染Promise对象。

要解决这个问题，可以使用Vue的计算属性（computed property）或者异步组件（async components）。

如果你使用计算属性，你可以在计算属性中返回Promise对象，然后在模板中使用该计算属性。例如：

<template>
  <div>{{ promiseValue }}</div>
</template>

<script>
export default {
  data() {
    return {
      promise: new Promise(resolve => setTimeout(() => resolve('Hello World!'), 1000))
    }
  },
  computed: {
    promiseValue() {
      return this.promise.then(value => value)
    }
  }
}
</script>

如果你使用异步组件，你可以在异步组件的回调函数中返回Promise对象，然后在父组件中使用该异步组件。例如：

<template>
  <div>
    <async-component :promise="promise"></async-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      promise: new Promise(resolve => setTimeout(() => resolve('Hello World!'), 1000))
    }
  },
  components: {
    'async-component': () => ({
      component: import('./AsyncComponent.vue'),
      loading: {
        template: 'Loading...'
      },
      error: {
        template: 'Error!'
      }
    })
  }
}
</script>

在异步组件中，你可以在模板中使用`<template>`, `<script>`, `<style>`等标签来定义异步组件的内容。在这个例子中，我定义了一个异步组件`AsyncComponent.vue`，当Promise对象成功时，异步组件会渲染一个包含Promise对象的值的字符串，否则会显示loading或error信息。