vue3等creat执行完再mounted
时间: 2023-10-19 15:23:57 浏览: 30
在 Vue3 中,可以使用 `setup` 函数来代替 Vue2 中的 `beforeCreate` 和 `created` 钩子函数。`setup` 函数在组件实例被创建之前被调用,因此可以在 `setup` 函数中执行一些初始化操作,比如创建响应式数据、引入插件等。
在 `setup` 函数中,还可以使用 `onMounted` 钩子函数来代替 Vue2 中的 `mounted` 钩子函数。`onMounted` 钩子函数会在组件挂载到 DOM 上之后被调用,因此可以在这里执行一些与 DOM 相关的操作,比如获取 DOM 元素、绑定事件等。
下面是一个简单的示例代码:
```vue
<template>
<div ref="myDiv"></div>
</template>
<script>
import { onMounted, reactive } from 'vue';
export default {
setup() {
const state = reactive({
message: 'Hello Vue3!'
});
onMounted(() => {
console.log('组件已经挂载到 DOM 上了');
console.log('DOM 元素:', $refs.myDiv);
});
return {
state
};
}
}
</script>
```
在上面的代码中,我们使用 `reactive` 函数创建了一个响应式对象 `state`,并在 `onMounted` 钩子函数中输出了一些信息。最后,我们将 `state` 对象返回,以便在模板中使用。