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>
标签:生命周期,钩子,onMounted,vue3,组件,挂载,message From: https://www.cnblogs.com/beichengshiqiao/p/18314489