深入理解vue.js中$watch的oldvalue与newValue

深入理解vue.js中$watch的oldValue与newValue

在Vue.js中，$watch是一个非常核心的API，经常用来监听数据的变化。$watch的主要用法如下：

watch: {
  'data.field'(newVal, oldVal) {
    // 当 data.field 发生变化时触发该回调函数，newVal 表示变化后的值，oldVal表示变化前的值。
  }
}

在$watch的回调函数中，我们可以拿到newValue和oldValue。但是，何时才会触发oldValue呢？我们可以通过下面的例子来详细讲解：

示例1

<template>
  <div>
    <input type="text" v-model="message">
    <p>当前文本框内容：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log('new：', newVal);
      console.log('old：', oldVal);
    }
  }
}
</script>

在上面的代码中，我们监听了一个文本框的变化。当文本框的值发生变化时，$watch会触发回调函数，并且我们可以拿到newValue和oldValue。此时oldValue表示变化前的文本框的值。

示例2

在Vue.js中，对象的变化只有在属性被替换的情况下才能被监听。但Vue.js提供了Object.defineProperty()API给我们手动设置它的getter和setter，从而能够监听对象的变化。下面是一个示例：

<template>
  <div>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: 'jack',
        age: 20
      }
    }
  },
  created() {
    Object.defineProperty(this.person, 'age', {
      get: function() {
        console.log('get age');
        return this._age
      },
      set: function(newVal) {
        console.log('set age');
        this._age = newVal
      }
    })
  },
  watch: {
    'person.age'(newVal, oldVal) {
      console.log('new：', newVal);
      console.log('old：', oldVal);
    }
  }
}
</script>

在上面的代码中，我们手动设置了person对象的age属性的getter和setter。当我们修改person对象的age属性时，$watch回调函数会被触发，并且我们可以获取到newValue和oldValue，此时oldValue表示person.age属性的变化前的值。