深入源码-Vue.extends

253 阅读1分钟

Vue2.6源码

首先是在initExtend的时候初始化了Vue.extend

image.png

输入与输出

输入的是一个extendOptions对象输出的是sub

image.png

关注核心逻辑sub

我们跳过id缓存优化-前置环境等各种判断条件

首先sub 是一个 VueComponent函数
里面对this._init方法进行了复写。 这里的this就是Vue
this._init 就是Vue.prototype._init

image.png

核心代码

Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = Sub
在这里实现了继承,Sub拥有了Vue实例的核心功能。使得它可以扩展成一个组件。
不懂继承的可以看我的这篇文章 juejin.cn/post/708448…

当然Vue.extend功能很强大 你可以把这部分内容
通过$mount-complie-render后去生成Vnode
或者也可以放入rendr函数直接生成Vnode也是可以的

其余的内容

其余的内容都只是锦上添花-扩展一些属性方法

image.png

Vue.prototype._init

image.png

image.png

核心

实际上就是在里面进行了生命周期-事件等等各种属性方法的初始化
vue实例对元素的#mount挂载