时间戳

首页 > 解决方案 > 扩展 Vue 生命周期钩子

vue.js - 扩展 Vue 生命周期钩子

问题描述

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

mounted(){
   this.mySpecialMethod();
}

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

标签： vue.jsvuejs2

解决方案

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

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

如果您想扩展它以便它可以作为库重用，您可以从中创建一个插件。

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>

推荐阅读