【前端面试】在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 在触发时机、可用资源和使用场景上有明显区别,开发者可以根据具体需求在不同的钩子函数中执行相应的操作。

相关推荐
知识分享小能手1 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one1 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲1 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830943 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮3 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel4 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常4 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip4 小时前
JavaScript事件流
前端·javascript
小菜全5 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json