vue中實時監聽對象或變量的變化

demo中監聽了Input的變化，主要用到的是watch

1. 監聽單個對象：

<template>
  <div  class="personal-center">
    <input type="text" placeholder="請輸入" v-model="inputVal"/>
  </div>
</template>

<script>

  export default {
    name: 'demo',
    data() {
      return {
        inputVal: ''
      }
    },
    watch: {
      inputVal(val, oldVal) {
        console.log("inputVal = " + val + " , oldValue = " + oldVal)
      }
    }
  }
</script>

具體頁面展示：

修改input的值之前：

每一次修改input值都會監聽到：

 

2. 監聽多個對象：

    data() {
      return {
        realName: '',
        idCard: '',
        isSubmit: false
      }
    },
    computed: {
      submitElement() {
        const {realName, idCard} = this
        return {
          realName,
          idCard
        }
      }
    },
    watch: {
      submitElement: {
        handler: function (val) {
          if (val.realName.trim().length > 0 && this.idCard.trim() > 0) {
            this.isSubmit = true
          } else {
            this.isSubmit = false
          }
        },
        deep: true
      }
    }