vue mixin 全局引入

Question

//mixins.js
var MyPlugin  = {}
MyPlugin.install = function(Vue,options){
  Vue.mixin({
    created: function () {
     console.log("996")
    }
  })
}
export default MyPlugin


//main.js
import components from './plugins/mixins.js'
Vue.use(components)

new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App),
})

我的需求是在项目全局注入一个console.log("996")方法，我在plugins文件夹下新建mixins.js文件，使用install方法创建插件，然后在main.js 引入。

目前的问题是当我第一次进入项目时，console.log('996')执行了3次，当我把Vue.use(components)这句代码放在main.js的最下面时，就只执行1次。

各位大神帮忙看下怎么回事呀

Answer 1

你这个问题应该是对插件不熟悉吧。。

Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。

Answer 2

Vue.mixin()的作用是在所有组件(Vue实例)中注入一个方法，你这样就是在所有组件的上新增了一个同名的created钩子函数，所以每个组件都会执行这个created方法，main.js中有一个vue根实例、App.vue一个组件、App.vue中应该还引入了一个组件，如果没有改的话应该是HelloWorld.vue组件，所以会执行3次。
全局注入方法可以将方法添加到Vue的原型上，如:
// main.js

    Vue.prototype.$log = function() { // 任何一个组件都可以通过this.$log()调用该全局方法
      console.log("996");
    }
    new Vue({
      created () {
        this.$log();
      },
      render: h => h(App),
    }).$mount('#app');