转载说明：原创不易，未经授权，谢绝任何形式的转载

有时候，我们想在加载页面时调用 Vue.js 组件中的一个方法。在本文中，我们将看看如何在加载页面时调用Vue.js组件中的方法。

在页面加载时调用一个Vue.js方法

我们可以在页面加载时通过在 beforeMount 组件钩子中调用Vue.js方法来调用它。

例如，我们可以写：

<template>  <div id="app"></div></template><script>export default {  name: "App",  methods: {    getUnits() {      //...    },  },  beforeMount() {    this.getUnits();  },};</script>

将 getUnits 方法添加到 methods 属性中。

我们在 beforeMount 钩子中调用 this.getUnits 。

this.getUnits 是 methods 对象属性中的 getUnits 方法。

我们还可以通过在 created 钩子中调用方法来在页面加载时运行它：

<template>  <div id="app"></div></template><script>export default {  name: "App",  methods: {    getUnits() {      //...    },  },  created() {    this.getUnits();  },};</script>

我们可以在 mounted 钩子中做同样的事情：

<template>  <div id="app"></div></template><script>export default {  name: "App",  methods: {    getUnits() {      //...    },  },  mounted() {    this.getUnits();  },};</script>

聊一聊三者的区别

当使用 Vue.js 构建一个应用时，Vue.js 会把组件按照一定的生命周期顺序初始化。在这个初始化过程中，每个组件实例都会依次经历一些特定的初始化和销毁过程，这些过程就是组件的生命周期。

Vue.js 提供了一些钩子函数（也称为生命周期函数），在组件生命周期的不同阶段会依次执行这些钩子函数。

beforeMount、created 和 mounted 都是 Vue.js 组件生命周期的钩子函数，它们的主要区别和用法如下：

1. created 钩子函数

created 钩子函数会在组件实例被创建之后立即调用，这个时候组件的数据观测和事件机制都已经初始化完成了。

在这个阶段，我们可以执行一些初始化的操作，比如对组件的数据进行初始化、对组件的属性进行设置、对组件的状态进行初始化等等。

2. beforeMount 钩子函数

beforeMount 钩子函数会在模板编译之后，但是在挂载之前被调用。在这个阶段，Vue.js 已经把组件的模板编译成了一个渲染函数，并且将渲染函数和组件实例关联起来了。

在这个阶段，我们可以进行一些 DOM 操作，比如修改 DOM 元素的样式、属性、子元素等等。但是需要注意的是，此时组件还没有被挂载到 DOM 上，因此对于一些需要获取 DOM 元素尺寸、位置等信息的操作应该放到 mounted 钩子函数中执行。

3. mounted 钩子函数

mounted 钩子函数会在组件挂载到 DOM 上之后被调用。在这个阶段，Vue.js 已经将组件实例挂载到了指定的 DOM 元素上，并且执行了一次渲染。

在这个阶段，我们可以访问到组件的 DOM 元素，并且执行一些需要访问 DOM 元素的操作，比如获取 DOM 元素的尺寸、位置等等。此外，mounted 钩子函数也是与第三方库进行交互的好时机，因为此时 DOM 元素已经被渲染出来了。

总之，这三个钩子函数都是 Vue.js 组件生命周期的钩子函数，它们分别在组件实例被创建后、模板编译后挂载前、挂载后被调用，用于执行不同的逻辑操作。

结束

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。