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 YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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
消息持续发送的完整例子
2006/10/09 PHP
php购物网站支付paypal使用方法
2010/11/28 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
工作自我评价分享
2013/12/01 职场文书
公司薪酬管理制度
2014/01/31 职场文书
秋游活动策划方案
2014/02/16 职场文书
分家协议书
2014/04/21 职场文书
工程服务质量承诺书
2015/04/29 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
四群教育工作总结
2015/08/10 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
MySQL事务的隔离级别详情
2022/07/15 MySQL