vue监听属性watch的用法及使用场景详解

<template>
  <div class="home_box">
    <h1>{{ total }}</h1>
    <button @click="handleAddTotal">增加</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  watch: {
    total(newValue, oldValue) {
      console.log('旧值：', oldValue)
      console.log('新值：', newValue)
    }
  },
  data() {
    return {
      total: 0
    }
  },
  methods: {
    handleAddTotal() {
      this.total++
    }
  }
}
</script>

<script>
export default {
  name: 'Home',
  watch: {
    // 监听基本类型
    aaa(newValue, oldValue) {
      console.log('旧值：', oldValue)
      console.log('新值：', newValue)
    },
    // 监听基本类型，并且回调函数写在methods里，且初始化加载立即执行一次
    bbb: {
      handler: 'handleBBB',
      immediate: true
    },
    // 监听对象类型，需要开启深度监听
    ccc: {
      handler: (newValue, oldValue) {
        console.log('旧值：', oldValue)
        console.log('新值：', newValue)
      },
      deep: true
    },
    // 监听对象里的某个值
    'ddd.d2.d21': {
      handler: (newValue, oldValue) {
        console.log('旧值：', oldValue)
        console.log('新值：', newValue)
      }
    },
    // 监听route变化
    '$route': {
      handler: (newValue, oldValue) {
        console.log('旧值：', oldValue)
        console.log('新值：', newValue)
      }
    }
  },
  data() {
    return {
      aaa: 0,
      bbb: 0,
      ccc: {
        c1: 0,
        c2: 0
      },
      ddd: {
        d1: 0,
        d2: {
          d21: 0
        }
      }
    }
  },
  methods: {
    handleBBB() {
      this.bbb++
    }
  }
}
</script>

<template>
  <div class="home_box">
    <input type="text" v-model="keyword">
  </div>
</template>

<script>
export default {
  name: 'Home',
  watch: {
    keyword: {
      handler: 'handleKeywordChange'
    }
  },
  data() {
    return {
      keyword: '',
    }
  },
  methods: {
    handleKeywordChange(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>

watch: {
  'obj.foo': {
    handler(newVal, oldVal) {
      console.log('obj.foo属性发生变化了，新值为:', newVal, '旧值为:', oldVal);
    },
    deep: true // 深度监听
  }
}

watch: {
  foo: {
    handler(newVal, oldVal) {
      console.log('foo属性发生变化了，新值为:', newVal, '旧值为:', oldVal);
    },
    immediate: true // 立即执行
  }
}