【前端 VUE】vue 对watch的使用 监听数据 并包含$store 数据变化的监听

watch 实现监听数据改变

使用方法

watch：{

  data (n, m) {

   n: 变更后的数据

   m：变更前的数据

  }

}

以上方法 只有在数据发生改变的时候 才能监听到 这个时候 提供了参数 immediate 立即执行监听内的函数

使用方法

watch：{

  data (n, m) {

   n: 变更后的数据

   m：变更前的数据

  },

  immediate: true

}

如果遇到监听对象 以上的方法是无法实现的 那么我们就要监听对象内部参数 则watch 提供了 deep 参数 代表深入观察 

实现方法

watch：{

  object (n, m) {

   n: 变更后的数据

   m：变更前的数据

  },

  deep: true

}

以上使用 deep 方法的话 能实现想要的 但是~ 这样太麻烦了 因为这样的watch 会一层一层的查找 object  那么我们直接点找到想监听的对象key 就好了

使用方法

watch：{

  ‘object.key’ (n, m) {

   n: 变更后的数据

   m：变更前的数据

  }

}

以上直接找到 利用字符串形式 完美解决

还有一种就是监听 store 就没办法用上面的直接监听了 那么我们利用计算属性来

实现如下

computed: {

  data () {

    return this.$store.getters.obj

  }

}

获得data  再对data进行监听 完美解决

watch：{

  data (n, m) {

   n: 变更后的数据

   m：变更前的数据

  }

}