CodingSecondaryVueBascal
Source
Edit
History

watch 监视属性 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
new Vue({
    el: '#root',
    data:{
        isHot: true
    },
    methods:{},
    computed:{},
    watch:{ // 监视属性
        isHot:{
            // 当isHot发生改变时，调用 handler()
            handler(newValue, oldValue){
                // ...
            },

            // 配置监视
            immediate:true // 初始化时让 handle() 运行，省略默认 false
        }
    }
})

计算属性 也能监视

监视没有的属性不会报错，也能初始化执行一次

API 方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const vm = new Vue({
    el: '#root',
    data:{
        isHot: true
    },
    methods:{},
    computed:{}
})

vm.$watch('isHot', {
    // 当isHot发生改变时，调用 handler()
    handler(newValue, oldValue){
        // ...
    },

    // 配置监视
    immediate:true // 初始化时让 handle() 运行，省略默认 false
})

深度监听

默认不检测对象内部值的改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
new Vue({
    el: '#root',
    data:{
        numbers: {
            a:1,
            b:1
        }
    },
    methods:{},
    computed:{},
    watch:{
        'numbers.a':{ // 检测多级属性中 某个 属性的变化
            handler() {
                //...
            }
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
new Vue({
    el: '#root',
    data:{
        numbers: {
            a:1,
            b:1
        }
    },
    methods:{},
    computed:{},
    watch:{
        deep: true, // 检测所有内部属性的变化，默认 false
        numbers:{ // 检测多级属性中 所有 属性的变化
            handler() {
                //...
            }
        }
    }
})