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关于select的相关操作说明
Jan 13 Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
AngularJS Module方法详解
Dec 08 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
JS setTimeout与setInterval的区别
Apr 20 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
php数组的一些常见操作汇总
2011/07/17 PHP
PHP 验证码的实现代码
2011/07/17 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
Javascript中的数学函数
2007/04/04 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
js跳转页面方法总结
2014/01/29 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
python正则表达式re模块详细介绍
2014/05/29 Python
Python代码调试的几种方法总结
2015/04/15 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
python实现扫描ip地址的小程序
2019/04/16 Python
详解python pandas 分组统计的方法
2019/07/30 Python
在pycharm中显示python画的图方法
2019/08/31 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
django使用channels实现通信的示例
2020/10/19 Python
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
优秀毕业生推荐信
2013/11/02 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
大学生实习思想汇报
2014/01/12 职场文书
单位消防安全制度
2014/01/12 职场文书
初一学生期末评语
2014/04/24 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
python字符串常规操作大全
2021/05/02 Python