如何在页面加载时调用 vue.js 函数

在Vue.js中，如果您希望在页面加载时调用一个函数，通常会把这个函数放在Vue实例的生命周期钩子中，比如created或者mounted。这两个钩子是用于在实例创建完成后进行代码运行的最常用的选择。

使用 created 钩子

created 钩子会在实例创建后立即被调用，此时组件的数据已经被设置，但是DOM还未进行渲染。这是进行数据初始化的好地方。

示例：

javascript
new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  created() {
    this.sayHello();
  },
  methods: {
    sayHello() {
      console.log('Hello from Vue!');
    }
  }
});

在这个例子中，sayHello函数会在Vue实例创建后立即调用，即在页面加载时。

使用 mounted 钩子

mounted 钩子会在实例被挂载后调用，此时所有的DOM结构都已经渲染完成，可以进行DOM操作或执行依赖于DOM的操作。

示例：

javascript
new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  mounted() {
    this.sayHello();
  },
  methods: {
    sayHello() {
      console.log('Hello from the mounted DOM!');
    }
  }
});

在这个例子中，sayHello函数会在DOM完全渲染和挂载到页面上后被调用，这是适合执行DOM操作的时机。

总结

选择created还是mounted钩子，取决于您的需要：

• 如果需要在DOM渲染之前进行数据操作，使用created。
• 如果需要在DOM渲染之后进行操作（例如，直接操作DOM或初始化依赖于DOM的外部库），使用mounted。

这样做可以确保代码的逻辑清晰且高效。