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

前端开发小陈

于 2023-03-07 11:45:55 发布

阅读量184

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53312997/article/details/129379484

版权

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

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

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

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

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

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

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

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

那就没有办法了吗？也不是，那就要请出主角_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 },mou

关注