前端 - 为什么直接操作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>