【VUE】组件不刷新问题——添加属性导致的监控失效

1 问题

权限菜单从后台获取，在编辑角色菜单权限时，从后台获取角色权限，根据角色权限设置菜单的勾选情况，但是发现设置完后，菜单树没有更新，而是需要手动点击展开或闭合之后才会刷新，如下图

点击节点折叠展开操作后，可以看到实际需要勾选的菜单项

2 问题分析

按正常操作，数据更新的，View就会自动渲染，既然没有重新渲染，那么我们就可以断定要么数据没有更新，要么这种更新VUE认为不是更新(不能识别这种更新)。实际我看到数据是有被修改的，实现代码如下

    // 递归判断子节点
    checkPermTree (menusData, rolePerms) {
      let that = this
      menusData.forEach(function (p) {
        if (that.hasPerm(p, rolePerms) && p.status !== -1) {
          p.checked = true
        } else {
          p.checked = false
        }
        if (p.children && p.children.length > 0) {
          that.checkPermTree(p.children, rolePerms)
        }
      })
    },

代码是没有问题，数据的确被更新。那么只能往VUE不识别这种更新方向思考。所以我对数据做了一个深度拷贝，修改后赋值回去，如下

    editPerm (v) {
      this.permModalVisible = true
      this.editRolePermId = v.id
      this.modalTitle = '分配 ' + v.name + ' 的菜单权限'
      // 匹配勾选
      let rolePerms = []
      // 对象深度拷贝,否则
      let allMenus = JSON.parse(JSON.stringify(this.menusData))
      rolePerms = v.role_menus
      this.editRole = v
      if (this.treeLoading) {
        this.$Message.warning('菜单权限数据加载中，请稍后点击查看')
        return
      }
      // 递归判断子节点
      this.checkPermTree(allMenus, rolePerms)
      this.expandNode(this.expandLevel, allMenus)
      // 重新赋值回去
      this.menusData = allMenus
      //
    },

然后果然，有效果。

3 推论和延展

这种更新是什么，为何不给识别？进过分析发现。在从后台获取的数据中，并没有checked这个属性，我从后台获取数据后，直接给Tree组件，这时所有菜单都是没有勾选的。(Modal隐藏)

    getPermList () {
      this.treeLoading = true
      getMenuTreeList().then(res => {
        if (res.message === 'success') {
          this.deleteDisableNode(res.data.list)
          this.expandNode(3, res.data.list)
          // 菜单赋值
          this.menusData = res.data.list
          this.treeLoading = false
        }
        this.treeLoading = false
      })
    },

checked这个属性也没有被监控，当我修改这个属性，显示Modal时，VUE并没有认为我修改了数据，所以没有重新渲染。为了验证我的想法。我在赋值给Tree菜单数据之前就全都添加checked属性

    getPermList () {
      this.treeLoading = true
      getMenuTreeList().then(res => {
        if (res.message === 'success') {
          this.deleteDisableNode(res.data.list)
          this.expandNode(3, res.data.list)
          // 添加 checked 属性
          this.checkPermTree(res.data.list, [])
          // 菜单赋值
          this.menusData = res.data.list
          this.treeLoading = false
        }
        this.treeLoading = false
      })
    },

当然为了不干扰，需要把深度拷贝干掉，如下

    editPerm (v) {
      this.permModalVisible = true
      this.editRolePermId = v.id
      this.modalTitle = '分配 ' + v.name + ' 的菜单权限'
      // 匹配勾选
      let rolePerms = []
      // 对象深度拷贝,否则
      // let allMenus = JSON.parse(JSON.stringify(this.menusData))
      rolePerms = v.role_menus
      this.editRole = v
      if (this.treeLoading) {
        this.$Message.warning('菜单权限数据加载中，请稍后点击查看')
        return
      }
      // 递归判断子节点
      this.checkPermTree(this.menusData, rolePerms)
      this.expandNode(this.expandLevel, allMenus)
      // 重新赋值回去
      // this.menusData = allMenus
      //
    },

然后再次尝试，结果也是可以自动刷新渲染的