vue.js 渲染完成回调

<template>
  <div>
    <!-- 组件模板 -->
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('组件已挂载，DOM 渲染完成');
    // 在这里可以进行 DOM 操作或数据加载
  }
}
</script>

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Hello, World!';
      this.$nextTick(() => {
        console.log('DOM 已更新');
        // 在这里可以安全地操作更新后的 DOM
      });
    }
  }
}
</script>

<template>
  <div ref="myDiv">
    <!-- 组件模板 -->
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      const divElement = this.$refs.myDiv;
      console.log(divElement); // 此时可以确保获取到 DOM 元素
    });
  }
}
</script>