VUE2 与 VUE3 中监听器watch的区别

当涉及Vue 2和Vue 3之间的监听器时，在使用上有几个关键的区别。

Vue 2中的监听器

  watch: {
    requestProductList(newVal, oldVal) {
      if (newVal) {
        // this.orderProductquerylist();
        this.getOrderDetail();
      }
    }
  },
1
2
3
4
5
6
7
8

Vue 3中的监听器

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    return { count };
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

两者比较

1.定义方式：Vue 2中的监听器是通过watch方法直接在组件内部创建的，而Vue 3中的监听器是在setup函数内使用watch函数创建的。

2.侦听多个数据源：Vue 2中可以传递多个数据源进行监听，而Vue 3中则需要将多个数据源作为参数传递给watch函数。

3.深度监听：在Vue 3中，深度监听可以通过在watch函数中设置deep: true来实现。