javascript - 关于vue指令的执行顺序和页面流程的疑问

目的

为了给页面按钮增加权限控制，所以想到使用到vue里面的terminal。

xxx.vue

directive

'use strict'

import Vue from 'vue'
var FragmentFactory = Vue.FragmentFactory
var remove = Vue.util.remove
var createAnchor = Vue.util.createAnchor

export default {
  priority:0,
  terminal: true,
  bind: function () {
    var container = document.getElementById(this.arg)
    debugger
    this.anchor = createAnchor('v-inject')
    container.appendChild(this.anchor)
    remove(this.el)
    var factory = new FragmentFactory(this.vm, this.el)
    this.frag = factory.create(this._host, this._scope, this._frag)
    this.frag.before(this.anchor)
  },
  unbind: function () {
  }
}

v-auth这个指令已经注到全局了，所以别问我为啥没引用。指令的内容直接拷贝的官网例子(原文)，但是运行报错。所以断点调试

如上图是没有这个id的，查看网页dom发现文档里面什么都没有

结合自己对生命周期理解，我这边猜想上面这个