Vue computed，watch本质区别

小灰灰 2023-02-27 13:45 17阅读 0赞

> 今日项目需要一个详细的权限配置，如：路由权限，页面tabs权限，操作权限；而路由权限大都知道就不赘述，而操作权限这就涉及页面中每个按钮了，这里使用VUEX进行管理

### 1.配置store ###

store 中 user.js 配置如下

const mutations = { 
    	SET_PERMISS_ARR: (state, permiss) => { 
    		state.permissArr = permiss
    	}
    }
    const actions = { 
      // 获取权限
      getauthList({  commit }) { 
        return new Promise((resolve, reject) => { 
          getauthList()
            .then(response => { 
              // eslint-disable-next-line eqeqeq
              if (response && response.data.code == 0) { 
                const dataInfo = response.data
                if (dataInfo.data && dataInfo.data.length > 0) { 
                  const resFormatArr = formatDataPermiss(dataInfo.data)
                  commit('SET_PERMISS_ARR', resFormatArr)
                }
                resolve(dataInfo)
              }
            })
            .catch(error => { 
              reject(error)
            })
        })
      },
    }
    function formatDataPermiss(data, lastSpace = '') { 
      const resArrs = []
      data.forEach(item => { 
        if (item.childs && item.childs.length > 0) { 
          const eachItem = formatDataPermiss(item.childs, lastSpace + '/' + item.space)
          resArrs.push.apply(resArrs, eachItem)
        } else { 
          if (item.functions && item.functions.length > 0) { 
            item.functions.forEach(childItem => { 
              const joinStr = `${ lastSpace}/${ item.space}/${ childItem.action}`
              resArrs.push(joinStr)
            })
          } else { 
            resArrs.push(lastSpace + '/' + item.space,)
          }
        }
      })
      return resArrs
    }
    export default { 
      namespaced: true,
      state,
      mutations,
      actions
    }

getters.js 配置如下

const getters = { 
      getGermissArr: state => state.user.permissArr
    }
    export default getters

其中`getauthList()`在获取到权限列表后，使用`getGermissArr`进行存储

页面通过`v-if = "getGermissArr.includes('/people/peopleBasic/info')"`进行按钮隐藏与显示

（`getGermissArr`值为`['/people/peopleBasic/edit','/people/peopleBasic/info', ...]`

在页面具体操作中传入对应值进行匹配，如果存在及判定该用户拥有该操作权限）

然而这一切并未像预料的那么顺利，如下

### 2. 运行测试 ###

**测试截图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 1]  
测试中发现，如管理员登录菜单是`编辑，查看`，在此给另一个用户配置权限只有`编辑`这个操作，然后

管理员退出，再使用刚配置的用户进行登录，发现数据操作都有，显然这数据没有更新还是是上一次

管理员的操作权限的缓存然而我在每次登录的时候都调用过对应的权限方法，`debugger`时也确实重新

赋值了，也调用了该`mutantion`的 `SET_PERMISS_ARR`

### 3. 修改mutations ###

根据上面测试，推断是不是`state.permissArr = permiss`重新为`getGermissArr`赋值操作未成功

于是改为 `set`将其重新指定属性值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 2]  
这个是可以解决在用户首次登录后数据更新正确，但是在页面再次刷新后，`computed` 中的 `getGermissArr`却始终为空数组？？？

后来在页面增加`watch` 对`getGermissArr`进行监听，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 3]  
控制台查看computed 与watch 对 `getGermissArr` 监听后`log`打印  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 4]  
看上图

第一行是`getUserPermission()`方法中打印的`this.getGermissArr`

第二行是`watch` 中打印的

显然`getUserPermission()`方法比 `watch` 先执行`why?`

个人认为 这里就是`computed`与`watch`的本质区别，`computed`监听的是这个响应式对象的变法，而
    
    `watch`是监听这个对象的值的变化
    
    在`  VUE.set(state, 'permissArr', permiss)`的时候`computed`监测到`permissArr`有变化，
    
    他立马响应到了`getUserPermission()`这个操作中的`this.getGermissArr`,  而这个点`set`刚把
    
    `permissArr`清空尚未将新值赋值过去，所以页面得到的`getGermissArr`还是一个`[]`
    
    
    而watch监测到`permissArr`被赋值了新值才真正相应`getGermissArr`
    
    所以对应这个场景 `computed`适用于第一次登陆对应`permissArr`对象更新的监听，`watch `适用于监
    
    听页面刷新`permissArr`再次赋值

*好啦个人能力有限以上记录纯属个人理解推测，不准确处望评论指点谢谢*

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]: /images/20230209/d52a025cd17d4bce89cc05a1a00d42bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200718113830941.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200718095001238.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200718095112604.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200718121835210.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70