• 选项合并

    选项合并

    当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

    比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

    1. var mixin = {
    2.   data: function () {
    3.     return {
    4.       message: 'hello',
    5.       foo: 'abc'
    6.     }
    7.   }
    8. }
    10. new Vue({
    11.   mixins: [mixin],
    12.   data: function () {
    13.     return {
    14.       message: 'goodbye',
    15.       bar: 'def'
    16.     }
    17.   },
    18.   created: function () {
    19.     console.log(this.$data)
    20.     // => { message: "goodbye", foo: "abc", bar: "def" }
    21.   }
    22. })

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

    1. var mixin = {
    2.   created: function () {
    3.     console.log('混入对象的钩子被调用')
    4.   }
    5. }
    7. new Vue({
    8.   mixins: [mixin],
    9.   created: function () {
    10.     console.log('组件钩子被调用')
    11.   }
    12. })
    14. // => "混入对象的钩子被调用"
    15. // => "组件钩子被调用"

    值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

    1. var mixin = {
    2.   methods: {
    3.     foo: function () {
    4.       console.log('foo')
    5.     },
    6.     conflicting: function () {
    7.       console.log('from mixin')
    8.     }
    9.   }
    10. }
    12. var vm = new Vue({
    13.   mixins: [mixin],
    14.   methods: {
    15.     bar: function () {
    16.       console.log('bar')
    17.     },
    18.     conflicting: function () {
    19.       console.log('from self')
    20.     }
    21.   }
    22. })
    24. vm.foo() // => "foo"
    25. vm.bar() // => "bar"
    26. vm.conflicting() // => "from self"

    注意：Vue.extend() 也使用同样的策略进行合并。