前言

之前我们学过在组件里使用watch，现在我们来学习一下如何在Composition API中使用watch，以及什么是watchEffect，这两者又有什么区别。

watch

引用：watch需要从Vue中引入才能使用；
参数：watch可以获得原始值和当前值；
特性：watch惰性执行，首次不执行代码；

侦听基础数据类型

通过ref包裹使数据具备响应式，让watch能够侦听。

 		const app = Vue.createApp({
            setup(){
               const { ref, watch } = Vue;
               let name = ref("张三");
               watch(name, (val, oldVal) => {
                    console.log(val, oldVal);
               })
                return {
                    name
               }
            },
            template:`
            <div>
                name: <input v-model="name"/>
                <div>{{name}}</div>
            </div>
                `,
        });

页面效果在这里插入图片描述修改数据后页面效果

侦听非基础数据类型

侦听单个属性

通过reactive包裹使数据具备响应式，让watch能够侦听。

        const app = Vue.createApp({
            setup(){
               const { reactive, watch, toRefs} = Vue;
               let nameObj = reactive({ name: "张三" });
               watch(() => nameObj.name, (val, oldVal) => {
                    console.log(val, oldVal);
               })
                const { name } = toRefs(nameObj);
                return {
                    name
               }
            },
            template:`
            <div>
                name: <input v-model="name"/>
                <div>{{name}}</div>
            </div>`,
        });

页面效果同上。

侦听多个属性

当然使用两个watch，可以实现这个效果。

 				watch(() => nameObj.name, (val, oldVal) => {
                    console.log(val, oldVal);
                })
                watch(() => nameObj.nickName, (nickNameVal, nickNameOldVal) => {
                    console.log(nickNameVal, nickNameOldVal);
                })

页面效果在这里插入图片描述 但是这样写代码明显冗余，那么能不能用一个watch实现呢？

答案肯定是可以的，将参数换成数组，即可使用一个watch同时侦听多个属性。

 				watch([() => nameObj.name,() => nameObj.nickName], ([nameVal, nameOldVal],[nickNameVal, nickNameOldVal]) => {
                    console.log(nameVal, nameOldVal);
                    console.log(nickNameVal, nickNameOldVal);
               	})

页面效果同上。

watch特性

watch惰性执行，首次不执行代码。

 				watch(() => nameObj.name, (val, oldVal) => {
                    console.log(val, oldVal);
                })

页面效果在这里插入图片描述

修改watch特性

watch除了可以接收原始值和当前值，还可以接收第三个配置参数。使用{ immediate: true} 可以修改watch为立即执行。

    			watch(() => nameObj.name, (val, oldVal) => {
                    console.log(val, oldVal);
                },{ immediate: true})

watchEffect

引用：watchEffect需要从Vue中引入才能使用；
参数：watchEffect只能获得当前值；
特性：watch无惰性，会自动感知侦听内容；

watchEffect特性

watchEffect无惰性，立即执行代码，自动感知侦听nameObj.name属性。

				 watchEffect(() => {
                    console.log(nameObj.name);
                })

打开控制台，页面输出：张三在这里插入图片描述

stop

使用stop可以停止watch 、watchEffect对内容的侦听。

使用stop停止watch侦听

结合setTimeout，两秒后停止watch侦听。

    			const stop = watch(() => nameObj.name, (val, oldVal) => {
                    console.log(val, oldVal);
                })
                setTimeout(() => {
                    stop();
                }, 2000);

页面效果在这里插入图片描述

使用stop停止watchEffect侦听

				const stop = watchEffect(() => {
                    console.log(nameObj.name);
                })
                setTimeout(() => {
                    stop();
                }, 2000);

页面效果同上

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Composition API 侦听器</title>
    <!-- 使用CDN引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            setup(){
               const { reactive, watch, watchEffect, toRefs} = Vue;
               let nameObj = reactive({ name: "张三" , nickName: '法外狂徒'});
                 // 侦听单个属性
                // watch(() => nameObj.name, (val, oldVal) => {
                //     console.log(val, oldVal);
                // })
                // watch(() => nameObj.nickName, (nickNameVal, nickNameOldVal) => {
                //     console.log(nickNameVal, nickNameOldVal);
                // })

                // 侦听多个属性
                //watch([() => nameObj.name,() => nameObj.nickName], ([nameVal, nameOldVal],[nickNameVal, nickNameOldVal]) => {
                //     console.log(nameVal, nameOldVal);
                //     console.log(nickNameVal, nickNameOldVal);
                //})

                // watch惰性
                // watch(() => nameObj.name, (val, oldVal) => {
                //     console.log(val, oldVal);
                // })

                // 修改watch惰性
                // watch(() => nameObj.name, (val, oldVal) => {
                //     console.log(val, oldVal);
                // },{ immediate: true})

                // watchEffect无惰性，会自动感知侦听内容；
                // watchEffect(() => {
                //     console.log(nameObj.name);
                // })

                // stop
                // const stop = watch(() => nameObj.name, (val, oldVal) => {
                //     console.log(val, oldVal);
                // })
                // setTimeout(() => {
                //     stop();
                // }, 2000);

                const stop = watchEffect(() => {
                    console.log(nameObj.name);
                })
                setTimeout(() => {
                    stop();
                }, 2000);
            
                const { name, nickName } = toRefs(nameObj);
                return {
                    name, nickName
               }
            },
            template:`
            <div>
                name: <input v-model="name"/>
                <div>{{name}}</div>
                nickName: <input v-model="nickName"/>
                <div>{{nickName}}</div>
            </div>
                `,
        });
        const vm = app.mount('#root');
    </script>
</body>
</html>