[VUE] v-if为何会令它后面的组件销毁

image.png

    <el-form-item required label="路由名称" v-if="isMenu" prop="routeName">
        <el-input v-model="form.routeName" />
    </el-form-item>
    <el-form-item required label="权限ID">
        <permission-cascader ref="permissionCascaderRef" :selectedPermissionId="permissionId"></permission-cascader>
    </el-form-item>

如上面的红，绿框
当v-if生效后，（绿框在红框后面）排在它后面的permissionCascader组件会先销毁一次，
解决方法就是将permissionCascader组件放在v-if的上面。
即将红绿位置互换，如下

    <el-form-item required label="权限ID">
        <permission-cascader ref="permissionCascaderRef" :selectedPermissionId="permissionId"></permission-cascader>
    </el-form-item>
    <el-form-item required label="路由名称" v-if="isMenu" prop="routeName">
        <el-input v-model="form.routeName" />
    </el-form-item>

原因不详。