Vue 如何获取数据

在 Vue 开发中，获取数据是一项基础且关键的操作，它直接影响着应用程序的功能和用户体验。以下将详细介绍几种常见的获取数据的方式。

1. 从本地数据对象获取

Vue 实例有一个 data 选项，它是一个返回对象的函数。在这个对象中定义的数据可以直接在模板中使用。例如：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '这是来自本地的数据'
    };
  }
};
</script>

通过这种方式，message 数据在模板中被插值显示，简洁明了，适用于一些固定不变或在组件内部初始化的数据。

2. 从 props 获取数据

当需要在父子组件之间传递数据时，props 就发挥了重要作用。父组件可以向子组件传递数据。 首先在子组件中定义 props：

<template>
  <div>
    <p>{{ childMessage }}</p>
  </div>
</template>

<script>
export default {
  props: {
    childMessage: String
  }
};
</script>

然后在父组件中使用子组件并传递数据：

<template>
  <div>
    <ChildComponent :childMessage="parentData"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: '这是从父组件传递给子组件的数据'
    };
  }
};
</script>

3. 利用生命周期钩子函数获取异步数据

对于从服务器端获取数据的场景，通常会使用生命周期钩子函数，如 created 或 mounted。例如，使用 axios 库来发起 HTTP 请求：

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dataList: []
    };
  },
  created() {
    axios.get('https://example.com/api/data')
   .then(response => {
        this.dataList = response.data;
      })
   .catch(error => {
        console.error('获取数据出错:', error);
      });
  }
};
</script>

在上述代码中，created 钩子函数在实例初始化后被调用，此时发起 HTTP 请求获取数据，并将数据赋值给 dataList，然后在模板中渲染出来。

掌握这些获取数据的方法，能让开发者更加灵活地构建 Vue 应用，满足各种业务需求。