监听数据变化，在Vue中是通过侦听器来实现的，你也可以将它理解为监听器，时刻监听某个数据的变化。

watch的基本用法

在之前我们在js中添加了data、methods，这一次我们要添加的是watch属性。下面我们先来眼熟一下侦听器的添加位置：

<script>
export default {
    name: "app",
    // 数据
    data() {
        return {};
    },
    // 方法
    methods:{},
    // 侦听器
    watch:{}
};
</script>

一个简单的例子：

<template>
    <p>你点击按钮的次数是： {{ count }} </p>
    <button @click="add" v-model="count">点击</button>
</template>

<script>
export default {
    name: "app",
    data(){
        return {
            count:0
        }
    },
    methods:{
        add(){
            this.count++;
        }
    },
    watch:{
        // 被侦听的变量count
        count(){
            console.log('count 发生了变化');
        }
    }
};
</script>

侦听器更多的是用在异步操作中，所谓异步操作就是数据返回有所延迟的操作，比如说我们要请求后端的接口，接口会返回给我们数据，然后我们再将数据渲染在页面上。

从请求接口到返回数据，这中间需要一定的时间，此时我们就可以用侦听器来侦听返回的数据，当数据返回以后，我们再触发渲染。

模拟一个伪异步操作：

<template>
    <input type="text" v-model="inputValue">
    <p>从输入框中获取到的数据：{{ passedInputValue }}</p>
</template>

<script>
export default {
    name: "app",
    data(){
        return {
            inputValue: '',
            passedInputValue: ''
        }
    },
    watch:{
        inputValue() {
            // 当inputValue数据发生变化以后，延迟三秒赋值给passedInputValue
            setTimeout(() => {
                this.passedInputValue = this.inputValue;
            }, 3000)
        }
    }
};
</script>

此时你就会发现，当你在input输入框中输入文字以后，p标签内的数据不是立马改变，而是过三秒才会去渲染。

获取前一次的值

在某些场景中，我们会需要上一次的数据，此时，侦听器就可以给我们两个值，旧值和新值。

在上一个案例的基础上，我们只需要添加一个参数，即可获取旧值，代码如下：

watch:{
    inputValue(value,oldValue) {
        // 第一个参数为新值，第二个参数为旧值，不能调换顺序
        console.log(`新值：${value}`);
        console.log(`旧值：${oldValue}`);
    }
}

handler方法和immediate属性

前面我们已经知道，当我们侦听的值没有发生改变的时候，是不会触发侦听器的，并且，页面第一次渲染的时候也不会触发侦听器。

但是现在我有个需求就是要让页面第一次渲染的时候就去触发侦听器呢？

此时就要用到一个方法和一个属性。

<template>
    <p>FullName: {{fullName}}</p>
    <p>FirstName: <input type="text" v-model="firstName"></p>
</template>

<script>
export default {
    name: "app",
    data(){
        return {
            firstName: 'Su',
            lastName: 'Junyang',
            fullName: ''
        }
    },
    watch:{
        firstName: {
            handler(newName, oldName) {
                this.fullName = newName + ' ' + this.lastName;
            },
            // 如果设置了false，那么在页面第一次渲染以后不会触发侦听器
            immediate: true
        }
    }
};
</script>

deep 深度侦听

所谓深度侦听就是侦听对象内部属性的值。

我们之前用的侦听器都只能侦听一个变量的变化，（重点看一下代码中的注释）例如：

data:{
    return {
        // 字符串发生变化，可以侦听
        firstName: 'Su',
        room:{
            name:"大床房",
            // 当房号发生变化的时候，侦听器并不能侦听到。
            // 因为侦听器只侦听到room，不能侦听number或者name
            number: 302
        }
    }
},

此时我们就需要深度侦听。
深度侦听在代码上并不难实现，只需要在handler的基础上添加一个deep属性，代码如下：

watch:{
    room:{
        handler(newRoom,oldRoom){
            console.log("房间号发生了变化")
        },
        deep: true
    }
}

案例：使用侦听器和定时器实现伪模糊搜索

<template>
  <div class="search">
    <input type="text" v-model="inputValue" />
    <div class="search-block" v-for="(element, index) in results" :key="index">
      {{ element }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      results: [],
      mockData: [
        '浙江大学',
        '中国人民大学',
        '清华大学',
        '清华大学附属中学',
        '浙江理工大学',
        '浙江工业大学'
      ],
      inputValue: ''
    };
  },
  watch: {
    inputValue(value) {
      if (!!value) {
        setTimeout(() => {
          this.results = this.mockData.filter(el => {
            console.log(value);

            return el.indexOf(value) !== -1;
          });
        }, 300);
      }
    }
  }
};
</script>

监听数据变化,在Vue中是通过侦听器来实现的,时刻监听某个数据的变化

watch的基本用法

1. 侦听器的书写位置
   写在export default中与data和methods用,隔开

<script>
  export default {
    name: "app",
    // 数据 key---data value---Function
    data: function () {
      return {
         count: 1
      };
    },
    // 方法 key---methods value---{}
    methods: {},
    //在export default中添加即可不用管顺序
    watch: {
       //监听内容
       count() {
        console.log("count发生了变化");
      }
    }
  };
</script>

监听器里的方法一定要与被监听的变量名一致

侦听器的进阶用法

获取前一次的值

有的时候需要上一次的数据,再上一个案例中添加一个参数即可获取旧值

watch:{
    inputValue(value,oldValue) {
        // 第一个参数为新值，第二个参数为旧值，不能调换顺序
        console.log(`新值：${value}`);
        console.log(`旧值：${oldValue}`);
    }
}

handler方法和immediate属性

immediate: 可以让页面第一次渲染的时候去触发侦听器
handler: 监听到修改之后这个函数会执行
侦听器实际上是一个对象,里面包含了handler方法和其他属性:

<script>
  export default {
    name: "app",
    watch: {
      firstName: {
        handler: function (newName, oldName) {
          this.fullName = newName + " " + this.lastName;
        },
        immediate: true
      }
    }
  };
</script>

一、Vue中watch用法

当data中的数据变化时，watch监听到并且执行

<template>
    <div>
      <p>大名: {{fullName}}</p>
      <p>名称: <input type="text" v-model="firstName"></p>
    </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
        firstName: '张震',
        lastName: '整个',
        fullName: ''
    }
  },
  computed: {},
  watch: {
      firstName(newName, oldName) {
        this.fullName = newName + ' ' + this.lastName;
      }
  },
  created() {

  },
  mounted() {
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  methods: {
  } 
}
</script>

二、handler方法和immediate属性

基本用法是是值变化时候，watch才执行，想让值最初时候watch就执行用到了handler和immediate属性

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
    immediate: true
  }
}

三、deep属性（深度监听，常用语对象下面属性的改变）

deep属性（深度监听，常用语对象下面属性的改变）

<template>
    <div class="a">
      <p>obj.lable: {{obj.lable}}</p>
      <p>obj.lable: <input type="text" v-model="obj.lable"></p>
    </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
        obj: {
          lable: "哈哈"
        }
    }
  },
  computed: {},
  watch: {
      obj: {
        handler(newName, oldName) {
            console.log('obj.lable changed');
        },
        immediate: true
     }
  },
  created() {

  },
  mounted() {
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  methods: {
  } 
}
</script>

输入数据改变obj.lable的值时，发现是无效的。因为vue受现代 JavaScript 的限制 ，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

watch: {
  obj: {
    handler(new, old) {
      console.log('obj.lable changed');
    },
    immediate: true,
    deep: true
  }
}

监听obj里的属性就加上deep属性，上面是监听obj整个对象的属性

watch: {
  'obj.lable': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}

监听obj的一个属性

如图所示