watch的浅监听和深度监听

watch的浅监听和深度监听

浅监听

默认是浅监听，只会监听一个最表层的变化，如直接监听一个字符串的值类型，这样是能够直接拿到oldVal值。

深度监听

watch监听引用类型，拿不到oldVal

<template>
    <div>
        <input v-model="name"/>
        <input v-model="info.city"/>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: '名字',
            info: {
                city: '西岛'//如果用浅监听是监听不到值变化的
            }
        }
    },
    watch: {
    //浅监听
        name(oldVal, val) {
            // eslint-disable-next-line
            console.log('watch name', oldVal, val) // 值类型，可正常拿到 oldVal 和 val
        },
         //深度监听
        info: {
            handler(oldVal, val) {
                // eslint-disable-next-line
                console.log('watch info', oldVal, val) // 引用类型，拿不到 oldVal 。因为指针相同，此时已经指向了新的 val
            },
            deep: true // 深度监听
        }
    }
}
</script>