vue.js - vue.js 什么时候使用生命周期方法 beforeMount？

Question

我试着给出一个何时使用每个 Vue.js 生命周期钩子(Hook)的例子。对于 beforeMount() 我想不出任何用例。在研究过程中，我还阅读了:

Most likely we’ll never need to use this hook.

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

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