前端必知必会-Vue ‘beforeMount‘ 生命周期钩子

---

‘beforeMount’ 钩子

beforeMount 生命周期钩子在组件挂载之前发生，也就是在组件添加到 DOM 之前。

我们应该避免尝试从 beforeMount 生命周期钩子访问 DOM 元素，因为在组件挂载之前 DOM 元素是不可访问的。

下面的示例显示我们目前无法访问组件中的 DOM 元素，CompOne.vue 中的第 11 行不起作用，并在浏览器控制台中生成错误：

示例
CompOne.vue：

<template>
<h2>组件h2>
<p>这是组件p>
<p ref="pEl" id="pEl">我们尝试从 'beforeMount' 钩子访问此文本。p>
template>

<script>
export default {
beforeMount() {
console.log("beforeMount: 这是在组件挂载之前。");
this.$refs.pEl.innerHTML = “你好，世界！”； // <-- 我们在此阶段无法访问“pEl”DOM 元素-->
}
}
script>

App.vue:

<template>
<h1>“beforeMount”生命周期钩子h1>
<p>我们可以看到“beforeMount”生命周期钩子中的 console.log() 消息，但我们尝试对“pEl”段落 DOM 元素进行的文本更改不起作用，因为“pEl”段落 DOM 元素在此阶段尚不存在。p>
<button @click="this.activeComp = !this.activeComp">添加/删除组件button>
<div>
<comp-one v-if="activeComp">comp-one>
div>
template>

<script>
export default {
data() {
return {
activeComp: false
}
}
}
script>

<style>
#app > div {
  border: dashed black 1px;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
  background-color: lightgreen;
}
#pEl {
  background-color: lightcoral;
  display: inline-block;
}
style>

---

总结

本文介绍了Vue ‘beforeMount’ 生命周期钩子的使用，如有问题欢迎私信和评论