【vue3】vue3 setup如何使用watch？

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。
他接受两个参数：

{Data} props
{SetupContext} context

在setup选项里使用watch有两种办法。

第一种：使用watchEffect，watchEffect立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数，可以接收watchEffect的返回值用来停止监听。

示例：

<script lang="ts">
import { ref,watchEffect } from 'vue'
export default {
    setup(){
        const message = ref("hello")
        const changeMessage = ()=> message.value = "hello world"

        watchEffect((onInvalidate)=>{
            //使用这个函数的时候会执行一次里边的代码,因为这里打印了message.value
            //message是ref响应式变量
            //所以后续检测到message值的变化，就会再次执行effect里边的代码
            console.log("message 被修改了",message.value)
            //如果是下边这种情况，没有message.value
            //那么只会在注册effect的时候执行一次，后续不再执行
            // console.log("这次没有message被修改了")
            onInvalidate(()=>{
                //当组件失效，watchEffect被主动停止或者副作用即将重新执行时，这个函数会执行
            })
        },{
            flush: 'post',//在组件更新后触发，这样你就可以访问更新的 DOM。
            // flush: 'pre',//默认值，在组件更新前触发
            // flush: 'sync',//同步触发，低效
        })
        
        // const stop = watchEffect();
        //stop() 可以停止监听

        return {
            message,
            changeMessage
        }
    }
}
</script>
<template>
    <div>
        {{message}}
        <button @click="changeMessage">修改message</button>
    </div>
</template>

第二种：watch，watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。

示例：

<script lang="ts">
import { ref,watch } from 'vue'
export default {
    setup(){

        const message = ref("hello")
        const changeMessage = ()=> message.value = "hello world"
        
        watch(
            ()=>message.value,
            (val,preVal)=>{
                //val为修改后的值,preVal为修改前的值
                console.log("message",val,preVal)
            },
            {
                //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
                //那么首次执行，val为默认值,preVal为undefined
                immediate:true,
                //这个参数代表监听对象时，可以监听深度嵌套的对象属性
                //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
                deep:true,
            }
        )

        return {
            message,
            changeMessage
        }
    }
}
</script>
<template>
    <div>
        {{message}}
        <button @click="changeMessage">修改message</button>
    </div>
</template>

watch还可以同时监听多个源，用数组传入。

示例：

<script lang="ts">
import { ref,watch } from 'vue'
export default {
    setup(){

        const message = ref("hello")
        const count = ref(0)
        const changeMessage = ()=> {
            message.value = "hello world"
            count.value = 666
        }

        watch(
            ()=>[message.value,count.value],
            ([messageVal,messagePreVal],[countVal,countPreVal])=>{
                //监听多个源用数组传入
                console.log("messageVal,messagePreVal",messageVal,messagePreVal)
                console.log("countVal,countPreVal",countVal,countPreVal)
            },
        )

        return {
            message,
            changeMessage
        }
    }
}
</script>
<template>
    <div>
        {{message}}
        <button @click="changeMessage">修改message</button>
    </div>
</template>

有帮助的话，点个赞呗！关于vue3的一切疑问，大家可以在评论区留言提问。

上一篇：vue3 setup如何使用computed？
下一篇：vue3新增内置组件teleport用法