[Vue] mixin合并效果探究
data混入
官方文档说数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
看下面两个例子，就知道效果了
第1个例子 a b都是 data返回对象中的key，有冲突以组件为准，组件中的属性覆盖mixin的属性![[Vue] mixin合并效果探究](https://img.it610.com/image/info9/c58a4b04b33e484a980275fd90cfe10a.jpg)
文章图片
![[Vue] mixin合并效果探究](https://img.it610.com/image/info9/ea7ec4b105b84fb78a3568b3f34fabff.jpg)
文章图片
第2个例子c是 data返回对象中的key，且c的value是一个对象，这个对象的key依旧有冲突。
先看例子![[Vue] mixin合并效果探究](https://img.it610.com/image/info9/9733f41a0a714e24b0bc12b6dc119b20.jpg)
文章图片
![[Vue] mixin合并效果探究](https://img.it610.com/image/info9/65a75b4090f34c75b132e3ab67e5df79.jpg)
文章图片
c: { age: 16, name: "mike", gender: "male"}
对象c的合并结果并不是覆盖，而是将mixin和组件的c合并了，c中冲突的age取组件的属性，不冲突的name，gender得到保留。
生命周期函数的混入
官方文档里写生命周期函数，同名的生命周期钩子将合并为一个数组，因此都将被调用。
执行顺序是，混入对象的生命周期函数将在组件自身钩子之前调用。![[Vue] mixin合并效果探究](https://img.it610.com/image/info9/318be6aa5957470998de3f13f1d3319b.jpg)
文章图片
![[Vue] mixin合并效果探究](https://img.it610.com/image/info9/ee06a082ea9b44d3978bf9f51093f0c6.png)
文章图片
合并为数组的意思是产生下面的效果
mounted: [mountedFunctionFromMixin, mountedFunctionInComponent]
值为对象的选项的合并
值为对象的选项，例如methods、components 和directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
【[Vue] mixin合并效果探究】同步更新到自己的语雀
https://www.yuque.com/diracke...
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show
- 如何在手机上查看测试vue-cli构建的项目