Vue.mixin是Vue的全局混入功能,它会影响到每个Vue实例,且会影响所有组件的生命周期。使用Vue.mixin可以为Vue实例和组件添加全局的方法、属性、钩子函数等。
使用场景:
- 全局设置一些默认属性或方法,如全局的axios请求拦截器、响应拦截器等。
- 全局添加一些通用的方法或属性,如日期格式化、金额格式化等。
- 全局为所有组件添加一些公共的钩子函数,如beforeCreate钩子函数进行一些初始化操作。
原理代码:
// 定义一个全局的混入对象 var myMixin = { created: function () { this.logMessage('Hello from mixin!') }, methods: { logMessage: function (message) { console.log(message) } } } // 将全局混入对象应用到每个Vue实例中 Vue.mixin(myMixin) // 创建一个Vue实例 new Vue({ el: '#app', created: function () { this.logMessage('Hello from Vue instance!') } })
在上面的代码中,我们首先定义了一个全局的混入对象myMixin
,该对象包含一个created
钩子函数和一个logMessage
方法。
然后,通过调用Vue.mixin(myMixin)
将混入对象应用到每个Vue实例中。
最后,创建一个Vue实例时,会触发myMixin
对象中的created
钩子函数和实例中的created
钩子函数,从而打印出相关的日志信息。