VUE部分api(render、extend、$mount、use)原理简析

88 阅读1分钟

VUE部分api(render、extend、$mount、use)原理简析

  • render

render内部调用了createElement方法,createElement内部使用new VNode生成vnode并返回 Image_20220628092927.png20220628094318516.png20220628095100678.png 详细原理请参考vue-js.com/learn-vue/c…

  • extend

创建一个类sub => 继承基础vue类 => sub类添加属性及父类属性 => 返回sub类
$mount挂载domImage_20220628105917.png20220628105947867.png

  • $mount

根据传入的el参数获取DOM元素 => 在用户没有手写render函数的情况下获取传入的模板template => 将获取到的template编译成render函数20220628113550781.png

  • use(plugin)

判断是否注册 => 将传入参数转换成数组 => vue对象添加到数组起始位置 => plugin中install是方法时,执行install方法;或plugin是方法时,执行plugin方法 => 将这个插件添加到已注册过的插件数组中 => 返回vue对象20220628151710766.png