vue中reactive,effect

在 Vue 中，`reactive` 和 `effect` 是 `Vue 3` 中新增的两个函数。它们是 `Vue 3` 中实现响应式数据和副作用的核心 API。

`reactive` 函数会将一个普通的 JavaScript 对象转换为响应式对象。当响应式对象中的属性发生变化时，会自动触发更新视图的操作。

`effect` 函数用于创建一个副作用函数，副作用函数可以访问响应式对象，并响应式对象的变化。当响应式对象发生变化时，副作用函数会被重新执行。

举个例子，假设我们有一个 `user` 对象：

const user = {
  name: 'Alice',
  age: 18
}

我们可以使用 `reactive` 函数将这个对象转换为响应式对象：

import { reactive } from 'vue'

const state = reactive(user)

这样，`state` 对象就是响应式对象，当我们修改 `state` 中的属性时，会自动触发更新视图的操作。

state.age = 20

在 `effect` 函数中，我们可以访问 `state` 响应式对象，并在其中做一些副作用操作，比如打印日志：

import { effect } from 'vue'

effect(() => {
  console.log(state.age)
})

这样，在 `state.age` 发生变化时，副作用函数会被重新执行，从而打印出新的 `age` 值。