watcheffect深度监听

watchEffect 是 Vue 3 中新增的一个响应式API，用于深度监听数据变化，当监听的数据发生变化时，自动执行传入的回调函数。

watchEffect 可以监听哪些数据类型：
- Ref 对象
- Reactive 对象
- 嵌套对象和数组

示例代码如下：

import { reactive, ref, watchEffect } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello world',
  list: [
    {
      id: 1,
      name: 'apple'
    },
    {
      id: 2,
      name: 'banana'
    }
  ]
})

const count = ref(0)

watchEffect(() => {
  console.log(state.count) // 监听 state.count 的变化
  console.log(state.message) // 监听 state.message 的变化
  console.log(state.list[0].name) // 监听 state.list[0].name 的变化
  console.log(count.value) // 监听 count 的变化
})