watch 侦听器

vue官方文档-watch讲解

侦听字符串 和 侦听对象的属性 的区别

第 1 章：watch 侦听器 基本用法

<template>
  <div class="watch">
    <input type="text" v-model="name" />
    <p>{{ name }}</p>
    <input type="text" v-model="info.age" />
    <p>{{ info }}</p>
  </div>
</template>

<script type="text/javascript">
export default {
  data () {
    return {
      name: '张三',
      info: {
        age: 20
      }
    }
  },
  watch: {
    // 情形一：监听字符串，新旧值都可以打印
    name: function (newValue, oldValue) {
      console.log('name', newValue, oldValue);
    },
    /**
     *  情形二：深度监听对象里面的属性，只能打印新值，拿不到旧值
     *  因为对象是引用类型，两个对象都是同一个引用地址
     *  所以打印的结果都是一样的
     */
    info: {
      handler: function (newValue, oldValue) {
        console.log('新值age', newValue);
        console.log('旧值age', oldValue); // oldValue 和 newValue 一样
      },
      deep: true
    }
  }
}
</script>