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 相关文章推荐
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
去除html代码里面的script正则方法
May 19 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
php中cookie的使用方法
2014/03/29 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
jquery实现更改表格行顺序示例
2014/04/30 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
javascript基本语法
2016/05/31 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
快速创建python 虚拟环境
2020/11/28 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
新学期开学寄语
2014/01/18 职场文书
2016春节家属慰问信
2015/03/25 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
药品开票员岗位职责
2015/04/15 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
七一晚会主持词
2015/06/29 职场文书
标枪加油稿
2015/07/22 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS