在vue中如何使用watch深度监听对象中值的变化

# watch的基本用法

export default {
 data () {
     return {
         name: ''
     }
 },
 watch: {
     // name 函数 是对应那个数据名字
     name (newValue, oldValue) {
         
     }
 }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# watch深度监听

# 1、字符串嵌套方式

export default {
 data () {
     return {
        a: {
            b: {
                c :' '
            }
        }
     }
 },
 watch: {
     //想监听 c  此时 数据 是 a.b.c  比较深   深度监听
     "a.b.c": function (newValue, oldValue) {
         
     }
 }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2、启用深度监听方式

export default {
    data () {
        return {
           a: {
               b: {
                   c :' '
               }
           }
        }
    },
    watch: {
        a: {
            deep: true // deep 为true  意味着开启了深度监听 a对象里面任何数据变化都会触发handler函数,
            handler(data){
               // handler是一个固定写法
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 3、handler方法与immediate属性说明

这里 watch 的一个特点是，最初绑定的时候是不会执行的，要等到 a 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？我们需要修改一下我们的 watch 写法，修改过后的 watch 代码如下：

watch: {
  a: {
    handler(newVal, oldVal) {
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true
  }
}

1
2
3
4
5
6
7
8

#Vue

上次更新: 2024/01/30, 00:35:17

← 在vue3+vite中使用markdown（v-md-editor）编辑器基于 vue 列表拖拽排序→