vue listener watch the monitor deep depth

<template>

  <div>
    <p>FullName: {{person.fullname}}</p>
    <p>FirstName: <input type="text" v-model="person.firstname"></p>
  </div>

</template>

<script>
    export default {
        data(){
            return {
                person: {
                    firstname: 'Menghui',
                    lastname: 'Jin',
                    fullname: ''
                }
            }
          },
          watch: {
              person: {
                  handler(n,o){
                      this.person.fullname = n.firstname + ' ' + this.person.lastname;
                  },
                  //immediate: to true,   // refresh immediately trigger a load Handler
                   // Deep: to true   // can detect a change in the depth of the person object attribute value 
              } 
          } 

    }
 </ Script>

result:

event handler method is equivalent to the ordinary listener trigger, you can see from the results, when the component initialization, the listener does not fullName handler method so there is no value

---

When the modified code above, together with immediate: true, initialization of the component, the listener will immediately (immediate) trigger handler method

result:

 

---

 

 

When the input data in the input box, can be found the values ​​have not changed to fullName

result:

 

This is because the change in the property vue can not detect such changes in the value inside the object in person.firstname

So in this case we need to use vue monitor depth (deep) 

At this time, tag the deep: true

It can be found in each input box data fullname change with change

result: