五 分分钟学会 在vue3如何使用 watchEffect

watchEffect 的优点

可以自动监听 watchEffect 中使用的响应式数据

页面首次加载后就会 默认执行一次，watchEffect内部的代码

如何使用 watchEffect

<template>
  <div class="about">
    <!-- 使用响应式数据 -->
    <div>我是data1：{{ data1 }}</div>
    <div>我是data2：{{ data2 }}</div>

    <div>我是data3：{{ data3 }}</div>
    <div>我是data4：{{ data4 }}</div>

    <!-- 修改响应式数据 -->
    <button @click="changeData1">修改data1.b.c</button>
    <button @click="changeData2">修改data3</button>
    
  </div>
</template>

<script setup lang="ts">
// 引入watch
import { watchEffect, ref } from 'vue'

// 使用ref声明响应式数据
let data1 = ref({ a: 1, b: { c: 2 } })

let data2 = ref(0)

let data3 = ref(1)

let data4 = ref(0)

// 使用监听返回 watchEffect ，同时监听data1.b.c  data3 的变化，并且将变化后的值 分支给到 data2 和 data4
// flush: 'post' 时 ，在watchEffect获取 dom元素，会获取到最新的dom，否则会获取到 旧的dom（）
watchEffect(() => {
  data2.value = data1.value.b.c
  data4.value = data3.value
}, {
  flush: 'post'
})
// 修改 data1.value.b.c  数据发生变化
const changeData1 = () => {
  data1.value.b.c++
}

// 修改 data3 数据发生变化
const changeData2 = () => {
  data3.value++
}

</script>