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隨之改變

結果：