vue3怎么使用mounted

在 Vue 3 中，使用 `mounted` 钩子函数跟 Vue 2 是一样的。

在组件中，可以在 `setup` 函数中定义 `mounted` 钩子函数，并在其中进行一些初始化工作，例如获取数据、初始化插件等。例如：

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue 3!')

    const mounted = () => {
      console.log('Component mounted')
    }

    return {
      message,
      mounted
    }
  }
}
</script>

在上述组件中，当组件被挂载时，会触发 `mounted` 钩子函数，并输出日志信息 "Component mounted"。

相关问题

vue3的mounted

在Vue3中，mounted()函数被用来代替Vue2中的inserted()函数，作为全局自定义指令的一种方式。在main.ts文件中，我们可以通过以下方式创建一个全局自定义指令，并在mounted()函数中执行需要的操作：

import { createApp } from 'vue';

const app = createApp(App);
app.directive("my-focus", {
  mounted(el) {
    el.focus();
  }
});
app.use(store).use(router).mount('#app');

这样，在应用程序中使用该指令时，指定的元素会自动获取焦点。这是Vue3中自定义指令的一种用法。

vue3中mounted的代码演示

根据提供的引用内容，Vue3 中的组件选项 API 已经发生了一些变化，包括 `mounted` 钩子函数。在 Vue3 中，我们可以使用 `onMounted` 函数来代替 `mounted` 钩子函数。下面是一个示例代码：

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

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

export default {
  setup() {
    const message = ref('Hello, Vue3!');

    onMounted(() => {
      console.log('mounted');
    });

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

在上面的代码中，我们使用了 `onMounted` 函数来代替 `mounted` 钩子函数，并在函数内部打印了一条信息。另外，我们还使用了 `ref` 函数来创建了一个响应式数据 `message`，并将其渲染到了模板中。