Vue--原理--mixin

痛定思痛。 2022-12-27 02:28 162阅读 0赞

原文网址：[Vue--原理--mixin\_IT利刃出鞘的博客-CSDN博客][Vue--_--mixin_IT_-CSDN]

# 其他网址 #

> [Vue-源码详解mixin混入和合并策略 | bluesky个人小站][Vue-_mixin_ _ bluesky]  
> [vue2.0源码解读之选项合并策略 optionMergeStrategies\_想到什么写什么 - SegmentFault 思否][vue2.0_ optionMergeStrategies_ - SegmentFault]  
> [从源码看 Vue 中的 Mixin - osc\_s5ssp1ty的个人空间 - OSCHINA - 中文开源技术交流社区][Vue _ Mixin - osc_s5ssp1ty_ - OSCHINA -]

# mixin基础 #

# 选项合并策略 #

> 在vue源码中搜索上边文章的关键字即可（WebStorm搜索方法：ctrl+shift+f=> Scope=> All Places） 。
> 
> 默认的选项合并策略：node\_modules/vue-template-compiler/build.js
> 
>     const defaultStrat = function (parentVal: any, childVal: any): any {
>         return childVal === undefined
>             ? parentVal
>             : childVal
>     }
> 
> parentVal, childVal 分别对应于父组件和子组件的选项：若子组件的选项不存在，使用父组件的选项；若子组件的选项存在，使用子组件自身的。
> 
> 不同的选项根据自身的混入策略合并方向不一样。

<table> 
 <tbody> 
  <tr> 
   <td style="width:314px;"><strong>项</strong></td> 
   <td style="width:153px;"><strong>策略</strong></td> 
   <td style="width:375px;"><strong>说明</strong></td> 
  </tr> 
  <tr> 
   <td style="width:314px;">el, propsData</td> 
   <td style="width:153px;">parent –&gt; child</td> 
   <td style="width:375px;">默认合并策略。有child则用child选项，否则用parent选项</td> 
  </tr> 
  <tr> 
   <td style="width:314px;">生命周期钩子</td> 
   <td style="width:153px;">parent –&gt; child</td> 
   <td style="width:375px;"></td> 
  </tr> 
  <tr> 
   <td style="width:314px;">data</td> 
   <td style="width:153px;">parent –&gt; child</td> 
   <td style="width:375px;"></td> 
  </tr> 
  <tr> 
   <td style="width:314px;">components，directives，filters</td> 
   <td style="width:153px;">parent &lt;– child</td> 
   <td style="width:375px;"></td> 
  </tr> 
  <tr> 
   <td style="width:314px;">watch</td> 
   <td style="width:153px;">parent –&gt; child</td> 
   <td style="width:375px;"></td> 
  </tr> 
  <tr> 
   <td style="width:314px;">props，methods，computed，inject</td> 
   <td style="width:153px;">parent &lt;– child</td> 
   <td style="width:375px;"></td> 
  </tr> 
  <tr> 
   <td style="width:314px;">provide</td> 
   <td style="width:153px;">parent –&gt; child</td> 
   <td style="width:375px;"></td> 
  </tr> 
 </tbody> 
</table>

[Vue--_--mixin_IT_-CSDN]: https://knife.blog.csdn.net/article/details/110826111
[Vue-_mixin_ _ bluesky]: http://blueskyawen.com/2019/07/16/vue-learn-in-minix/
[vue2.0_ optionMergeStrategies_ - SegmentFault]: https://segmentfault.com/a/1190000007087912
[Vue _ Mixin - osc_s5ssp1ty_ - OSCHINA -]: https://my.oschina.net/u/4417460/blog/3531983