vue实现加载页面自动触发函数(及异步获取数据)

实现加载页面自动触发函数及异步获取数据，可以使用Vue的生命周期钩子函数和异步请求。

步骤一：编写需要加载的函数代码

在Vue组件中的 methods 选项中编写需要加载的函数代码。

例如：

methods: {
  fetchData() {
    axios.get('http://api.example.com/data')
      .then(response => {
        this.dataList = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}

以上代码演示了使用 axios 库向 http://api.example.com 发起 GET 请求以获取一组数据，并将数据存储在组件实例的 dataList 属性中。

步骤二：使用生命周期钩子函数

在Vue组件中的 created 生命周期钩子中调用之前编写的函数。

例如：

created() {
  this.fetchData();
}

以上代码演示了在组件实例创建时调用 fetchData 函数。这样，页面在加载完成后会自动触发该函数。

示例一：异步获取数据并渲染页面

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dataList: []
    };
  },

  created() {
    this.fetchData();
  },

  methods: {
    fetchData() {
      axios.get('http://api.example.com/data')
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

以上代码演示了在Vue组件中使用 axios 库发送异步请求，并在页面加载时自动触发该请求。请求成功后，将返回的数据保存在组件实例的 dataList 属性中，并使用 v-for 指令将数据渲染成列表。

示例二：通过props传递参数到子组件中实现加载数据

// 父组件
<template>
  <div>
    <data-list :api-url="apiUrl"></data-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: 'http://api.example.com/data'
    };
  }
};
</script>

// 子组件
<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  props: {
    apiUrl: String
  },

  data() {
    return {
      dataList: []
    };
  },

  created() {
    this.fetchData();
  },

  methods: {
    fetchData() {
      axios.get(this.apiUrl)
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

以上代码演示了在父组件中通过 props 属性将 apiUrl 参数传递给子组件，子组件根据该参数发送异步请求以获取数据并更新页面。在页面加载时，组件将自动触发请求并将数据渲染成列表。