vue合并策略

什么时候会触发合并策略

        Vue的合并策略有两种情况，一种是父子类，一种是在创建Vue实例或组件时发生的，用于处理数据对象和其他选项的冲突。在合并过程中，每个Vue实例都需要与全局选项进行合并，这个过程是自动完成的。这种合并策略是基于Object.assign()方法的，它会将子组件的属性和父组件的属性合并在一起，如果存在同名属性，子组件的属性会覆盖父组件的属性。对于生命周期钩子函数、watch选项、props类似选项等，Vue也提供了不同的合并策略，以满足不同的需求。

  Vue提供了一个Vue.extend的静态方法，它是基于基础的Vue构造器创建一个“子类”，而这个子类所传递的选项配置会和父类的选项配置进行合并。

结论前置

        不同的合并策略可能会对最终的结果产生不同的影响，应尽可能避免重复定义相同属性、覆盖重要函数等。

自定义选项合并策略：

        Vue提供了Vue.config.optionMergeStrategies API，用于自定义选项的合并策略。这意味着您可以在Vue应用中定义自己的选项合并策略。

// 访问Vue的配置对象  
var config = Vue.config;  
  
// 定义自定义的合并策略  
config.optionMergeStrategies.propsData = function(parent, child, vm, key) {  
  // 在这里实现自定义的合并策略  
  // 将parent和child的propsData对象合并在一起  
};  
  
// 创建Vue实例并使用自定义的合并策略  
var app = new Vue({  
  el: '#app',  
  mixins: [myMixin],  
  propsData: { foo: 'foo' },  
  // 其他选项...  
});

常规选项合并：

        这种策略用于合并一些常规的属性，如el、data。对于这些属性，Vue会采用深度合并策略，将子组件的属性和父组件的属性合并在一起，如果有同名属性，子组件的属性会覆盖父组件的属性。

自带资源选项合并：

        Vue默认会带几个选项，分别是components组件, directive指令, filter过滤器。父类选项将以原型链的形式被处理。子类必须通过原型链才能查找并使用内置组件和内置指令。如果有同名属性，子组件的属性会覆盖父组件的属性。

生命周期钩子合并：

        有12个，除常用的8个外，还有（activated,deactivated,errorCaptured,serverPrefetch）。都采用了函数覆写的策略。子类和父类相同的选项将合并成数组，这样在执行子类钩子函数时，父类钩子选项也会执行，并且父会优先于子执行。

watch选项合并：

        对于watch属性，Vue采用了深度合并的策略。只要父选项有相同的观测字段，则和子的选项合并为数组，并且数组的选项成员，可以是回调函数，选项对象，或者函数名。父会优先于子执行。

props、methods、inject、computed合并：

对于这些类似选项，Vue采用了深度合并的策略。当子组件和父组件存在同名选项时，子组件的选项会覆盖父组件的选项。

注：

深度合并是指将两个对象进行深度比较，并合并所有相同的属性。这意味着如果两个对象有相同的属性，那么它们的值将被合并在一起。在Vue中，可以使用Vue.mergeOptions()方法进行深度合并。

浅合并则是指只合并两个对象的顶层属性。如果两个对象有相同的属性，那么后面的对象的值会覆盖前面的对象的值。在Vue中，可以使用Vue.mixin()方法进行浅合并。

这两种合并方式可以根据需要进行选择。深度合并可以确保对象的所有相同属性都被合并，而浅合并则可以确保对象的顶层属性被覆盖。

以上信息仅供参考，可以查阅Vue的官方文档获取更准确和全面的信息。