Vue2.0学习-4-可复用性&组合--1--混入

最新推荐文章于 2023-04-24 23:05:24 发布

naildingding

最新推荐文章于 2023-04-24 23:05:24 发布

阅读量153

点赞数

分类专栏：框架—Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/small_sesame/article/details/119937081

版权

框架—Vue 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue.js中的混入（mixins）机制，包括如何创建和使用局部混入，以及混入对象如何与组件选项合并。在数据对象和钩子函数的合并过程中，混入对象会优先调用。同时，全局混入需谨慎使用，因为它们会影响到所有Vue实例。此外，还讨论了自定义选项合并策略，允许开发者定制合并逻辑，如methods和computed等。

摘要由CSDN通过智能技术生成

1、基础：mixins:[myMixin]

通过这个 mixins 选项名，来将 myMixin这个混入对象，“混合”到另一个Vue组件中。

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

2、选项合并

数据对象data，数据合并，如果发生同名冲突，以组件数据优先。

同名钩子函数，合并为一个数组，都被调用。混入对象钩子函数在组件自身钩子函数之前调用。

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

值为对象的选项，如methods、computed、directives，合并为一个对象。如果发生同名冲突，以组件数据优先。

3、全局混入：Vue.mixin({...});

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。

4、自定义选项合并策略：Vue.config.optionMergeStrategies

自定义选项将使用默认策略，即简单地覆盖已有值。
如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // 返回合并后的值
}

对于多数值为对象的选项，可以使用与 methods 相同的合并策略：

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

可以在 Vuex 1.x 的混入策略里找到一个更高级的例子：

const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  return {
    getters: merge(toVal.getters, fromVal.getters),
    state: merge(toVal.state, fromVal.state),
    actions: merge(toVal.actions, fromVal.actions)
  }
}