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

Question

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

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

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

Answer 1

我能想到的最佳用例来自使用 Symfony/Twig 将数据直接注入 Vue 应用程序。在挂载发生之前，您仍然可以看到实际的、未转换的元素，然后它被 Vue 替换。您可以访问的一个特定部分是数据属性。在下面的例子中，data-fizz如果我们在到达mounted.

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>