vue - "Optimization watch the depth of listening.

Man of few words said, directly on the code, comments clear

<template>
    <div>
        <input type="text" v-model="value" >
        <p>{{pValue}}</p>
        <input type="text" v-model="userName.name">
    </div>
</template>

<script>
export default {
    data() {
        return {
            value:'111111111',
            pValue:"12",
            userName:{
                name:"Mir.Wang"
            }
        }
    },
    watch: {
        value (a, b) {// monitor input value, it will trigger changes in
            this.pValue = a
        },
        pValue (a, b) {// p tag Found listener, when the input value changes, the tag sets the value p, the function will be triggered
            //console.log(a,b)
        },

        "userName.name" (a, b) {// a method to replace the string depth monitor Deep: to true, // have a depth of a bottom traverse monitor, wasteful performance
            console.log(a,b)
        }
      
          
    },
}
</script>