使用场景：对某个对象的详情进行编辑时，对数据的监听开标记修改的信息与对象原本具有的信息是否相同，从而控制更新的按钮是否为禁用状态（与原本信息一致时，按钮状态为禁用，反之，按钮则进行相关操作）
主要思路：请求接口获取详情时，同时存储两个相同的值，一个用于数据的渲染，一个用于保存原本的信息，通过渲染的数据的改变与原本的数据进行对比，从而判断出是否发生改变。
注意：deep监听使用过多会对性能产生影响，慎重使用，该方法是目前的暂时解决思路，希望能吸纳各方的精华，不断优化。请吐槽！！！

1、HTML

<el-button
  :disabled="!isChanged"
  type="primary"
  @click="onSubmit"
>
    更新
</el-button>

1、JavaScript

<script>
export default {
  data() {
      return {
        roleInfoForm: {
          roleId: this.roleId,
          roleName: '',
          createdTime: '',
          notification: [],
          codeRepo: [],
          ci: [],
          cd: [],
          sonar: [],
          unitTest: [],
          review: [],
          pipeline: []
        },
      oldRoleInfoForm: {}, // 保存角色原本信息
      isChanged: false, // 标记角色信息是否变化
  }，
  watch: {
      roleInfoForm: {
      handler(newV, oldV) {
        // 存储改变的值 对应的key
        const is_changed_key_arr = []
        // 遍历表单 对比值
        _.forIn(this.oldRoleInfoForm, function (value, key) {
          const value_type = typeof (newV[key])

          /**
           * 判断角色详情改变的是功能模块的权限 or 其他基本信息，如角色名称
           * 权限信息的数据结构为数组即object
           * 对比新旧值是否相等，来判断角色信息是否变化
           * 1.权限发生改变：使用_.isEqual比较数组是否相等
           * 2.基本信息发生改变：直接使用===判断
           * 3.以上二者情况，只要与角色原本所具有的详情信息不一样都认为是发生变化，发生变化则把发生变化的对象字段标记入is_changed_key_arr
           * 4.最后对标记发生改变的的数组，是否有值，有则发生改变，否则，无改变
           */
          if (value_type === 'object') {
            // 对更新的模块的权限数组值进行排序——为了对应后台返回的顺序
            const new_V = _.sortedUniq(newV[key]).sort()
            // 对比改变的模块的权限 二者是否相等，相等则标记变化的模块
            if (!_.isEqual(new_V, value)) {
              is_changed_key_arr.push(key)
            }
          } else {
            if (newV[key] !== value) {
              is_changed_key_arr.push(key)
            }
          }
        })
       /** 
        * 存储标记改变的数组是否存在发生改变的对象字段
        */
        if (is_changed_key_arr.length) {
          this.isChanged = true // 存在变化
        } else {
          this.isChanged = false // 与原值一致
        }
        console.log('role permission is changed?:', this.isChanged)
      },
      deep: true
    }
  },
  created() {
    this.getRoleInfo() // 获取单个角色信息
  },
  methods: {
      // 获取单个角色的信息，包括权限
    getRoleInfo() {
      if (this.roleId) {
        getRoleInfo(this.currentProjectId, this.roleId).then((res) => {
          this.roleInfoForm = res
          this.oldRoleInfoForm = res
          console.log('role-info', this.roleInfoForm)
        }).catch((err) => {
          console.log('获取单个角色的信息失败：', err)
        })
      }
    }
  }
}
</script>

3、效果

1.未修改信息前

修改信息前.jpg

2. 修改信息后

   
   修改信息后.jpg