vue3 onMounted是一个生命周期钩子函数

  • onMounted一个生命周期钩子函数,在组件挂载到 DOM 后运行。在这里你可以执行需要在组件可用后进行的操作,比如获取数据、设置订阅或初始化第三方库。
  • 使用示例:
import { onMounted } from 'vue';

onMounted(() => {
  // 组件挂载后执行代码
  console.log('组件已挂载!');
});
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const message = ref('你好,Vue 3!'); // 创建一个响应式引用

    // 更新消息的函数
    const updateMessage = () => {
      message.value = '你好,Composition API!';
    };

    // 组件挂载后执行的操作
    onMounted(() => {
      console.log('组件挂载时的消息:', message.value);
    });

    return {
      message,
      updateMessage,
    };
  },
};
</script>

<style>
/* 在这里添加你的样式 */
</style>

 

相关文章

这篇文章我们将通过debug源码的方式来带你搞清楚defineAsync...
欧阳老老实实的更新自己的高质量vue源码文章,还被某2.6k st...
前言 在Vue3.5版本中响应式 Props 解构终于正式转正了,这个...
组合式 (Composition) API 的一大特点是“非常灵活”,但也因...
相信你最近应该看到了不少介绍Vue Vine的文章,这篇文章我们...
前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文...