Vue如何获取数据列表展示

当我们使用Vue进行开发时，数据展示是不可避免的需要。这里提供一份完整的攻略，来讲解Vue如何获取数据列表展示。

一、数据获取

获取数据是数据展示的前置步骤。Vue中通常使用计算属性(computed)或者组件的created生命周期函数来获取数据。

1. 计算属性

计算属性是用来计算衍生数据的属性，它通常依赖于已有的数据。当依赖的数据发生变化时，计算属性将会重新计算，而不是重新渲染整个组件。因此，我们可以利用计算属性来对需要获取的数据进行处理和筛选。

以下是一个简单的示例，用来获取在一个列表组件中需要渲染的数据：

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

<script>
export default {
  data() {
    return {
      rawList: [{id: 1, name: 'Leo'}, {id: 2, name: 'Lucy'}, {id: 3, name: 'Lily'}],
      filter: ''
    }
  },
  computed: {
    computedData() {
      const { rawList, filter } = this
      return rawList.filter(item => item.name.indexOf(filter) !== -1)
    }
  }
}
</script>

在上面的示例中，我们使用计算属性computedData来获取数据并进行处理，最终返回一个列表数据。

2. created生命周期

在Vue组件初始化时，可以通过created生命周期函数来获取数据。它是在组件被创建之后立即调用的函数。

以下是一个简单的示例：

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

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    axios.get('/api/list')
      .then(res => {
        this.list = res.data
      })
  }
}
</script>

在上面的示例中，我们利用created生命周期函数通过ajax异步请求接口，最终获取数据并存入data中，以供后续展示使用。

二、数据展示

获取数据后，我们需要将其展示到视图中。数据展示的方式不尽相同，以下提供三个示例。

1. v-for指令

Vue的v-for指令可以在模板中渲染一个数据数组。它可以绑定到一个数组上并为数组中的每一项对象执行一次模板。

以下是一个简单的示例：

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

<script>
export default {
  data() {
    return {
      list: [{id: 1, name: 'Leo'}, {id: 2, name: 'Lucy'}, {id: 3, name: 'Lily'}]
    }
  }
}
</script>

在上面的示例中，我们使用v-for指令将数据数组列表展示到组件中。

2. slot插槽

Vue的slot插槽可以在组件中定义一个可以承载任何内容的插槽。插槽默认内容是组件中的fallback，但可以被替换或补充。

以下是一个简单的示例：

<template>
  <ul>
    <slot v-for="item in list" :name="item.id" :item="item"></slot>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [{id: 1, name: 'Leo'}, {id: 2, name: 'Lucy'}, {id: 3, name: 'Lily'}]
    }
  }
}
</script>

在上面的示例中，我们使用了slot插槽来定义并展示数据。在组件中使用时，可以灵活选择需要展示哪些数据。

3. 静态与动态组件

Vue提供了静态和动态组件来展示不同的组件。静态组件是在模板中硬编码的，而动态组件可以由组件的配置或外部数据来决定。

以下是一个简单的示例：

<template>
  <component v-for="item in list" :key="item.id" :is="item.component" :data="item.data"></component>
</template>

<script>
import componentA from 'components/componentA'
import componentB from 'components/componentB'

export default {
  data() {
    return {
      list: [
        {id: 1, component: 'componentA', data: [1, 2, 3]},
        {id: 2, component: 'componentB', data: {name: 'Lucy'}}
      ]
    }
  },
  components: { componentA, componentB }
}
</script>

在上面的示例中，我们使用了动态组件来展示由componentA和componentB两个组件渲染的不同数据。

以上是关于Vue如何获取并展示数据列表的完整攻略，可以根据实际情况进行调整和应用。