1️⃣ 前言

Vue.extend 是 Vue 里的一个全局 API，它提供了一种灵活的挂载组件的方式，这个 API 在日常开发中很少使用，毕竟只在碰到某些特殊的需求时它才能派上用场( 比如全局的弹窗提示组件 )

1️⃣ Vue.extend 定义

官方定义
image.png

1️⃣ 源码分析

  1. export function initExtend(Vue: GlobalAPI) {
  2.   // 这个cid是一个全局唯一的递增的id
  3.   // 缓存的时候会用到它
  4.   Vue.cid = 0
  5.   let cid = 1
  7.   /**
  8.    * 类继承
  9.    */
  10.   Vue.extend = function(extendOptions: Object): Function {
  11.     // extendOptions 就是我我们传入的组件options
  12.     extendOptions = extendOptions || {}
  13.     const Super = this
  14.     const SuperId = Super.cid
  16.     // 每次创建完 Sub 构造函数后，都会把这个函数储存在 extendOptions 上的 _Ctor 中
  17.     // 下次如果用再同一个 extendOptions 创建 Sub 时
  18.     // 就会直接从 _Ctor 返回
  19.     const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
  20.     if (cachedCtors[SuperId]) {
  21.       return cachedCtors[SuperId]
  22.     }
  24.     const name = extendOptions.name || Super.options.name
  25.     if (process.env.NODE_ENV !== 'production' && name) {
  26.       validateComponentName(name)
  27.     }
  29.     // 创建 Sub 构造函数
  30.     const Sub = function VueComponent(options) {
  31.       this._init(options)
  32.     }
  34.     // 继承 Super，如果使用 Vue.extend，这里的 Super 就是 Vue
  35.     Sub.prototype = Object.create(Super.prototype)
  36.     Sub.prototype.constructor = Sub
  37.     Sub.cid = cid++
  39.     // 将组件的 options 和 Vue 的 options 合并，得到一个完整的 options
  40.     // 可以理解为将 Vue 的一些全局的属性，比如全局注册的组件和 mixin，分给了 Sub
  41.     Sub.options = mergeOptions(Super.options, extendOptions)
  42.     Sub['super'] = Super
  44.     // 下面两个设置了下代理，
  45.     // 将 props 和 computed 代理到了原型上
  46.     // 你可以不用关心这个
  47.     if (Sub.options.props) {
  48.       initProps(Sub)
  49.     }
  50.     if (Sub.options.computed) {
  51.       initComputed(Sub)
  52.     }
  54.     // 继承 Vue 的 global-api
  55.     Sub.extend = Super.extend
  56.     Sub.mixin = Super.mixin
  57.     Sub.use = Super.use
  59.     // 继承 assets 的 api，比如注册组件，指令，过滤器
  60.     ASSET_TYPES.forEach(function(type) {
  61.       Sub[type] = Super[type]
  62.     })
  64.     // 在 components 里添加一个自己
  65.     // 不是主要逻辑，可以先不管
  66.     if (name) {
  67.       Sub.options.components[name] = Sub
  68.     }
  70.     // 将这些 options 保存起来
  71.     // 一会创建实例的时候会用到
  72.     Sub.superOptions = Super.options
  73.     Sub.extendOptions = extendOptions
  74.     Sub.sealedOptions = extend({}, Sub.options)
  76.     // 设置缓存
  77.     // 就是上文的缓存
  78.     cachedCtors[SuperId] = Sub
  79.     return Sub
  80.   }
  81. }
  83. function initProps(Comp) {
  84.   const props = Comp.options.props
  85.   for (const key in props) {
  86.     proxy(Comp.prototype, `_props`, key)
  87.   }
  88. }
  90. function initComputed(Comp) {
  91.   const computed = Comp.options.computed
  92.   for (const key in computed) {
  93.     defineComputed(Comp.prototype, key, computed[key])
  94.   }
  95. }
  1. 其实这个 Vue.extend 做的事情很简单，就是继承 Vue，正如定义中说的那样，创建一个子类.<br />最终返回的这个 Sub 是：
  1. const Sub = function VueComponent(options) {
  2.   this._init(options)
  3. }
  1. 那么上文的例子中的 new Profile() 执行的就是这个方法了，因为继承了 Vue 的原型，这里的 _init 就是 Vue 原型上的 _init 方法
  1. Vue.prototype._init = function(options?: Object) {
  2.   const vm: Component = this
  3.   // a uid
  4.   vm._uid = uid++
  6.   let startTag, endTag
  7.   /* istanbul ignore if */
  8.   if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  9.     startTag = `vue-perf-start:${vm._uid}`
  10.     endTag = `vue-perf-end:${vm._uid}`
  11.     mark(startTag)
  12.   }
  14.   vm._isVue = true
  15.   // merge options
  16.   if (options && options._isComponent) {
  17.     initInternalComponent(vm, options)
  18.   } else {
  19.     vm.$options = mergeOptions(
  20.       resolveConstructorOptions(vm.constructor),
  21.       options || {},
  22.       vm
  23.     )
  24.   }
  25.   /* istanbul ignore else */
  26.   if (process.env.NODE_ENV !== 'production') {
  27.     initProxy(vm)
  28.   } else {
  29.     vm._renderProxy = vm
  30.   }
  31.   // expose real self
  32.   vm._self = vmnext
  33.   initLifecycle(vm)
  34.   initEvents(vm)
  35.   initRender(vm)
  36.   callHook(vm, 'beforeCreate')
  37.   initInjections(vm) // resolve injections before data/props
  38.   initState(vm)
  39.   initProvide(vm) // resolve provide after data/props
  40.   callHook(vm, 'created')
  42.   /* istanbul ignore if */
  43.   if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  44.     vm._name = formatComponentName(vm, false)
  45.     mark(endTag)
  46.     measure(`vue ${vm._name} init`, startTag, endTag)
  47.   }
  49.   if (vm.$options.el) {
  50.     vm.$mount(vm.$options.el)
  51.   }
  52. }
  1. 这个函数里有很多逻辑，它主要做的事情就是初始化组件的事件，状态等，大多不是我们本次分析的重点，目前只需要关心里面的这一段代码：
  1. if (options && options._isComponent) {
  2.   initInternalComponent(vm, options)
  3. } else {
  4.   vm.$options = mergeOptions(
  5.     resolveConstructorOptions(vm.constructor),
  6.     options || {},
  7.     vm
  8.   )
  9. }
  1. 执行 new Profile() 的时候没有传任何参数，所以这里的 options 是 undefined，会走到 else 分值，然后 resolveConstructorOptions(vm.constructor)其实就是拿到 Sub.options 这个东西，你可以在上文的 Vue.extend 源码中找到它，然后将 Sub.options 和 new Profile() 传入的options合并，再赋值给实例的$options，所以如果 new Profile() 的时候传入了一个 options，这个 options 将会合并到 vm.$options上，然后在这个 _init 函数的最后判断了下vm.$options.el 是否存在，存在的话就执行 vm.$mount 将组件挂载到 el 上，因为我们没有传 options，所以这里的 el 肯定是不存在的，所以你才会看到例子中的 new Profile().$mount('#mount-point') 手动执行了 $mount 方法，其实经过这些分析你就会发现，我们直接执行 new Profile({ el: '#mount-point' }) 也是可以的，除了 el 也可以传其他参数，接着往下看就知道了。<br />$mount 方法会执行“挂载”，其实内部的整个过程是很复杂的，会执行 render、update、patch 等等，由于这些不是本次文章的重点，你只需要知道她会将组件的 dom 挂载到对应的 dom 节点上就行了，如$mount('#mount-point') 会把组件 dom 挂载到 #mount-point这个元素上。

1️⃣ 使用

经过上面的分析，你应该大致了解了Vue.extend的原理以及初始化过程，以及简单的使用，其实这个初始化和平时的new Vue()是一样的，毕竟两个执行的同一个方法。但是在实际的使用中，我们可能还需要给组件传 props，slots 以及绑定事件，下面我们来看下如何做到这些事情。

2️⃣ 使用 Prop

假如我们有一个 message 组件

  1. <template>
  2.   <div class="message-box">
  3.     {{ message }}
  4.   </div>
  5. </template>
  7. <script>
  8.   export default {
  9.     props: {
  10.       message: {
  11.         type: String,
  12.         default: ''
  13.       }
  14.     }
  15.   }
  16. </script>

它需要一个 props 来显示这个 message，在使用 Vue.extend 时，要想给组件传参数，我们需要在实例化的时候传一个 propsData， 如:

  1. const MessageBoxCtor = Vue.extend(MessageBox)
  2. new MessageBoxCtor({
  3.   propsData: {
  4.     message: 'hello'
  5.   }
  6. }).$mount('#target')

你可能会不明白为什么要传propsData，没关系，接下来就来搞懂它，毕竟文章的目的就是彻底分析。
在上文的 _init 函数中，在合并完 $options 后，还执行了一个函数 initState(vm)，它的作用就是初始化组件状态（props，computed，data）：

  1. export function initState(vm: Component) {
  2.   vm._watchers = []
  3.   const opts = vm.$options
  4.   if (opts.props) initProps(vm, opts.props)
  5.   if (opts.methods) initMethods(vm, opts.methods)
  6.   if (opts.data) {
  7.     initData(vm)
  8.   } else {
  9.     observe((vm._data = {}), true /* asRootData */)
  10.   }
  11.   if (opts.computed) initComputed(vm, opts.computed)
  12.   if (opts.watch && opts.watch !== nativeWatch) {
  13.     initWatch(vm, opts.watch)
  14.   }
  15. }
  1. 别的不看，只看这个：
  1. if (opts.props) initProps(vm, opts.props)
  1. function initProps(vm: Component, propsOptions: Object) {
  2.   const propsData = vm.$options.propsData || {}
  3.   const props = (vm._props = {})
  4.   // ...省略其他逻辑
  5. }
  1. 这里的 propsData 就是数据源，他会从 vm.$options.propsData 上取，上文说过在执行 _init 的时候 new MessageBoxCtor(options) 的 options 会被合并和 vm.$options 上，所以我们就可以在 options 中传入 propsData 属性，使得 initProps() 能取到这个值，从而进行 props 的初始化。

2️⃣ 绑定事件

可能有时候我们还想给组件绑定事件，其实这里应该很多小伙伴都知道怎么做，我们可以通过vm.$on给组件绑定事件，这个也是平时经常用到的一个 api

  1. const MessageBoxCtor = Vue.extend(MessageBox)
  3. const messageBoxInstance = new MessageBoxCtor({
  4.   propsData: {
  5.     message: 'hello'
  6.   }
  7. }).$mount('#target')
  9. messageBoxInstance.$on('some-event', () => {
  10.   console.log('success')
  11. })

2️⃣ 使用示例

创建一个 hint 组件

  1. <template>
  2.   <div class="hint" v-if="show" ref="modal">
  3.     <div class="title">{{ title }}</div>
  4.     <div class="content">{{ content }}</div>
  5.     <div class="but">
  6.       <div class="no" @click="cancel">{{ cancelText }}</div>
  7.       <div class="ok" @click="confirm">{{ confirmText }}</div>
  8.     </div>
  9.   </div>
  10. </template>
  12. <script>
  13. export default {
  14.   data() {
  15.     return {
  16.       show: false,
  17.       title: "",
  18.       content: "",
  19.       confirmText: "确定",
  20.       cancelText: "取消",
  21.       onConfirm: () => {
  22.         // 确认执行函数
  23.         this.$emit("confirm");
  24.       },
  25.       onCancel: () => {
  26.         // 取消执行函数
  27.         this.$emit("cancle");
  28.       },
  29.     };
  30.   },
  31.   methods: {
  32.     // 取消
  33.     cancel() {
  34.       console.log("取消了吗?");
  35.       this.onCancel("cancel");
  36.       this.remove();
  37.     },
  38.     // 确认
  39.     confirm() {
  40.       console.log("确定了吗?");
  41.       this.onConfirm("confirm");
  42.       this.remove();
  43.     },
  44.     // 确认或取消后移除元素
  45.     remove() {
  46.       this.show = false;
  47.     },
  48.   },
  49. };
  50. </script>
  52. <style lang="less">
  53. .hint {
  54.   position: absolute;
  55.   top: 0;
  56.   right: 0;
  57.   bottom: 0;
  58.   left: 0;
  59.   margin: auto;
  60.   width: 300px;
  61.   height: 200px;
  62.   background-color: #fff;
  63.   box-shadow: 0 0 5px #ccc;
  64.   border-radius: 10px;
  65.   overflow: hidden;
  66.   .title,
  67.   .content {
  68.     display: flex;
  69.     align-items: center;
  70.     justify-content: center;
  71.     padding: 10px 0;
  72.     font-size: 20px;
  73.   }
  74.   .but {
  75.     cursor: pointer;
  76.     width: 100%;
  77.     height: 50px;
  78.     position: absolute;
  79.     bottom: 0;
  80.     border-top: 1px solid #f5f5f5;
  81.     display: flex;
  82.     align-items: center;
  83.     justify-content: space-around;
  84.     .ok,
  85.     .no {
  86.       display: flex;
  87.       align-items: center;
  88.       justify-content: center;
  89.       width: 50%;
  90.       height: 100%;
  91.     }
  92.     .ok {
  93.       background-color: rgb(83, 165, 241);
  94.     }
  95.   }
  96. }
  97. </style><template>
  98.   <div class="hint" v-if="show" ref="modal">
  99.     <div class="title">{{ title }}</div>
  100.     <div class="content">{{ content }}</div>
  101.     <div class="but">
  102.       <div class="no" @click="cancel">{{ cancelText }}</div>
  103.       <div class="ok" @click="confirm">{{ confirmText }}</div>
  104.     </div>
  105.   </div>
  106. </template>
  108. <script>
  109. export default {
  110.   data() {
  111.     return {
  112.       show: false,
  113.       title: "",
  114.       content: "",
  115.       confirmText: "确定",
  116.       cancelText: "取消",
  117.       onConfirm: () => {
  118.         // 确认执行函数
  119.         this.$emit("confirm");
  120.       },
  121.       onCancel: () => {
  122.         // 取消执行函数
  123.         this.$emit("cancle");
  124.       },
  125.     };
  126.   },
  127.   methods: {
  128.     // 取消
  129.     cancel() {
  130.       console.log("取消了吗?");
  131.       this.onCancel();
  132.       this.remove();
  133.     },
  134.     // 确认
  135.     confirm() {
  136.       console.log("确定了吗?");
  137.       this.onConfirm();
  138.       this.remove();
  139.     },
  140.     // 确认或取消后移除元素
  141.     remove() {
  142.       this.show = false;
  143.     },
  144.   },
  145. };
  146. </script>
  148. <style lang="less">
  149. .hint {
  150.   position: absolute;
  151.   top: 0;
  152.   right: 0;
  153.   bottom: 0;
  154.   left: 0;
  155.   margin: auto;
  156.   width: 300px;
  157.   height: 200px;
  158.   background-color: #fff;
  159.   box-shadow: 0 0 5px #ccc;
  160.   border-radius: 10px;
  161.   overflow: hidden;
  162.   .title,
  163.   .content {
  164.     display: flex;
  165.     align-items: center;
  166.     justify-content: center;
  167.     padding: 10px 0;
  168.     font-size: 20px;
  169.   }
  170.   .but {
  171.     cursor: pointer;
  172.     width: 100%;
  173.     height: 50px;
  174.     position: absolute;
  175.     bottom: 0;
  176.     border-top: 1px solid #f5f5f5;
  177.     display: flex;
  178.     align-items: center;
  179.     justify-content: space-around;
  180.     .ok,
  181.     .no {
  182.       display: flex;
  183.       align-items: center;
  184.       justify-content: center;
  185.       width: 50%;
  186.       height: 100%;
  187.     }
  188.     .ok {
  189.       background-color: rgb(83, 165, 241);
  190.     }
  191.   }
  192. }
  193. </style>
  1. 在 main.js 中注册
  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import hintComp from './view/hint.vue';
  4. Vue.config.productionTip = false
  6. function hint(options) {
  7.   // 返回一个 vue 子类
  8.   const Hint = Vue.extend(hintComp); 
  9.   // 创建实例并且挂载到一个空的 div 上
  10.   const app = new Hint().$mount(document.createElement('div'));
  11.   // 初始化参数 - 将传入的参数赋值给实例的 data
  12.   for (let key in options) {
  13.     app[key] = options[key];
  14.   }
  15.   // 将元素插入body中
  16.   document.body.appendChild(app.$el);
  17. }
  18. // 添加的原型上
  19. Vue.prototype.$hint = hint;
  21. new Vue({
  22.   render: h => h(App),
  23. }).$mount('#app')
  1. 在组件中使用
  1. <template>
  2.   <div id="app"></div>
  3. </template>
  4. <script>
  5. export default {
  6.   name: "App",
  7.   components: {},
  8.   mounted() {
  9.     this.$hint({
  10.       show: true,
  11.       title: "这是标题",
  12.       content: "这是内容这是内容这是内容",
  13.       onCancel(v) {
  14.         console.log(v);
  15.         console.log("取消了!");
  16.       },
  17.       onConfirm(v) {
  18.         console.log(v);
  19.         console.log("确定了!");
  20.       },
  21.     });
  22.   },
  23. };
  24. </script>