Vue.js前端框架教程10:Vue生命周期钩子onBeforeMount 和onMounted

文章目录

生命周期钩子

Vue 3 中,onBeforeMountonMounted 是生命周期钩子,它们在组件的生命周期中的不同阶段被调用。这些钩子通常用于执行与 DOM 相关的操作,例如数据获取、设置 DOM 元素或者执行副作用。

以下是这两个生命周期钩子的详细说明:

onBeforeMount

onBeforeMount 钩子在组件第一次挂载到 DOM 之前被调用,此时组件的模板已经渲染成 HTML,但还没有插入文档中。在这个钩子中,组件的响应式属性已经可用,但它们还没有被渲染到 DOM 中。

javascript 复制代码
import { onBeforeMount } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      // 在这里执行代码,组件模板已经渲染,但还没有挂载到 DOM
      console.log('组件即将挂载');
    });
  }
};

onMounted

onMounted 钩子在组件第一次挂载到 DOM 之后被调用。此时,组件的模板已经渲染并插入到文档中,可以执行 DOM 相关的操作,如访问子组件实例或子元素。

javascript 复制代码
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      // 在这里执行代码,组件已经挂载到 DOM
      console.log('组件已经挂载');
    });
  }
};

使用示例

以下是一个简单的 Vue 3 组件示例,展示了如何使用 onBeforeMountonMounted

html 复制代码
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

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

const message = ref('Hello, Vue!');

onBeforeMount(() => {
  console.log('组件即将挂载,模板已渲染但未插入 DOM');
});

onMounted(() => {
  console.log('组件已经挂载到 DOM');
});
</script>

在这个示例中:

  • message 是一个响应式引用,用于存储组件中显示的消息。
  • onBeforeMount 钩子在组件即将挂载时被调用,此时模板已经渲染但还没有插入 DOM
  • onMounted 钩子在组件已经挂载到 DOM 后被调用。

这些生命周期钩子可以帮助你更好地控制组件的初始化和挂载过程,确保在正确的时间执行特定的操作。

相关推荐
患得患失94925 分钟前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_27 分钟前
解决VSCode无法加载Json架构问题
java·服务器·前端
java叶新东老师2 小时前
git stash 命令详解
linux·运维·flink
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
写bug的羊羊3 小时前
CentOS 9 配置国内 YUM 源
linux·运维·centos
90后的晨仔3 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang3 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔3 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl