watchEffect

作用：深度监听响应式变量ref、reactive的数据变化。

语法

watchEffect(( ) => { })

参数

watchEffect有两个参数：

第一个参数是在发生变化时要调用的回调函数。

第二个参数是一个可选的选项。有{flush: 'post'}、{flush: 'sync'}

watchEffect的使用

watchEffect不需要指明侦听的对象。当侦听的回调中用到哪个属性，就侦听哪个属性。

1.watchEffect侦听ref响应式数据

1)watchEffect侦听ref定义的一个或多个响应式数据,可以获取preValue

2)watchEffect侦听ref定义的一个响应式数据的一个或多个属性-基本数据类型，可以获取preValue

3)watchEffect侦听ref定义的一个响应式数据的一个或多个属性-引用数据类型，可以获取preValue。当没有具体到某个属性时，watchEffect可以侦听引用数据类型的所有属性，也能获取到preValue

<!--text.vue-->
<template>
  <div>test</div>
</template>

<script setup lang='ts'>
import { ref, reactive, watchEffect, onMounted } from 'vue';
// watchEffect侦听reactive响应式数据
// 基本数据类型
const c = ref({
  name: 'c',
  prop: 'prop'
});
const d = ref({
  name: 'd',
  prop: 'prop'
});
// 引用数据类型
const c1 = ref({
  name: 'c1',
  prop: {
    name: 'c1',
    prop: 'prop'
  }
});
const d1 = ref({
  name: 'd1',
  prop: {
    name: 'd1',
    prop: 'prop'
  }
});

onMounted(() => {
  // watchEffect侦听ref数据
  c.value.name = 'c-1';
  d.value.name = 'd-1';
  c1.value.prop.name = 'c1-1';
  d1.value.prop.name = 'd1-1';
});

// 1.watchEffect侦听ref定义的一个或多个响应式数据,可以获取preValue
watchEffect(() => {
  // watchEffect不需要指明侦听的对象。当侦听的回调中用到哪个属性，就侦听哪个属性。
  console.log(c.value); // {name: 'c', prop: 'prop'} {name: 'c-1', prop: 'prop'}
  console.log(c.value.name); // c c-1
});
watchEffect(() => {
  console.log([c.value.name, d.value.name]); // ['c', 'd'] ['c-1', 'd-1']
});
// 2.watchEffect侦听ref定义的一个响应式数据的一个或多个属性-基本数据类型，可以获取preValue
watchEffect(() => {
  console.log(c.value.name); //  c c-1
});
watchEffect(() => {
  console.log([c.value.name, c.value.prop]); //  ['c', 'prop'] ['c-1', 'prop']
});
// 3.watchEffect侦听ref定义的一个响应式数据的一个或多个属性-引用数据类型，可以获取preValue
// 当具体到引用数据类型的某个属性时，能获取preValue
watchEffect(() => {
  console.log(c1.value.prop.name); // c1 c1-1
});
watchEffect(() => {
  console.log([c1.value.prop.name, c1.value.prop.prop]); // ['c1','prop'}] ['c1-1','prop']
});
// 当没有具体到某个属性时，可以侦听引用数据类型的所有属性。能获取preValue
watchEffect(() => {
  console.log(c1.value.prop); // {name: 'c1', prop: 'prop'} {name: 'c1-1', prop: 'prop'}
});
watchEffect(() => {
  console.log([c1.value.prop, d1.value.prop]); // [{name: 'c1-1', prop: 'prop'} {name: 'd1-1', prop: 'prop'}]
});
</script>

2.watchEffect侦听reactive响应式数据

1)watchEffect侦听reactive定义的一个或多个响应式数据,可以获取preValue

2)watchEffect侦听reactive定义的一个响应式数据的一个或多个属性-基本数据类型，可以获取preValue

3)watchEffect侦听reactive定义的一个响应式数据的一个或多个属性-引用数据类型，可以获取preValue。当没有具体到某个属性时，watchEffect可以侦听引用数据类型的所有属性，也能获取到preValue

<!--text.vue-->
<template>
  <div>test</div>
</template>

<script setup lang='ts'>
import { ref, reactive, watchEffect, onMounted } from 'vue';
// watchEffect侦听reactive响应式数据
// 基本数据类型
const c = reactive({
  name: 'c',
  prop: 'prop'
});
const d = reactive({
  name: 'd',
  prop: 'prop'
});
// 引用数据类型
const c1 = reactive({
  name: 'c1',
  prop: {
    name: 'c1',
    prop: 'prop'
  }
});
const d1 = reactive({
  name: 'd1',
  prop: {
    name: 'd1',
    prop: 'prop'
  }
});

onMounted(() => {
  // watchEffect侦听reactive数据
  c.name = 'c-1';
  d.name = 'd-1';
  c1.prop.name = 'c1-1';
  d1.prop.name = 'd1-1';
});

// 1.watchEffect侦听reactive定义的一个或多个响应式数据,可以获取preValue
watchEffect(() => {
  // watchEffect不需要指明侦听的对象。当侦听的回调中用到哪个属性，就侦听哪个属性。
  console.log(c); // {name: 'c', prop: 'prop'} {name: 'c-1', prop: 'prop'}
  console.log(c.name); // c c-1
});
watchEffect(() => {
  console.log([c.name, d.name]); // ['c', 'd'] ['c-1', 'd-1']
});
// 2.watchEffect侦听reactive定义的一个响应式数据的一个或多个属性-基本数据类型，可以获取preValue
watchEffect(() => {
  console.log(c.name); //  c c-1
});
watchEffect(() => {
  console.log([c.name, c.prop]); //  ['c', 'prop'] ['c-1', 'prop']
});
// 3.watchEffect侦听reactive定义的一个响应式数据的一个或多个属性-引用数据类型，可以获取preValue
// 当具体到引用数据类型的某个属性时，能获取preValue
watchEffect(() => {
  console.log(c1.prop.name); // c1 c1-1
});
watchEffect(() => {
  console.log([c1.prop.name, c1.prop.prop]); // ['c1','prop'}] ['c1-1','prop']
});
// 当没有具体到某个属性时，它可以侦听引用数据类型的所有属性，能获取preValue
watchEffect(() => {
  console.log(c1.prop); // {name: 'c1', prop: 'prop'} {name: 'c1-1', prop: 'prop'}
});
watchEffect(() => {
  console.log([c1.prop, d1.prop]); // [{name: 'c1-1', prop: 'prop'} {name: 'd1-1', prop: 'prop'}]
});
</script>

注意：

1.当watchEffect侦听引用数据类型时，它可以不需要指明具体的某个属性，便能侦听到该对象的所有属性。

2.watchEffect不需要指明侦听的对象。当侦听的回调中用到哪个属性，就侦听哪个属性。

watchEffect的参数

• flush: 'post'：默认情况下，侦听器将在组件渲染之前执行。通过设置 flush: 'post'可以使侦听器延迟到组件渲染之后再执行。
• flush: 'sync'：通过设置flush: 'sync'可以在响应式依赖发生改变时立即触发侦听器。