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:变更前的数据

  }

}

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐