Vue初始化中的选项合并之initInternalComponent详解


Posted in Javascript onJune 11, 2020

今天给大家分享Vue初始化中的选项合并之initInternalComponent的相关知识,具体代码如下所示:

export function initInternalComponent (vm: Component, options: InternalComponentOptions) {
 const opts = vm.$options = Object.create(vm.constructor.options)
 // doing this because it's faster than dynamic enumeration.
 const parentVnode = options._parentVnode
 opts.parent = options.parent
 opts._parentVnode = parentVnode

 const vnodeComponentOptions = parentVnode.componentOptions
 opts.propsData = vnodeComponentOptions.propsData
 opts._parentListeners = vnodeComponentOptions.listeners
 opts._renderChildren = vnodeComponentOptions.children
 opts._componentTag = vnodeComponentOptions.tag

 if (options.render) {
  opts.render = options.render
  opts.staticRenderFns = options.staticRenderFns
 }
}

initInternalComponent方法接受两个参数,第一个参数是组件实例,即this。第二个参数是组件构造函数中传入的option,这个option根据上文的分析,他是在createComponentInstanceForVnode方法中定义的:

export function createComponentInstanceForVnode (
 vnode: any, // we know it's MountedComponentVNode but flow doesn't
 parent: any, // activeInstance in lifecycle state
): Component {
 const options: InternalComponentOptions = {
  _isComponent: true,
  _parentVnode: vnode,
  parent
 }
 // check inline-template render functions
 const inlineTemplate = vnode.data.inlineTemplate
 if (isDef(inlineTemplate)) {
  options.render = inlineTemplate.render
  options.staticRenderFns = inlineTemplate.staticRenderFns
 }
 return new vnode.componentOptions.Ctor(options)
}

option中有三个属性值,_isComponent上面已经提到过了;_parentVode其实就是该组件实例的vnode对象(createComponentInstanceForVnode就是根据这个vnode对象去创建一个组件实例);parent则是该组件的父组件实例对象。
然后我们来看看具体initInternalComponent做了什么操作:

const opts = vm.$options = Object.create(vm.constructor.options)

首先,用Object.create这个函数,把组件构造函数的options挂载到vm.$options__proto__上。

const parentVnode = options._parentVnode
opts.parent = options.parent
opts._parentVnode = parentVnode

接下把传入参数的option的_parentVodeparent挂载到组件实例$options上。用我们在两种策略里的那个例子来说,parent就是我们组件的根实例,而_parentVnode就是<comp :msg="msg" @log-msg="logMsg"></comp>生成的一个Vnode对象。

const vnodeComponentOptions = parentVnode.componentOptions
opts.propsData = vnodeComponentOptions.propsData
opts._parentListeners = vnodeComponentOptions.listeners
opts._renderChildren = vnodeComponentOptions.children
opts._componentTag = vnodeComponentOptions.tag

然后把父组件里的vnode上的四个属性挂载到我们的$options上,还是用那个例子来说,propsData就是根据:msg="msg"生成的,他的值就是在根组件里定义的那个msg{msg: "props-message"}。而_parentListeners就是根据@log-msg="logMsg"生成的,他的值是logMsg这个定义在父组件中的方法。

if (options.render) {
  opts.render = options.render
  opts.staticRenderFns = options.staticRenderFns
}

最后就是如果传入的option中如果有render,把render相关的也挂载到$options上。
因此,这个initInternalComponent主要做了两件事情:1.指定组件$options原型,2.把组件依赖于父组件的props、listeners也挂载到options上,方便子组件调用。

总结

到此这篇关于Vue初始化中的选项合并之initInternalComponent详解的文章就介绍到这了,更多相关Vue初始化选项合并内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
js下弹出窗口的变通
Apr 18 Javascript
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
JS排序之快速排序详解
Apr 08 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
Vue组件为什么data必须是一个函数
Jun 11 #Javascript
Vue实现点击箭头上下移动效果
Jun 11 #Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 #Javascript
详解vue 组件
Jun 11 #Javascript
vue实现员工信息录入功能
Jun 11 #Javascript
JavaScript Event Loop相关原理解析
Jun 10 #Javascript
vue Element左侧无限级菜单实现
Jun 10 #Javascript
You might like
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
jQuery级联操作绑定事件实例
2014/09/02 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
JavaScript WeakMap使用详解
2021/02/05 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
python self,cls,decorator的理解
2009/07/13 Python
python获取当前计算机cpu数量的方法
2015/04/18 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
python如何查看网页代码
2020/06/07 Python
统计岗位职责
2014/02/21 职场文书
化妆品活动策划方案
2014/05/23 职场文书
企业环保标语
2014/06/10 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
九寨沟导游词
2015/02/02 职场文书
2015入党个人自传范文
2015/06/26 职场文书
2022年四月新番
2022/03/15 日漫