vue3 中 Mounted

和 Created 生命周期的区别是什么？

在Vue3中，Mounted和Created两个生命周期函数的区别在于它们的执行顺序不同。Created函数在组件实例被创建之后立即执行，而Mounted函数在组件挂载到DOM元素后执行。因此，Mounted函数可以访问DOM元素，而Created函数不能。另外，Created函数用于组件的初始化，而Mounted函数用于执行一些与DOM元素相关的操作。

相关问题

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`，并将其渲染到了模板中。

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中自定义指令的一种用法。