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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
详解原生JS回到顶部
Mar 25 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
JS实现简易留言板(节点操作)
Mar 16 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
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
模仿OSO的论坛(五)
2006/10/09 PHP
PHP安全防范技巧分享
2011/11/03 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
python编程实现12306的一个小爬虫实例
2017/12/27 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
python实现126邮箱发送邮件
2020/05/20 Python
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
轻松制作精彩视频:Animoto
2018/09/19 全球购物
招聘单位介绍信
2014/01/14 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
医生见习报告范文
2014/11/03 职场文书
小学教师见习总结
2015/06/23 职场文书
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js