vue3拿到数据后如何渲染

在Vue3中，可以使用新的Composition API来处理数据渲染。一个常见的方法是使用setup函数来获取数据，然后通过template或者render函数来渲染。

以下是一个示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { reactive, onMounted } from 'vue'

export default {
  setup() {
    const state = reactive({
      title: '',
      items: []
    })

    // 获取数据
    async function fetchData() {
      const response = await fetch('https://example.com/data')
      const data = await response.json()
      state.title = data.title
      state.items = data.items
    }

    // 在组件挂载后获取数据
    onMounted(() => {
      fetchData()
    })

    return {
      title: state.title,
      items: state.items
    }
  }
}
</script>

在上面的示例中，我们使用了reactive函数来创建响应式的state对象，然后在fetchData函数中获取数据并更新state对象。最后，我们通过return语句将state对象中的数据暴露给模板中的变量。模板中的变量可以通过双括号语法来渲染。例如，{{ title }}会渲染state对象中的title属性。

除了使用模板语法，我们还可以使用render函数来手动渲染组件。以下是一个使用render函数的示例：

<script>
import { reactive, onMounted, h } from 'vue'

export default {
  setup() {
    const state = reactive({
      title: '',
      items: []
    })

    // 获取数据
    async function fetchData() {
      const response = await fetch('https://example.com/data')
      const data = await response.json()
      state.title = data.title
      state.items = data.items
    }

    // 在组件挂载后获取数据
    onMounted(() => {
      fetchData()
    })

    return () => h('div', [
      h('h1', state.title),
      h('ul', state.items.map(item => h('li', item.name)))
    ])
  }
}
</script>

在上面的示例中，我们使用h函数来手动创建组件的虚拟DOM节点，然后返回给render函数。这样做的好处是可以更灵活地控制组件的渲染逻辑。