crm开发定制vue3下watch的使用

crm开发定制既然是数据监听，crm开发定制监听的是它的变化。crm开发定制那么就需要能够捕获它的变更，crm开发定制于是监听的数据必然要是数据

watch(WatcherSource, Callback, [WatchOptions])参数：WatcherSource：crm开发定制想要监听的响应式数据。Callback：crm开发定制执行的回调函数，入参（newValue,oldValue）。[WatchOptions]：deep、immediate、flush可选。
1
2
3
4
5

对于WatchOptionscrm开发定制的参数配置：

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

一，监听单个数据ref

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

可以获取到新值和旧值。

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

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

这种情况下，我监听的是整个数组，它是，内部的某一项发生了变更并不会被监听到。所以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 });
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

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 });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

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

三，监听单个数据：reactive

const single = reactive({ count: 1, test: 2 });const handleClick = function () {  single.count++;};watch(  () => single.count,  (newValue, oldValue) => {    console.log('值发生了变更', newValue, oldValue);  },  { immediate: true });
1
2
3
4
5
6
7
8
9
10
11

这里主要是() => 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 'vue';const single = reactive({ count: 1, test: { a: 1, b: 2 } });const handleClick = function () {  single.test.a++;};watch(  single,  (newValue, oldValue) => {    console.log('值发生了变更', newValue, oldValue);  },  { immediate: true });</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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 });
1
2
3
4
5
6
7
8
9
10
11

六，监听多个数据源

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 });
1
2
3
4
5
6
7
8
9
10
11
12
13

有一个值发生了变更，则会触发watch，如果两个值同时发生变更，同样只是触发一次watch的回调函数。

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

七，flush的配置

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

默认情况下，flush的值是pre，当监听的值发生变更时，优先执行回调函数（在dom更新之前执行）。这就意味着，如果在回调函数中有相关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 'vue';const count = ref(1);const countDom = ref(null);const handleClick = function () {  count.value++;};watch(  count,  (newValue, oldValue) => {    console.log('---', countDom.value.textContent);    console.log('值发生了变更', newValue, oldValue);  },  { deep: true });</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

得到的结果：

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

可以看到，回调函数中新的值已经变成了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 'vue';const count = ref(1);const countDom = ref(null);const handleClick = function () {  count.value++;};watch(  count,  (newValue, oldValue) => {    console.log('---', countDom.value.textContent);    console.log('值发生了变更', newValue, oldValue);  },  { deep: true, flush: 'post' });</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

得到的结果：

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

可以看到，是在dom更新完毕之后才调用的回调函数，这时候获取到的dom是数据变更后更新完毕的dom。

八，总结

当使用ref创建的响应式数据时。

1，基本数据类型：可以直接监听，可获取新旧值。2，引用数据类型：需要deep:true深度监听，但是只能获取新值。要想获取新旧值，要想获取新旧值，需要监听目标数据的深拷贝。
1
2

当使用reactive创建的响应式数据时。

1，基本数据类型：可以直接指定某个属性进行监听，可以获取到新旧值。2，引用数据类型：直接监听创建的reactive对象，其中只要有属性变更，都能被监听到。但是它只能获取到新值。3，reactive创建的响应式数据，深度监听设置是无效的，也就是deep:true/false都是能监听到的。
1
2
3

deep参数

默认是false,只有使用ref创建的响应式引用类型的数据是，才启用。才生效。
1

immediate参数

默认是false,初始化的时候不执行回调函数。如果是true,初始化的时候就会执行一次回调函数。
1
2

flush参数

默认是'pre',在dom渲染之前执行回调函数，如果有immediate：true时，回调函数有获取dom操作，则会报错，因为初始化时dom还没生成。设置成'post'，则是在dom渲染完毕（监听的数据变更后dom渲染完毕）后，再执行回调函数。
1
2