vue 侦听器watch 之 深度监听 deep

<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: true,  //刷新加载 立马触发一次handler
                  // deep: true  // 能够深度检测到 person 对象的属性值的变化
              }
          }

    }
</script>

结果：

handler 方法就至关于普通侦听器触发的事件，从结果能够看到，组件初始化的时候，侦听器并无handler方法  因此fullName是没有值的

---

当修改以上代码，加上immediate: true，组件初始化的时候，侦听器会立马（immediate）触发handler方法

结果：

 

---

 

 

当在输入框中输入数据时， 能够发现fullName的值并无随之改变

结果：

 

这是由于vue没法检测到对象内部属性值的变化 好比person.firstname的变化

因此此时 须要用到vue的深度监听（deep） 

此时加上代码  deep: true

能够发现 每次输入框数据变化  fullname随之改变

结果：