Vue监听store中数据变化的两种方式

最新推荐文章于 2025-04-10 00:30:00 发布

howcoder

最新推荐文章于 2025-04-10 00:30:00 发布

阅读量2.9w

点赞数 22

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_42000816/article/details/110948868

版权

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文对比了Vue中两种数据监听方法：直接使用watch监听store状态变化与通过计算属性结合watch监听store变化的区别。第一种方法适用于简单数据类型及对象类型的数据监听，而第二种方法更适合于简单数据类型的监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式一

watch: {
  "$store.state.userInfo.Name":{
    handler:function(newVal,oldVal){
      console.log(newVal,oldVal);
    }
  }
}

方式二

computed: {
  isEdit () {
    return this.$store.state.userInfo.Name;　　//需要监听的数据
  }
},
watch: {
  isEdit(newVal, oldVal) {
    console.log(newVal,oldVal);
  }
},

区别

区别一：第二种方式是先通过计算属性时刻监测store的数据变化，从而触发isEdit的监听函数，明显需要多一步
区别二：如果监听store的数据是一个对象，第一种方式只需要加上深度监听，也可以实现数据的变化监听，而第二种方式却无法监听到store的对象数据变化，例如

第一种方式

watch: {
  //此时我监听的是对象，当$store.state.userInfo.Name发生修改时，此时需要深度监听才能监听到数据变化
  "$store.state.userInfo":{
    deep:true,//深度监听设置为 true
    handler:function(newVal,oldVal){
      console.log("数据发生变化啦"); //修改数据时，能看到输出结果
      console.log(newVal,oldVal);
    }
  }
}

第二种方式

computed: {
  isEdit () {
    return this.$store.state.userInfo;　　//需要监听的数据
  },
},
watch: {
  isEdit(newVal, oldVal) {
    console.log("数据发生变化啦"); //修改数据时，看不到该输出结果，因为无法监听到数据的变化
    console.log(newVal,oldVal);
  }
},