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

 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,是被一层一层带过来的.