vue3 reactive的坑

在使用Vue3的reactive时，需要注意以下几个坑点：
1. 直接赋值破坏响应式结构：直接给reactive对象的属性赋值，会破坏响应式结构，导致数据不会更新。正确的做法是使用Vue提供的set函数来更新属性值。
2. 嵌套对象的响应式：在reactive对象中嵌套对象时，需要使用toRefs函数将嵌套对象转换为响应式对象，否则嵌套对象的属性不会响应式更新。
3. 在setup函数中使用reactive对象：在setup函数中使用reactive对象时，需要使用toRefs函数将reactive对象转换为响应式对象，否则reactive对象的属性不会响应式更新。
4. 在模板中使用reactive对象：在模板中使用reactive对象时，需要使用解构语法将reactive对象的属性解构出来，否则模板不会响应式更新。
5. 在watch函数中使用reactive对象：在watch函数中使用reactive对象时，需要使用toRefs函数将reactive对象转换为响应式对象，否则watch函数不会响应式更新。

相关问题

vue3 reactive

Vue3中的响应式系统是通过`reactive`函数实现的。`reactive`函数接收一个普通对象作为参数，并返回一个响应式的Proxy对象，该Proxy对象会在对象属性被修改时自动触发重新渲染。例如：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
});

// 访问 state.count
console.log(state.count); // 0

// 修改 state.count
state.count++;

// state.count 发生变化，触发重新渲染
console.log(state.count); // 1

在上面的例子中，我们创建了一个响应式的对象`state`，并对其属性进行了修改。由于`state`是响应式的，当`state.count`发生变化时，Vue3会自动触发重新渲染相关的组件。这就是Vue3的响应式系统。

vue 3 reactive

Vue 3 的响应式系统相对于 Vue 2 有了很大的改进，其中最显著的变化是引入了一个新的 API——`reactive`。在 Vue 3 中，我们可以使用`reactive`来创建响应式数据对象，而不必像 Vue 2 中那样使用`Vue.observable`。以下是一个简单的例子：

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello world'
})

console.log(state.count) // 输出：0
console.log(state.message) // 输出：'Hello world'

在上面的代码中，我们通过`reactive`函数创建了一个名为`state`的响应式数据对象，它包含了两个属性：`count`和`message`。我们可以通过访问这些属性来读取和修改它们的值，并且任何对这些值的修改都会自动地触发相关的响应式更新。

值得注意的是，在 Vue 3 中，我们不再需要使用`this.$data`来访问组件实例中的数据，因为组件实例本身就是响应式的。这意味着我们可以直接访问组件实例中的数据属性，如下所示：

import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello world'
    })

    return {
      state
    }
  }
})

在上面的代码中，我们通过`defineComponent`函数创建了一个组件，使用`setup`函数来设置组件的逻辑。在`setup`函数中，我们同样使用`reactive`函数创建了一个名为`state`的响应式数据对象，并将其以一个名为`state`的属性的形式返回。这样，我们就可以在组件的模板中直接访问`state`中的属性，如下所示：

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <p>Message: {{ state.message }}</p>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello world'
    })

    return {
      state
    }
  }
})
</script>