vue页面加载完毕调用函数的实现方法

小蓝 • 2024-11-25 05:51 • 编程

随着前端开发的快速发展，Vue框架逐渐成为主流框架之一。对于一些有经验的开发者来说，可能可以很轻松地实现Vue页面的加载，然后调用相应的函数来处理逻辑，但是对于部分新手或者刚刚接触Vue框架的开发者，这个问题可能会比较棘手。本文将从多个方面，详细阐述如何在Vue页面加载完毕后调用函数。

一、Vue页面加载完毕如何调用函数

在Vue框架中，当页面完全加载完成后进行后续处理，可以使用Vue的生命周期函数来实现，其中created、mounted和beforeDestroy是比较常使用的生命周期函数。具体实现方式如下：


export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  mounted() {
    this.showMessage();
  },
  methods: {
    showMessage() {
      alert(this.message);
    }
  }
}

在以上代码中，mounted函数被调用，Vue页面已经完全渲染完毕。在该函数内调用了showMessage方法，将message路径的值弹出了一个消息框。

二、Vue页面加载完成后调用多个函数

在实际开发过程中，我们可能需要调用多个函数来处理逻辑。那么如何在Vue页面加载完成后调用多个函数？只需要在mounted生命周期函数中，多次调用即可。具体实现方式如下：


export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  mounted() {
    this.showMessage();
    this.showOtherMessage();
  },
  methods: {
    showMessage() {
      alert(this.message);
    },
    showOtherMessage() {
      alert('Other message.');
    }
  }
}

在以上代码中，mounted生命周期函数中调用了showMessage和showOtherMessage两个函数，以供处理逻辑。

三、Vue页面加载完成后调用异步函数

异步函数的场景下，我们需要等接口数据返回后才能够进行相关处理，而且在异步数据未返回时直接调用一个函数，是无法处理相关数据的。对于这种情况，我们可以使用async/await关键字来实现。具体实现方式如下：


import fetchContent from './api';
export default {
  data() {
    return {
      content: null
    }
  },
  async mounted() {
    await this.fetchContent();
    this.showMessage();
  },
  methods: {
    async fetchContent() {
      this.content = await fetchContent();
    },
    showMessage() {
      alert(this.content);
    }
  }
}

在以上代码中，fetchContent是一个异步函数，此函数在数据返回前是无法处理数据的，而在mounted函数中我们使用await关键字异步等待数据返回后，再调用showMessage函数进行处理。

四、Vue页面加载完成后调用带参数的函数

带参数的函数的实现，需要在调用函数时将参数传递给对应的函数。具体实现方式如下：


export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  mounted() {
    this.showMessage('Hi!');
  },
  methods: {
    showMessage(msg) {
      alert(msg + ' ' + this.message);
    }
  }
}

在以上代码中，我们在mounted函数中使用this.showMessage(‘Hi!’)调用了showMessage函数，并将参数’Hi!’传递给了showMessage函数，以供实现相关逻辑。

五、Vue页面异步请求数据的处理

在Vue开发中，经常会使用axios等异步数据请求库。如果需要使用Vue页面加载完毕来调用异步请求，就需要使用到Promise来实现。具体实现方式如下：


export default {
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      const that = this;
      axios.get('/api/data').then(res => {
        that.dataList = res.data;
        console.log(that.dataList);
        that.showMessage();
      }).catch(e => {
        console.log(e);
      });
    },
    showMessage() {
      alert('Data loaded.');
    }
  }
}

在以上代码中，fetchData函数使用axios异步请求数据，并将获取到的数据存入dataList数组中，在数据获取到后再调用showMessage函数处理逻辑。

六、总结

本文对于如何在Vue页面加载完成后调用函数做了详细的阐述，介绍了调用一个函数、调用多个函数、调用异步函数、带参数函数的实现方式，并在数据请求场景下介绍了Promise的使用。通过学习本文介绍的方法，相信大家已经可以轻松实现Vue页面加载完毕后调用需求了。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/183733.html