vue.js 中何时使用 beforeMount 生命周期方法？答案

【问题标题】：When to use the lifecycle method beforeMount in vue.js?vue.js 中何时使用 beforeMount 生命周期方法？
【发布时间】：2019-07-17 13:31:36
【问题描述】：

我尝试提出一个何时使用每个 Vue.js 生命周期挂钩的示例。对于beforeMount()，我想不出任何用例。在研究时，我还阅读了：

很可能我们永远不需要使用这个钩子。

当我想使用这个生命周期钩子时，有人可以提供一个例子吗？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

我能想到的最佳用例来自Directly injecting data to Vue apps with Symfony/Twig。在挂载发生之前，您仍然可以在被 Vue 替换之前看到实际的、未转换的元素。您可以访问的特定部分是data properties。在下面的示例中，如果我们在到达mounted 之前不从中取出东西，我们将丢失data-fizz。

const app = new Vue({
  el: "#app",
  data() {
    return {
      foo: "bar"
    };
  },
  template: "<div>{{foo}}</div>",
  beforeMount() {
    console.log(this.$el); // <div id="app" data-fizz="buzz"></div>
    console.log(this.$el.dataset.fizz); // buzz
  },
  mounted() {
    console.log(this.$el); // <div>bar</div>
    console.log(this.$el.dataset.fizz); // undefined
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app" data-fizz="buzz"></div>

【讨论】：