Vue页面加载完成后如何自动加载自定义函数

首先，在Vue中，自动加载自定义函数的最常见的方式是使用Vue的生命周期。在Vue中，每个组件都有钩子函数，在这些钩子函数中，我们可以添加我们自己的代码，以在其相应的生命周期内执行。其中，created、mounted、updated和destroyed是我们能够添加自定义代码的最常见的生命周期函数。

接下来，我将向您展示如何在Vue页面加载完成后自动加载自定义函数。其中，我将以两个示例说明这个过程：

1. 在mounted生命周期中加载自定义函数

在mounted生命周期中，DOM元素已经被挂载，因此我们可以安全地读取和修改DOM元素。在此钩子函数中，我们可以执行加载的自定义函数，并执行一些初始化。

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello World'
    }
  },
  mounted () {
    this.customFunction();
  },
  methods: {
    customFunction () {
      console.log('Custom Function Loaded');
    }
  }
}
</script>

在上面的代码中，我将一个customFunction()函数添加到mounted()方法中，当DOM元素被挂载时，customFunction()将会自动执行。

1. 使用Vue的watch来加载自定义函数

同时，Vue还提供了一种简便的方式来自动加载自定义函数，那就是利用Vue的watch属性监听数据的变化。我们可以创建一个watch对象，并监听一个特定的数据变化，当数据变化时，我们可以自动加载自定义函数。

示例代码如下所示：

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello World',
      isCustomFunctionLoaded: false
    }
  },
  watch: {
    isCustomFunctionLoaded () {
      this.customFunction();
    }
  },
  methods: {
    customFunction () {
      console.log('Custom Function Loaded');
    }
  },
  mounted () {
    this.isCustomFunctionLoaded = true;
  }
}
</script>

上面的代码中，我在data中创建了一个isCustomFunctionLoaded标志，然后创建了一个watch对象来监听isCustomFunctionLoaded标志的变化。当isCustomFunctionLoaded变为true时，我们就自动加载自定义函数。

在上述的两个示例中，你可以看到，我们可以在Vue中的某个阶段自动加载自己的代码，这使得我们可以执行一系列自定义操作。