vue中＜script setup＞中使用watch方法

在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,countVal],[messagePreVal,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>