【Vue源码探究】Vue.extend和VueComponent的关系

前言

写_Vue.js_已经3年了吧，对_Vue.extend_全局方法的了解也就一直停留在了解，也一直抱着不用就不学的思想，造成了一次又一次的错过~~~

直到最近，才通过公司10年秃头少年的代码，才知道错过_Vue.extend_方法，也就等于错过了对_Vue_组件第二春了解的机会！！！

需求分析

在页面中弹出消息提示框，比如在用户点击页面某个按钮给予回应，弹个提示

这种业务场景很常见吧，肯定是先创建一个弹框组件，在需要使用弹框的地方注册组件并挂载到页面上去

但是需求还没结束，又提出在所以页面都可以弹出这个消息提示框

首选局部注册肯定是不行了，局部注册只能当前页面使用，所以要选择在_App.vue_中注册并挂载，因为_App.vue_是所有组件的根组件，所以组件也都能访问到_App.vue_中的方法，我们只需要在_App.vue_暴露一个弹框显示的方法就可以了

产品还不打算放过我，又提出需求是可以同时出现多个消息提示框

这个就不好实现了呀，一个组件挂载只能弹出一个提示框，总不能在_App.vue_挂载很多个吧，其实这也是解决方案，但是不利于扩展、占用内存！！！

那就没有办法了吗？也不是，那就要请出主角_Vue.extend_全局方法！！！

Vue.extend

看看官方的八股文：

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

我认为这段文字表达十分明了，首先_Vue.extend_参数是_包含组件选项的对象_，返回值是_Vue_的子类

import Vue from 'vue'

let VueComponent = Vue.extend({})
VueComponent.prototype.__proto__ == Vue.prototype	// true 

我们这里将_子类_称为_VueComponent_

你对这个名称很熟悉吧~~~

import Vue from 'vue/dist/vue.esm.js' // 必须引入这个版本的Vue才可以使用template选项
new Vue({el: "#app",template: `<App></App>`,components: { App },mounted() {let app = this.$children[0];// App组件实例let VueComponent = app.constructor// App构造函数console.log(app);console.log(VueComponent);console.log(VueComponent.prototype.__proto__ == Vue.prototype);}
}) 

不难发现_VueComponent_就是组件的构造函数~~~

是不是一下就明白了，_Vue.extend_的返回值就是组件的构造函数，传入的选项就是组件的初始配置

_Vue.extend_作用可以理解为：

首选创建一个_Vue_类的子类（组件的构造函数），将传入的组件选项配置当做子类实例化的默认值（组件的初始配置），并返回这个类（组件的构造函数）

Vue.component("Toast", {})// 全局注册组件
console.log(Vue.component("Toast"));// Toast组件构造函数 

在使用_Vue.component_方法注册全局组件时，其实内部也是先调用_Vue.extend_生成_VueComponent_，再声明到全局组件中，局部组件也是一样的，同样会通过_Vue.extend_生成_VueComponent_~~~

其实这里还能了解到一个知识点：所以组件的构造函数其父类都是Vue，所以组件可以使用_Vue_上所以方法和属性，比如_emit_、_set_等

编程式的使用组件

VueComponent_可以被称为_小Vue，VueComponent_的使用也就可以对照_Vue

let VueComponent = Vue.extend({})
new VueComponent({el: "#app",template: `<h1>Vue.extend的使用</h1>`
}) 

是不是和_Vue_的使用一模一样喃？

区别在于_Vue.extend_可以通过参数确定组件的初始配置~~~

现在完成一下最开始的需求吧~

1.编写my-toast.vue````<template><h1 class="title" v-if="show">{ { title }}</h1></template><script> export default {name: "my-toast",props: {title: {typeof: String,default: ""}},data() {return {show: true};},created() {setTimeout(() => {this.show = false;this.$nextTick(() => {this.$destroy();});}, 2000);}}; </script><style> .title {width: 180px;height: 50px;position: fixed;right: 20px;top: 20px;background-color: rgba(0, 0, 0, 0.15);text-align: center;line-height: 50px;border-radius: 8px;font-size: 16px;} </style> ```2.在vue的原型上绑定显示弹框方法```import Vue from 'vue';import myToast from './components/my-toast.vue';Vue.prototype.$toast = function (title) {const ToastComponent = Vue.extend(myToast);const toastComponent = new ToastComponent({propsData: {title}})toastComponent.$mount(document.createElement('div'));document.body.appendChild(toastComponent.$el);} ```3.在需要弹框的地方调用方法```// ....某vue页面 mounted() {this.$toast("测试");} ````let vm = new VueComponent(options)的注意点：

• 传递的_props_配置需要配置到_propsData_属性中
• 使用_VueX_、VueRoter等第三方模块，需要把这些模块挂载到_options_上
• 使用插槽需要通过_vm.$scopedSlots_传递

源码分析

你可以在源码目录src/core/global-api/extend.js下找到这个函数的定义

Vue.extend = function (extendOptions: any): typeof Component {extendOptions = extendOptions || {}// this指的是Vueconst Super = this// 每个组件构造函数都有唯一的cidconst SuperId = Super.cid// 创建完的VueComponent构造函数，会保存到_Ctor中// 如果下次传入相同的extendOptions和SuperId，就直接取用缓存内的值const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})if (cachedCtors[SuperId]) {return cachedCtors[SuperId]}// 获取组件nameconst name =getComponentName(extendOptions) || getComponentName(Super.options)if (__DEV__ && name) {// 校验组件namevalidateComponentName(name)}// 创建VueComponent构造函数const Sub = function VueComponent(this: any, options: any) {this._init(options)} as unknown as typeof Component// 重点：实现了原型链继承，让VueComponent的原型指向Vue的原型// Vue的原型的所有方法和属性，在VueComponent也存在Sub.prototype = Object.create(Super.prototype)Sub.prototype.constructor = Sub// 生成唯一cidSub.cid = cid++// 传入的extendOptions和Vue.options合并Sub.options = mergeOptions(Super.options, extendOptions)Sub['super'] = Super// 配置props的响应式if (Sub.options.props) {initProps(Sub)}// 配置computed的响应式if (Sub.options.computed) {initComputed(Sub)}// 继承静态方法Sub.extend = Super.extendSub.mixin = Super.mixinSub.use = Super.use//ASSET_TYPES = ['component', 'directive', 'filter']ASSET_TYPES.forEach(function (type) {Sub[type] = Super[type]})if (name) {Sub.options.components[name] = Sub}// 保存基础配置Sub.superOptions = Super.optionsSub.extendOptions = extendOptionsSub.sealedOptions = extend({}, Sub.options)// 设置缓存cachedCtors[SuperId] = Subreturn Sub} 

Vue.extend_关键在于继承_Vue，抛开其他功能代码，主要实现继承的代码：

// 继承原型
Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = Sub
// 继承静态方属性和方法
// 继承静态方法
Sub.extend = Super.extend
Sub.mixin = Super.mixin
Sub.use = Super.use
//ASSET_TYPES = ['component', 'directive', 'filter']
ASSET_TYPES.forEach(function (type) {Sub[type] = Super[type]
}) 

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取