【前端面试】在Vue3中,beforeMount和mounted钩子函数有什么区别?

在 Vue 3 里,beforeMountmounted 是两个重要的生命周期钩子函数,它们在选项式 API 和组合式 API

中都有对应的使用方式。下面从触发时机、可用资源、使用场景等方面详细介绍它们的区别:

选项式 API 中的区别

1. 触发时机
  • beforeMount :该钩子函数在挂载开始之前被调用,此时模板编译已经完成,但是虚拟 DOM 还未被渲染成真实 DOM 并挂载到页面上。也就是说,$el 属性已经存在,但它的内容仍然是模板字符串,还未被替换为实际渲染后的 DOM 元素。
  • mounted :在挂载完成后调用,此时模板已经成功编译,虚拟 DOM 已经被渲染成真实 DOM 并挂载到页面上,$el 已经是渲染好的真实 DOM 元素。
2. 可用资源
  • beforeMount :在这个阶段,组件实例已经完成了数据观测、propertymethod 的计算、watch/event 事件回调的配置等,所以可以访问 data 中的数据和 methods 里的方法。不过由于还未挂载,不能对真实 DOM 进行操作。例如:
vue 复制代码
export default {
    data() {
        return {
            message: 'Hello, Vue 3!'
        };
    },
    beforeMount() {
        // 可以访问 data 中的数据
        console.log(this.message); 
        // 此时 $el 存在,但内容是模板字符串
        console.log(this.$el.outerHTML); 
    }
}
  • mounted :除了可以访问 datamethods 之外,还可以对真实 DOM 进行操作。因为此时组件已经挂载到页面上,真实 DOM 已经生成。例如:
vue 复制代码
<template>
    <div id="myDiv">{{ message }}</div>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello, Vue 3!'
        };
    },
    mounted() {
        // 可以访问 data 中的数据
        console.log(this.message); 
        // 可以操作真实 DOM
        const div = this.$el.querySelector('#myDiv');
        div.style.color = 'red';
    }
}
</script>
3. 使用场景
  • beforeMount:可以对即将挂载的 DOM 进行一些预处理操作,比如添加一些自定义的属性或者样式类。例如:
vue 复制代码
export default {
    beforeMount() {
        // 给 $el 添加自定义属性
        this.$el.setAttribute('data-custom', 'custom - value');
    }
}
  • mounted :常用于操作 DOM、初始化第三方的 DOM 库、订阅事件或消息等。例如,使用 Chart.js 绘制图表:
vue 复制代码
<template>
    <canvas id="myChart"></canvas>
</template>

<script>
import Chart from 'chart.js/auto';

export default {
    mounted() {
        const ctx = this.$el.querySelector('#myChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }
}
</script>

组合式 API 中的体现

在组合式 API 中,beforeMount 对应 onBeforeMount 函数,mounted 对应 onMounted 函数。使用方式如下:

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

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

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

onBeforeMount(() => {
    console.log('Before mount');
    // 可以访问响应式数据
    console.log(message.value); 
});

onMounted(() => {
    console.log('Mounted');
    // 可以操作真实 DOM
    const div = document.querySelector('div');
    div.style.color = 'blue';
});
</script>

综上所述,beforeMountmounted 在触发时机、可用资源和使用场景上有明显区别,开发者可以根据具体需求在不同的钩子函数中执行相应的操作。

相关推荐
大厂码农老A2 小时前
P10老板一句‘搞不定就P0’,15分钟我用Arthas捞回1000万资损
java·前端·后端
拜无忧2 小时前
【教程】Vue 3 项目架构终极指南:一份面向新手的、高性能的实战教程
前端·vue.js
星海穿梭者2 小时前
SQL SERVER 查看锁表
java·服务器·前端
一枚前端小能手2 小时前
「周更第5期」实用JS库推荐:RxJS
前端·javascript·rxjs
影i2 小时前
关于浏览器 Cookie 共享机制的学习与梳理
前端
文心快码BaiduComate2 小时前
文心快码已接入GLM-4.6模型
前端·后端·设计模式
RoyLin2 小时前
C++ 原生扩展、node-gyp 与 CMake.js
前端·后端·node.js
我是天龙_绍3 小时前
二进制散列值 搞 权限组合,记口诀:| 有1则1 ,&同1则1
前端
江城开朗的豌豆3 小时前
拆解微信小程序的“积木盒子”:这些原生组件你都玩明白了吗?
前端·javascript·微信小程序
爱吃甜品的糯米团子3 小时前
CSS Grid 网格布局完整指南:从容器到项目,实战详解
前端·css