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>

 

posted @ 2024-07-21 15:11  侬侬发  阅读(2)  评论(0编辑  收藏  举报