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

在 Vue 3 里，beforeMount 和 mounted 是两个重要的生命周期钩子函数，它们在选项式 API 和组合式 API
中都有对应的使用方式。下面从触发时机、可用资源、使用场景等方面详细介绍它们的区别：

选项式 API 中的区别

1. 触发时机

• beforeMount：该钩子函数在挂载开始之前被调用，此时模板编译已经完成，但是虚拟 DOM 还未被渲染成真实 DOM 并挂载到页面上。也就是说，$el 属性已经存在，但它的内容仍然是模板字符串，还未被替换为实际渲染后的 DOM 元素。
• mounted：在挂载完成后调用，此时模板已经成功编译，虚拟 DOM 已经被渲染成真实 DOM 并挂载到页面上，$el 已经是渲染好的真实 DOM 元素。

2. 可用资源

• beforeMount：在这个阶段，组件实例已经完成了数据观测、property 和 method 的计算、watch/event 事件回调的配置等，所以可以访问 data 中的数据和 methods 里的方法。不过由于还未挂载，不能对真实 DOM 进行操作。例如：

export default {
    data() {
        return {
            message: 'Hello, Vue 3!'
        };
    },
    beforeMount() {
        // 可以访问 data 中的数据
        console.log(this.message); 
        // 此时 $el 存在，但内容是模板字符串
        console.log(this.$el.outerHTML); 
    }
}

• mounted：除了可以访问 data 和 methods 之外，还可以对真实 DOM 进行操作。因为此时组件已经挂载到页面上，真实 DOM 已经生成。例如：

<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 进行一些预处理操作，比如添加一些自定义的属性或者样式类。例如：

export default {
    beforeMount() {
        // 给 $el 添加自定义属性
        this.$el.setAttribute('data-custom', 'custom - value');
    }
}

• mounted：常用于操作 DOM、初始化第三方的 DOM 库、订阅事件或消息等。例如，使用 Chart.js 绘制图表：

<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 函数。使用方式如下：

<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>

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