我们知道使用 Options API 能够监听 data、props 或 computed 数据的变化，比如当数据变化时执行某些操作。而在 Composition API 中，我们可以使用 watchEffect 和 watch 函数完成响应式数据的监听。其中，watchEffect 函数用于自动收集响应式数据的依赖，而 watch 函数需要手动指定监听的数据源。 本文我先介绍 watchEffect 函数的使用。

六、watchEffect 函数

1，watchEffect 函数说明

2，基本用法

<template>
    <div>
        <h4>{{ age }}</h4>
        <button @click="changeAge">修改age</button>
    </div>
</template>

<script>
import { ref, watchEffect } from 'vue';
export default {
    setup() {
        const age = ref(28);
        // watchEffect: 1.自动收集响应式的依赖 2.默认会先执行一次 3.获取不到新值和旧值
        watchEffect(() => {
            console.log("age:", age.value); // 监听age的改变
        });

        const changeAge = () => {
            age.value++
        }

        return {
            age,
            changeAge
        }
    }
}
</script>

（2）浏览器中显示的效果下图所示。watchEffect 的回调函数默认先执行一次，打印出 age:28。当单击“修改 age”按钮改变 age 时，watchEffect 会监听到 age 发生变化。此时，watchEffect 的回调函数会再次执行， 并打印出 age:29 

3，停止 watchEffect 监听

<template>
    <div>
        <h4>{{ age }}</h4>
        <button @click="changeAge">修改age</button>
    </div>
</template>

<script>
import { ref, watchEffect } from 'vue';
export default {
    setup() {
        const age = ref(28);
        // stop是watchEffect函数的返回函数，专门用于停止监听
        const stop = watchEffect(() => {
            console.log("age:", age.value); // 监听age的改变
        });

        const changeAge = () => {
            age.value++
            if (age.value > 30) {
                stop(); // 停止监听age的变化
            }
        }

        return {
            age,
            changeAge
        }
    }
}
</script>

（2）测试一下，watchEffect 的回调函数会默认先执行一次，打印出 age:28。当单击“修改 age” 按钮改变 age 时，如果 age 大于 30，由于调用了 watchEffect 返回的 stop 函数，watchEffect 会取消对 age 变量的监听。

4，清除副作用

<template>
    <div>
        <h4>{{ age }}</h4>
        <button @click="changeAge">修改age</button>
    </div>
</template>

<script>
import { ref, watchEffect } from 'vue';
export default {
    setup() {
        const age = ref(28);
        watchEffect((onInvalidate) => {
            const timer = setTimeout(() => {
                console.log("网络请求成功~");
            }, 2000)

            onInvalidate(() => {
                // 在这个函数中清除额外的副作用
                clearTimeout(timer);
                console.log("onInvalidate");
            })
            console.log("age:", age.value); // 监听age的改变
        });

        const changeAge = () => age.value++
        return {
            age,
            changeAge
        }
    }
}
</script>

（3）运行效果如下，刷新页面，立马连续单击 3 次“修改 age”按钮，watchEffect 函数监听到 age 改变了 3 次，并在每次将重新执行 watchEffect 函数的回调函数时，先执行 onInvalidate 函数中的回调函数来清除副作用，即清除了上一次的定时器。 因此，只有最后一次的定时器没有被清除。 

附：watchEffect 的执行时机

1，默认执行时机

<template>
    <div>
        <h4 ref="titleRef">hangge.com</h4>
    </div>
</template>

<script>
import { ref, watchEffect } from 'vue';

export default {
    setup() {
        // 1.定义一个titleRef来拿到h4元素的Dom对象（组件对象也是一样）
        const titleRef = ref(null);
        // 2.h4元素挂载完成之后会自动赋值到titleRef变量上，这里监听titleRef变量被赋值
        watchEffect(() => {
            console.log(titleRef.value); // 3.打印h4元素的Dom对象
        })
        return { titleRef }
    }
}
</script>

（2）在浏览器中刷新页面，可以看到控制台会打印两次：

2，改变副作用函数的执行时机

（2）下面样例通过传递 flush:"post" 对象参数将副作用函数的执行时机延迟到组件渲染之后再执行：

<template>
    <div>
        <h4 ref="titleRef">hangge.com</h4>
    </div>
</template>

<script>
import { ref, watchEffect } from 'vue';

export default {
    setup() {
        // 1.定义一个titleRef来拿到h4元素的Dom对象（组件对象也是一样）
        const titleRef = ref(null);
        // 2.h4元素挂载完成之后会自动赋值到titleRef变量上，这里监听titleRef变量被赋值
        watchEffect(() => {
            console.log(titleRef.value); // 3.打印h4元素的Dom对象
        }, {
            flush: "post" // 支持 pre, post, sync
        })
        return { titleRef }
    }
}
</script>

（3）在浏览器中刷新页面，可以看到这次控制台只打印了一次，打印了“<h4>hangge.com</h4>”元素。