vue框架组件id获取

1、组件id

vue组件id是唯一的，并且是递增的。

下面是vue框架源码：

let uid = 0 export function initMixin (Vue: Class<Component>) { Vue.prototype._init = function (options?: Object) { const vm: Component = this
    // a uid
    vm._uid = uid++ let startTag, endTag /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) { startTag = `vue-perf-start:${vm._uid}` endTag = `vue-perf-end:${vm._uid}` mark(startTag) } // a flag to avoid this being observed
    vm._isVue = true
    // merge options
    if (options && options._isComponent) { // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
 initInternalComponent(vm, options) } else { vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') { initProxy(vm) } else { vm._renderProxy = vm } // expose real self
    vm._self = vm initLifecycle(vm) initEvents(vm) initRender(vm) callHook(vm, 'beforeCreate') initInjections(vm) // resolve injections before data/props
 initState(vm) initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created') /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) { vm._name = formatComponentName(vm, false) mark(endTag) measure(`vue ${vm._name} init`, startTag, endTag) } if (vm.$options.el) { vm.$mount(vm.$options.el) } } }

当vue初始化时，会给每个组件初始化一个唯一的id。

即：vm._uid = uid++。

 

2、组件层级目录获取

从根节点（即挂载元素）一直到本组件id获取。

let tree = this._uid ? this._uid : '' let parent = this.$parent ? this.$parent : ''
while (parent) { tree = parent._uid + '/' + tree parent = parent.$parent
} console.log(tree, '组件层级')

从获取从根元素一直到本组件的所有id。

 

this. tree