Question

我尝试提出一个使用每个Vue.js生命周期挂钩的示例。对于beforeMount()，我无法提出任何用例。在研究过程中，我的同伴阅读：

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

当我想使用此生命周期挂钩时，有人可以提供示例吗？

Answer 1

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

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

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

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

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

1 个答案: