详解Vue.js在页面加载时执行某个方法

想要在Vue.js页面加载的时候执行某个方法，可以利用Vue的生命周期函数，其中mounted()钩子函数会在该Vue实例被挂载到 DOM 后执行。下面详细介绍实现步骤：

第一步：定义一个 Vue 实例

首先需要定义一个 Vue 实例，这个 Vue 实例只需要有 el 属性和 data 属性，如下所示：

Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  },
})

第二步：在实例中添加 mounted() 钩子函数

在 Vue 实例中添加 mounted() 钩子函数，并在该函数中执行需要加载的方法。例如下面的代码在页面加载后，弹出一个提示框：

Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  },
  mounted() {
    alert('页面加载完成！');
  }
})

示例说明一：在页面中加载数据

Vue({
  el: '#app',
  data: {
    dataList: []
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 通过Ajax获取数据
      axios.get('/api/data')
        .then((res) => {
          this.dataList = res.data;
        })
        .catch((err) => {
          console.error(err);
        });
    }
  }
})

在上面的示例中，我们首先定义了一个 data 属性 dataList，然后在 mounted() 钩子函数中调用了 loadData() 方法，该方法使用 Ajax 获取数据，并将数据存放在 dataList 属性中。这样，在页面加载完后，数据就被加载进来了。

示例说明二：设置页面标题

Vue({
  el: '#app',
  data: {
    title: 'My Page'
  },
  mounted() {
    document.title = this.title;
  }
})

在上面的示例中，我们定义了一个 data 属性 title，然后在 mounted() 钩子函数中将页面的标题设置为该 title 属性。这样，在页面加载完成后，页面的标题就被设置了。