vue watch监听

1、基础使用

watch: {

        被监听的数据: {

                handler (数据改变后的值, 数据改变之前的值) {

                        相关代码逻辑...

                 }

        }

}

2、watch监听单个简单数据类型

<script>
export default {
  data() {
    return {
      text: " ",
    }
  },
  watch: {
    text: {
      handler(newVal, oldVal) {
        console.log(`新的值: ${newVal}`)
        console.log(`旧的值: ${oldVal}`)
      }
    }
  }
}
</script>

3、监听复杂数据类型的某个属性的变化

<script>
export default {
  data() {
    return {
      person: {

         name: " "

        }
    }
  },
  watch: {
    'person.name': {
      handler(newVal, oldVal) {
        console.log(`新的值: ${newVal}`)
        console.log(`旧的值: ${oldVal}`)
      },

      immediate: true (立即处理 进入页面就触发)
    }
  }
}
</script>

4、deep 深度监听

 对象和数组都是复杂数据类型，复杂数据类型存的是地址值，地址没有变，不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值设为 true，使用deep属性可以监测到整个对象所有属性值的变化，某个属性发生变化，watch都会触发监听该对象。

<script>
export default {
  data() {
    return {
      person: {

         name: " "

      }
    }
  },
  watch: {
    person: {
      handler(newVal, oldVal) {
        console.log(`新的值: ${newVal}`)
        console.log(`旧的值: ${oldVal}`)
      },

      deep: true
    }
  }
}
</script>

5、简写形式

如果只是监听单个简单的数据，使用watch的简写形式就可以满足需求。

<script>
export default {
  data() {
    return {
      text: ' '
    }
  },
  watch: {
      text (newVal, oldVal) {
        console.log(`新的值: ${newVal}`)
        console.log(`旧的值: ${oldVal}`)
      }
  }
}
</script>