Vue2中watch与Vue3中watch对比

上一节说到了 computed计算属性对比，虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

Vue2 watch用法

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

Vue2 存在两种监听方式，分别是简单监听和复杂监听

简单监听：监听的是一个回调函数，当监听的值发生改变时，才会执行监听动作。

javascript 复制代码

<template>
  <h2>当前求和值为：{{ sum }}</h2>
  <button @click="sum++">点击加1</button>
</template>

<script>

export default {
  name: "TestComponent",
  data() {
    return {
      sum:1
    }
  },
  watch:{
    sum(newValue, oldValue) {
      console.log('sum的值变化了',newValue, oldValue);
    }
  },
};
</script>

上面的是一个最简单的监听动作，只有在点击按钮 sum 的值变化之后，监听器 watch 才会触发。同时，我们还可以将这个方法放到 methods 中，通过方法名的方式在 watch 中实现监听效果

javascript 复制代码

  watch:{
    sum:'sumAdd'
  },
  methods: {
    sumAdd(newValue, oldValue) {
       console.log('sum的值变化了',newValue, oldValue);
    }
  },

**深度监听：监听的是一个包含选项的对象。**除了包含简单监听的功能之外，还包含深度监听、初始化监听等。

首先，我们可以通过对象形式来实现简单监听的效果，还是按照上面的例子，例如：

javascript 复制代码

// 其余代码一致
watch:{
  sum:{
    handler(newValue, oldValue) {
      console.log('sum的值变化了',newValue, oldValue);
    }
  }
},

通过对象形式实现深度监听 -- deep：true 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深，也就是说即使监听的是一个对象形式的数据，只要对象内部属性发生变化，都能被监听到。

javascript 复制代码

watch:{
  sum:{
    handler(newValue, oldValue) {
      console.log('sum的值变化了',newValue, oldValue);
    },
    deep:true
  }
},

通过对象形式实现初始化监听 -- immediate：true 该回调将会在侦听开始之后被立即调用，也就是说在组件初始化时，就会监听一次，在数据改变之后继续监听

javascript 复制代码

watch:{
  sum:{
    handler(newValue, oldValue) {
      console.log('sum的值变化了',newValue, oldValue);
    },
    immediate:true
  }
},

完整的对象监听：深度监听+初始化监听

javascript 复制代码

watch:{
  sum:{
    handler(newValue, oldValue) {
      console.log('sum的值变化了',newValue, oldValue);
    },
    deep: true,
    immediate:true
  }
},

在Vue3 中使用 Vue2 的watch

和在 Vue3 中使用 Vue2 的computed 计算属性一样，直接使用 watch 配置项即可。

javascript 复制代码

<template>
  <h2>当前求和值为：{{ sum }}</h2>
  <button @click="sum++">点击加1</button>
</template>

<script>
import { ref } from "vue";

export default {
  name: "TestComponent",
  watch: {
    sum: {
      handler(newValue, oldValue) {
        console.log("sum的值变化了", newValue, oldValue);
      },
      deep: true,
      immediate: true,
    },
  },

  setup() {
    let sum = ref(1);

    return {
      sum,
    };
  },
};
</script>

当页面第一次渲染时，监听器就执行了一次，这对应的是 -- immediate: true

点击按钮之后，页面渲染，同时监听器也会同步触发。

Vue3 中 watch的基本使用

和 computed 一样，组合式api在使用时，需要先引入，再使用。

Vue3 中的 watch 是一个函数，接收三个参数，第一个参数是需要被监听的数据( 可以是单个数据，也可以是数组格式的多个数据 )，第二个参数是回调函数，第三个参数则是监听配置项( 深度监听、初始化监听 )。但是和 computed 不一样的是 在 setup 中定义的监听器不需要使用变量接收且 return 返回的，因为监听是一种行为，而计算属性则是一个值。

javascript 复制代码

<template>
  <h2>当前求和值为：{{ sum }}</h2>
  <button @click="sum++">点击加1</button>
</template>

<script>
//组合式api需要先引入再使用
import { ref ,watch} from "vue";

export default {
  name: "TestComponent",

  setup() {
    let sum = ref(1);
    
    // 不用接收，不用返回，因为监听是动作，计算属性、响应式数据、函数都是值
    watch(sum, (newValue, oldValue) => {
      console.log("sum的值变化了", newValue, oldValue);
    })

    return {
      sum,
    };
  },
};
</script>

Vue3 中 watch 的复杂使用方式

上面说的Vue3 中 watch 的简单使用方式，其实就是监听单个 ref 定义的响应式数据。但是 Vue3 中的 watch 可以分为好几种情况：

情况一：通过 watch 监听 ref 定义的单个响应式数据，也就是上面的例子

情况二：通过 watch 监听 ref 定义的多个响应式数据，例如

javascript 复制代码

<template>
  <h2>当前求和值为：{{ sum }}</h2>
  <button @click="sum++">点击加1</button>

  <br>

  <h2>当前msg值为：{{ msg }}</h2>
  <button @click="msg += '!'">点击加!</button>
</template>

<script>
import { ref ,watch} from "vue";

export default {
  name: "TestComponent",

  setup() {
    let sum = ref(1);
    let msg = ref('你好啊')

    watch(sum, (newValue, oldValue) => {
      console.log("sum的值变化了", newValue, oldValue);
    })

    watch(msg, (newValue, oldValue) => {
      console.log("msg的值变化了", newValue, oldValue);
    })

    return {
      sum,
      msg
    };
  },
};
</script>

但是这么写很明显太麻烦了，我想监听多个，那我就需要写多个 watch 监听函数，还不如 Vue2的配置项直接定义一个对象来的方便，所以Vue3 也提供了简便写法，那就是通过数组形式一次性监听多个数据：

javascript 复制代码

// 通过 [sum,msg] 一次性监听多个数据
watch([sum,msg], (newValue, oldValue) => {
  console.log("sum或msg的值变化了", newValue, oldValue);
})

同时，我们改变 sum和msg，发现返回的 newValue 和 oldValue 分别是两个数组

第一步：改变 sum ，newValue 数组中 sum 值改变，msg值不变，oldValue 数组中的值就是 sum 和 msg 的初始值
第二步：改变 msg，newValue 数组中 sum 值不变，msg值改变变，oldValue 数组中的值就是 sum 和 msg 的上一次的值

情况三：通过 watch 中的 immediate: true 初始化监听 ref 定义的响应式数据

javascript 复制代码

watch(sum, (newValue, oldValue) => {
  console.log("sum的值变化了", newValue, oldValue);
},{immediate: true})

可以发现，初始化监听成功，在组件初始化， sum 未发生改变时监听动作就已经执行了。

至于 deep 深度监听，在Vue3 中其实存在一点问题，这个请参考下一篇文章的详细解析。

总结

Vue3 中能够使用 Vue2 的模式来实现 watch监听动作
Vue3 中的 watch 因为是组合式api，所以也需要先引入再使用，和 computed 一致
Vue3 中的 watch 是一个函数，接收三个参数：参数一：需要监听的数据，可以是一个数据，也可以是数组形式的多个数据
参数二：监听的回调函数，接收两个参数，分别代表新值和旧值
参数三：一个对象，包含复杂监听的配置，例如深度监听 ( dep:true )，初始化监听( immediate: true )
Vue3 中 setup 中的 watch 不需要使用变量接收，也不用返回，因为 watch 监听是动作，而 computed 计算属性最终返回的是值
Vue3 的深度监听( deep:true )存在一定的问题，参考下一篇博文