Vue中watch的用法

Watch概述

watch是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性

使用示例

<template>
  <div>
    <p>{{ num }}p>
    <button @click="add()">+1button>
  div>
template>

<script>
export default {
  data() {
    return {
      num: 1,
    };
  },
  methods: {
    add() {
      this.num++;
    },
  },
};
script>

• handler默认用法,将变量名作为方法名进行监听

<script>
export default {
	watch: {
   	   num:{
   	   handler(newval, oldval) {
     	  console.log(newval);
    	  console.log(oldval);
    	  console.log('num的值改变了');
  	   },
  	}
  }
}
script>
  	   //也可以直接将num用作函数名
  	   // num(newval, oldval){
   	   // console.log(newval);
       // console.log(oldval);
       // console.log('num的值改变了');
  	   //  },

• 第一个参数: 新值 ; 第二个参数: 旧值
• 监听num属性的数据变化, 只要num的值发生变化, 这个方法就会调用
  
  

• immediate立即监听

有些情况下,当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate属性设置为true，结合handler方法使用。

当设置immediate属性为true时，无论值是否发生改变，时刻都会监听，在进入页面时就会触发；

当设置immediate属性为false时，常规用法，只有值发生改变才会监听。

watch: {
    num: {
      handler(newval, oldval) {
        console.log(newval);
        console.log(oldval);
        console.log("num的值改变了");
      },
      immediate:true,
    },
  },

• deep深度监听

对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true。
 
 当deep设置为false时：

<template>
  <div>
    <p>{{ myName.name }}p>
    <button @click="changeFn()">修改名字button>
  div>
template>

<script>
export default {
  data() {
    return {
      myName: {
        id: 1,
        name: "Richard",
      },
    };
  },
  methods: {
    changeFn() {
      this.myName.name = "李茶德";
    },
  },
  watch: {
    myName: {
      handler(newval, oldval) {
        console.log(newval);
        console.log(oldval);
        console.log("name改变了");
      },
      deep: false,
    },
  },
};
script>

可以看到这里watch就无法监听到对象myName的变化
这时只要将deep值设置为true就可以启动深度监听：

Watch 和 computed的区别

1. computed支持缓存，只有依赖数据发生改变,才会重新进行计算;而watch不支持缓存，数据变,直接会触发相应的操作
2. computed不支持异步，当computed内有异步操作时无效，无法监听数据的变化，而watch支持异步
3. computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值;而watch监听的函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值
4. computed：一个属性受到多个属性影响，如：购物车商品结算。
   watch：一个数据影响多条数据，如：搜索数据。数据变化响应，执行异步操作，或高性能消耗的操作，watch为最佳选择