vue3 数据监听

在 Vue3 中，数据监听的实现方式与 Vue2 有所不同。Vue3 采用了 Proxy 对象来监听数据变化，而不是 Object.defineProperty。这使得 Vue3 的性能得到了很大的提升。

下面是一个简单的示例：

import { reactive } from 'vue'

const state = reactive({
  count: 0
})

// 监听 state.count 的变化
watchEffect(() => {
  console.log(state.count)
})

// 修改 state.count 的值
state.count++

// 输出结果为 1

在上面的代码中，我们使用了 reactive 函数来创建了一个响应式对象 state，然后使用 watchEffect 函数来监听 state.count 的变化。当我们修改 state.count 的值时，控制台会输出新的值 1。

需要注意的是，在 Vue3 中，响应式对象必须使用 reactive 函数来创建，不能使用 Vue2 中的 data 函数。同时，Vue3 还提供了许多新的 API，如 ref 函数、watch 函数等，可以更方便地进行数据监听。