How to run VueJS code only after Vue is fully loaded and initialized?

在Vue.js中，确保Vue完全加载并初始化后再运行代码是很重要的，特别是在处理DOM或者依赖于Vue实例的数据和方法时。Vue提供了几种方法来确保这一点。

1. 使用 mounted 生命周期钩子

在Vue组件中，mounted 钩子是在组件的模板和数据被渲染到DOM后调用的。因此，这是在Vue完全加载和初始化后运行代码的理想位置。

javascript
new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  mounted() {
    console.log('Vue实例已挂载完毕，可以执行相关操作！');
    this.doSomething();
  },
  methods: {
    doSomething() {
      // 在这里执行需要等Vue加载完成后的操作
      console.log(this.message);
    }
  }
});

在这个例子中，doSomething 方法将在Vue实例挂载完毕之后调用，因此可以安全地访问到data内的数据和DOM元素。

2. 使用 Vue.nextTick

有时，你可能需要在Vue完成DOM更新的周期后立即执行某些操作。Vue.nextTick 方法允许你在下次DOM更新循环结束之后执行延迟回调，在修改数据后立即使用这个方法，可以获取更新后的DOM。

javascript
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message';
      this.$nextTick(function () {
        // DOM 现在已经更新
        console.log('DOM已更新');
      });
    }
  }
});

这个例子中，updateMessage 方法改变了数据，然后利用$nextTick来确保在DOM更新之后运行代码。

3. 使用 async 和 await

在Vue 2.5及以上版本，支持在mounted和其他生命周期钩子中使用async函数。这使得你可以在执行异步操作的同时，保持代码的整洁和易于理解。

javascript
new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  async mounted() {
    await this.fetchData();
    console.log('数据已加载');
  },
  methods: {
    async fetchData() {
      // 假设这是一个获取数据的异步操作
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.message = 'Data fetched';
    }
  }
});

这里，fetchData 方法模拟了一个异步数据获取过程，mounted 钩子使用await确保在数据加载完成后才继续执行。

通过以上方法，可以确保在Vue.js应用中正确地管理和序列化异步操作和DOM更新，避免在未完全初始化完成时就运行某些操作，从而导致错误或不一致的行为。