vue:extend和mixin的区别

悠悠 2022-09-12 14:57 231阅读 0赞

![在这里插入图片描述][82e2f22231b84f8fa9df10dae59a097c.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16]  
提到extend 总是感觉有些熟悉，都是可以共用一些方法和属性这不就是mixin混入吗？其实两者还是有较大差别的，可以类比后端语言的继承和多态，extend类似继承，而mixin类似多态。

vue extend

vue.extend 返回的是一个 **拓展实例构造器** 也就是一个预设了部分选项的vue实例构造器。

> https://www.cnblogs.com/xzybk/p/12786680.html  
> 部分理解由此篇博客产出

使用extend之前首先先和混入mixin比较一下

**mixin混入源码操作：**

import {  mergeOptions } from '../util/index'
    
    export function initMixin (Vue: GlobalAPI) { 
      Vue.mixin = function (mixin: Object) { 
        this.options = mergeOptions(this.options, mixin)
        return this
      }
    }

> mixin方法知识在初始化实例的时候传递配置对象的一个拓展  
> 利用mergeOptions方法合并options

**extend源码部分：**  
![在这里插入图片描述][0b989c92e33c46ce8123d5c1b371eb32.png]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_11_color_FFFFFF_t_70_g_se_x_16]  
最后返回的Sub其实是一个构造函数，而且继承自Vue，也就是说extend方法返回的是Vue的一个子类。

> 而extend是使用基础Vue构造器，创建一个子类，参数是一个包含组件选择项的对象。

### 区别 ###

> mixin是对Vue类的options进行混入。  
> 所有Vue的实例对象(全局混入)都会具备混入进来的配置行为。

> extend是产生一个继承自Vue类的子类，只会影响这个子类的实例对象，不会对Vue类本身以及Vue类的实例对象产生影响。

[82e2f22231b84f8fa9df10dae59a097c.png]: /images/20220828/c42c1374bd7e4a60a701b27199cf455f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/dc4e3b8a6ad1406497f121ec1db11898.png
[0b989c92e33c46ce8123d5c1b371eb32.png]: /images/20220828/c7615fb886bd4b07bf6f9b9c8ac48519.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_11_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/789906566bff43be99447f41995df489.png