为什么直接操作Dom后，哪怕数组变化了（重新赋值），页面也不会刷新？

Question

      <el-col :span="18">
        <el-button
          v-for="(item, index) in getTopButtons"
          :key="index"
          :type="item.type"
          :title="item.title"
          :disabled="typeof item.disabled === 'function' ? item.disabled() : item.disabled"
          :class="typeof item.class === 'function' ? item.class() : item.class"
          :loading="typeof item.loading === 'function' ? item.loading(item) : item.loading"
          v-bind="{ ...item.bind }"
          @click="item.func && item.func(item)"
        >
          <i v-if="item.icon" :class="renderIcon(item, scope)" />{{ item.name }}</el-button
        >
        <upload-button
          v-btn="'fund-debt-bill-import'"
          style="margin: 0 10px"
          accept=".xls,.xlsx"
          button-text="导入"
          :request-config="{
            apiMod: 'debt-side-deposit',
            apiName: 'importDepositInfo',
            headers: {
              'Content-Type': 'multipart/form-data',
              timeout: 0,
              repeatRequestCancel: true
            }
          }"
          @result="getFileInfo"
        ></upload-button>
      </el-col>

这是代码，逻辑是由于加了按钮权限检查，导致页面加载的时候自定义的组件upload-button被删除了，删除之后getTopButtons变化了，此时页面没有重新渲染。权限检查代码如下：

    Vue.directive('btn', {
      inserted(el, binding) {
        const btnPermission = store.getters.permissionsButtons || []
        if (binding.value) {
          if (!btnPermission.includes(binding.value)) {
            console.log('el.parentNode', el.parentNode)
            console.log('el', el)
            debugger
            el.parentNode.removeChild(el)
          }
        }
      }
    })

以下是getTopButtons的代码，是计算属性：

    // 检查top button权限
    getTopButtons() {
      if (process.env.NODE_ENV !== 'production' && this?.$store?.state?.user?.userName === 'admin') {
        return this.topButtons
      } else {
        const buttons = []
        if (this.topButtons.length) {
          this.topButtons.forEach(button => {
            const hasPermission =
              !button.requireAuth ||
              this.buttonAuths.some(auth => {
                return button.resCode === auth
              })
            if (hasPermission) buttons.push(button)
          })
        }

        return buttons
      }
    },

Answer 1

vue是虚拟dom,你直接操作dom，虚拟dom不知道，视图肯定不会更新试试用v-if：

computed: {
  shouldShowButton() {
    const btnPermission = store.getters.permissionsButtons || [];
    return btnPermission.includes(this.buttonPermissionValue);
  }
}

<el-button v-if="shouldShowButton" ...>
  ...
</el-button>