前端问答社区

说说你对vue的mixin的理解,有什么应用场景?

Javan 发布于 8个月前 分类:Vue

mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项,这些选项将会被合并到最终的选项中,使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说,如果你的混入包含一个 created 钩子,而创建组件本身也有一个,那么两个函数都会被调用。

Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

个人总结:

mixin 就是混入,支持混入vue组件的任意,可以在多个组件混入相同的代码以实现相同的功能,可以减少代码重复。

同一个生命周期,混入会比组件先执行。如果有多个混入,则按其放在数组中的顺序执行。

回复

共0条回复 我来回复
  • 暂无回复内容