扩展 Vue 生命周期钩子答案

【问题标题】：Extending Vue Lifecycle Hooks扩展 Vue 生命周期钩子
【发布时间】：2018-06-15 13:28:29
【问题描述】：

我有一个特殊的应用程序，我想在每个组件安装时对其运行一个方法。所以我可以将该方法作为一个全局 mixin 或其他东西，然后简单地做..

mounted(){
   this.mySpecialMethod();
}

但是，我想知道是否可以简单地扩展 Vues 挂载钩子，以便在挂载时始终在每个组件上运行该方法。我无法在这方面的信息中找到。

【问题讨论】：

是的，fork vuejs 并在这方面做你的工作，但是......为什么不你提到的 mixin？
@mklimek "Why not mixin..." 只是因为不必在每个组件的mounted() 中添加该功能，在每个组件安装时让它发生会非常酷。这样，如果其他人添加组件但不使用 mixin 功能，它也可以工作。但如果没有其他简单的方法，我肯定会使用 mixin。
或者，您可以创建一个具有该方法的组件，而不是使用 mixin，并且每个组件都可以扩展该类而不是通用 vue。
@skribe 似乎是一个很酷的想法，除非你有一个不需要它的想法；)

标签： vue.js vuejs2

【解决方案1】：

如果你真的想让所有东西都调用你的mounted钩子，你可以使用global mixin。

下面，我们有一个 mixin myMixin，它会在每次挂载或销毁某些东西时记录到控制台。运行示例，可以看到每次点击加号按钮时，都会运行组件的mounted钩子和mixin的钩子。

如果你想扩展它以便它可以作为一个库重复使用，你可以创建一个 plugin 出来。

const foo = {
  template: "<div @click='onClick'>hello</div>",
  mounted() {
    console.log("Foo's mounted");
  },
  methods: {
    onClick() {
      console.log("click");
    }
  }
}

const myMixin = {
  mounted() {
    console.log("I've been mounted");
  },
  destroyed() {
    console.log("I've been destroyed");
  }
};

Vue.mixin(myMixin);

const app = new Vue({
  el: "#app",
  data() {
    return {
      foos: []
    };
  },
  components: {
    foo
  },
  methods: {
    add() {
      this.foos.push("fizz");
    },
    remove() {
      this.foos.pop();
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <button @click="add()">+</button><button @click="remove()">-</button>
  <ul>
    <li v-for="f in foos">
      <foo></foo>
  </ul>
</div>

【讨论】：

太棒了！我在很多事情上都使用过 mixins，但从未在其中使用过生命周期钩子。非常适合我的目的。