Vue源码学习笔记-vm实例的$root属性(根)的实现方式

本文介绍了Vue中一种巧妙的方法来确定组件树中的根组件,并为每个子组件设置正确的$root属性,无需额外代码。该方法利用了组件实例化过程中的父子关系。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 let parent = options.parent
  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }

//超屌
  vm.$root = parent ? parent.$root : vm

今天看vue源码,看到初始化生命周期文件,lifecycle.js中

这一行代码,顿时觉得这个操作很精髓啊,类似一个递归,如此这般便找到了根,并且对每个子组件的$root进行了赋值,无需其他代码.超屌.

再多个对象中,对象存在树形结构,可以使用这个技巧.

逻辑是,

1:每个组件实例化时候如果有父级,便会注册到options.parent中(根组件一定最先调用,里面的子组件挨个调用),在父级调用子集的时候,options.parent已经被注册

2:这时候最上层的vm实例中的$root同时被注册,为自己.

3:每个子集不管在哪一层,通过vm.$root = parent ? parent.$root : vm这行代码的操作都能找到根上定义的vm.$root,是被一层一层带过来的.

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值