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