【前端 VUE】vue 对watch的使用 监听数据 并包含$store 数据变化的监听
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)