vue watch用法

1、基本用法， watch 的方法默認是不會執行的，只有當監聽數據變化，纔會執行。通過聲明 immediate 選項爲 true，可以立即執行一次 handler。

<template>
  <div>
    <el-input v-model="demo"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {
      demo(val) {
        this.value = this.demo;
      }
    }
  };
</script>

<template>
  <div>
    <el-input v-model="demo"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {
      demo: {
        handler(newval, oldval) {
          this.value = this.newval;
        },
        immediate: true
      }
    }
  };
</script>

2、對象屬性監聽，一種是對某個屬性的監聽，另一種是對整個對象監聽

 watch: {
      'form.apply_amount': {
        handler(newVal, oldVal) {
          this.form.apply_amount_zh = digitUppercase(newVal)
          if (this.tableData1.length > 0) {
            this.tableData1[this.tableData1.length - 1].money2 = newVal
          }
          $('.date_in').text(newVal)
          $('.digitUppercase').text(digitUppercase(newVal))
        },
        immediate: true
      },
      'form.imprest_apply_name': {
        handler(newVal, oldVal) {
          $('.imprest_apply_name').text(newVal)
        },
        immediate: true
      },
      tableData1: {
        handler(newVal, oldVal) {
          let newData = deepClone(newVal)
          newData.forEach(item => {
            item.money = item.money2
            delete item.edit
            delete item.money1
            delete item.money2
            delete item.num
            delete item.community_name
          })
          this.tableData = newData
        },
        deep: true
      }
    },