vue3下的watch怎么使用

既然是数据监听，监听的是它的变化。那么就需要能够捕获它的变更，于是监听的数据必然要是响应式数据

watch(WatcherSource, Callback, [WatchOptions])
参数：
WatcherSource：想要监听的响应式数据。
Callback：执行的回调函数，入参（newValue,oldValue）。
[WatchOptions]：deep、immediate、flush可选。

对于WatchOptions的参数配置：

deep:当需要对对象等引用类型数据进行深度监听时，设置deep: true,默认值是false。
immediate：默认情况下watch是惰性的，设置immediate: true时，watch会在初始化时立即执行回调函数一次。
flush：控制回调函数的执行时机，。它可设置为 pre、post 或 sync。
pre：默认值，当监听的值发生变更时，优先执行回调函数（在dom更新之前执行）。
post：dom更新渲染完毕后，执行回调函数。
sync:一旦监听的值发生了变化，同步执行回调函数（建议少用）。

一，监听单个数据ref

const count = ref(1);
watch(count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
});

可以获取到新值和旧值。

二，监听引用类型数据ref:深度监听

const count = ref({
  a: 1,
  b: 2
});
const handleClick = function () {
 count.value.a = 5;
};
watch(count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
});

即使整个数组作为引用数据类型被监听，它内部的某一项发生变更也不会被观察到。所以watch中的代码并没有执行。

1，引用类型ref直接深度监听

此时，就需要使用深度监听：deep:true

const count = ref({
  a: 1,
  b: 2
});
const handleClick = function () {
  count.value.a = 5;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true }
);

值发生了变更 Proxy {a: 5, b: 2} Proxy {a: 5, b: 2}

可以注意到的是，深度监听的需要是这个引用数据类型自身，而不是其中的属性。并且，他只能获取到新值，而获取不到旧的值。

2，引用类型ref深拷贝深度监听

const count = ref({
  a: 1,
  b: 2
});
const handleClick = function () {
  count.value.a = 5;
};
watch(
  () => {
    return { ...count.value };
  },
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true }
);

这样把watch的引用类型数据源深拷贝一份，即可完成对新旧值得获取:

值发生了变更 {a: 5, b: 2} {a: 1, b: 2}

三，监听单个数据：reactive

const single = reactive({ count: 1, test: 2 });
const handleClick = function () {
  single.count++;
};
watch(
  () => single.count,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { immediate: true }
);

这里主要是() => single.count，监听的是single中的count,只有这个属性发生了变化才会触发回调函数。这种情况下是可以获取到新旧值的。

四，监听引用类型数据：reactive

<template>
  <div class="mine-box">
    <div ref="countDom">{{ single.count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from &#39;vue&#39;;
const single = reactive({ count: 1, test: { a: 1, b: 2 } });
const handleClick = function () {
  single.test.a++;
};
watch(
  single,
  (newValue, oldValue) => {
    console.log(&#39;值发生了变更&#39;, newValue, oldValue);
  },
  { immediate: true }
);
</script>

reactive的数据，用不用deep：true是没有影响的，single中的一个属性发生了变化，都能被监听到，继而执行回调函数。

和三中有所不同的是，这种情况下是只能获取到新值的。

五，immediate: true

默认情况下watch是惰性的，当我们设置immediate: true时，watch会在初始化时立即执行回调函数。

const count = ref(1);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true, immediate: true }
);

六，监听多个数据源

const count = ref(1);
const double = ref(2);
const handleClick = function () {
  count.value++;
  double.value++;
};
watch(
  [count, double],
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true, immediate: true }
);

如果两个值同时发生变更，则会仅触发一次watch的回调函数，而对于每个值的变更都会引发watch的回调函数。

如果想变更一格数据就触发一次回调，可以在两个数据变更中间加下nextTick。

七，flush的配置

1，默认情况下在dom渲染完毕前调用回调函数

回调函数优先于DOM更新执行，监听值变更时，flush默认为pre。这就意味着，如果在回调函数中有相关dom的操作，而参数里面配置了immediate:true，则会报错，因为这个时候dom还没有被渲染，是获取不到dom的。

接下来看下代码：

<template>
  <div class="mine-box">
    <div ref="countDom">{{ count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, watch } from &#39;vue&#39;;
const count = ref(1);
const countDom = ref(null);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log(&#39;---&#39;, countDom.value.textContent);
    console.log(&#39;值发生了变更&#39;, newValue, oldValue);
  },
  { deep: true }
);
</script>

得到的结果：

--- 1值发生了变更 2 1

在回调函数中，新的值已经变成了2，但获取到的DOM仍然是之前的。默认情况下，flush的值为pre。当值发生变化时，回调函数将在DOM更新之前被触发执行。

2，flush: 'post’在dom渲染完毕后执行回调函数

<template>
  <div class="mine-box">
    <div ref="countDom">{{ count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, watch } from &#39;vue&#39;;
const count = ref(1);
const countDom = ref(null);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log(&#39;---&#39;, countDom.value.textContent);
    console.log(&#39;值发生了变更&#39;, newValue, oldValue);
  },
  { deep: true, flush: &#39;post&#39; }
);
</script>

得到的结果：

--- 2值发生了变更 2 1

当回调函数被调用时，DOM已经更新完成，此时获取到的DOM是经过数据更改后更新完成的DOM。

以上就是vue3下的watch怎么使用的详细内容，更多请关注其它相关文章！