vue3的watchEffect和watch其他参数

目录

1、watchEffect基本使用

2、watch 与 watchEffect的异同

3、watch其他参数使用

---

1、watchEffect基本使用

1 回调函数立即调用

2 回调函数依赖的数据都会被监控

3 深度监控

<template>
  <div>
     <button @click="num++">num++</button>
  </div>
</template>

<script setup>
import { watchEffect,  ref,  reactive } from 'vue'
// watchEffect监控数据
const num =ref(10)
const obj = reactive({
  name: 'zs',
  age: 18,
  boyFriend: {
    name: 'lisi',
    age: 19
  }
})

watchEffect(() => {
  console.log(num.value);
  console.log(obj.boyFriend.name);
})


</script>

<style lang="scss" scoped>

</style>

2、watch 与 watchEffect的异同

1、 相同点 ：都可以对数据进行侦听

2、 不同点 ：watchEffect回调函数立即调用、对回调函数依赖的数据隐式监控、默认深度监控

watch 和 watchEffect 都能监听响应式数据的变化，不同的是它们监听数据变化的方式不同。

watch 会明确监听某一个响应数据，而 watchEffect 则是隐式的监听回调函数中响应数据。 watch 在响应数据初始化时是不会执行回调函数的， watchEffect在响应数据初始化时就会立即执行回调函数。

3、watch其他参数使用

watchPostEffect() 是watchEffect() 使用 flush: 'post' 选项时的别名。

onInvalidate副作用清理函数

执行时机：下一次副作用执行前

 

<script setup >

import {ref, watch} from 'vue'

let sum=ref(0)
let qyz=ref(null)
const sumadd=()=>{
    sum.value++
}

//onInvalidate副作用清理函数
//副作用-发网络请求。开启定时器，控制台输出
watch(sum,(newVal,oldval,onInvalidate)=>{   //数据变了才执行
    //onInvalidate副作用清理函数
    console.log('青阳子')
    console.log('DOM节点',qyz.value.innerHTML)
    onInvalidate(()=>{
        //执行时机：下一次副作用执行前
        console.log(222)
    })
},{
    flush:'post'//拿到dom更新后的值
})
</script>

<template>
<div>hello,world</div>
<div>
     
<h2 ref="qyz">{{ sum }}</h2>
    </div>
<button @click="sumadd">sum++</button>

</template>

<style scoped>

</style>