深入理解vue3中的reactive()

当谈到Vue的响应式系统时，有一个重要的函数：reactive()。在Vue3中，reactive()是我们创建响应式对象的首选方法。

1. reactive()函数的作用

reactive()函数可将一个普通JavaScript对象转换为响应式对象，从而使对象的属性变为可观察和自动更新的。这意味着，当响应式对象的某个属性发生变化时，Vue会自动使用新的值重新渲染界面。

以下是使用reactive()函数创建响应式对象的基本语法：

import { reactive } from 'vue';

const obj = {
  foo: 'foo',
  bar: 'bar'
};
const reactiveObj = reactive(obj);

请注意，import { reactive } from 'vue'是从Vue模块中导入了reactive()函数。我们将一个普通的对象传递给该函数并使用reactiveObj变量来存储返回响应式对象。

现在，我们可以像访问普通对象一样访问reactiveObj中的属性，但这些属性都是响应式的：

console.log(reactiveObj.foo); // 'foo'

但是，当我们更改其中一个属性的值时，我们的UI会自动更新：

reactiveObj.foo = 'new foo';
// UI will automatically update

2. 示例说明

示例一：使用reactive()函数来创建一个计数器

下面是使用reactive()函数创建一个简单的计数器的示例说明：

<template>
  <div>
    <p>Count: {{ counter }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      counter: 0
    });

    const increment = () => {
      state.counter++;
    };

    return {
      counter: state.counter,
      increment
    };
  }
};
</script>

在此示例中，我们将一个简单的计数器存储在响应式对象中，并使用increment()方法来增加它。毫无疑问，每当计数器的值发生变化时，它会自动更新。

示例二：使用reactive()来创建一个TODO列表

下面是一个使用reactive()函数创建TODO列表的示例说明：

<template>
  <div>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo.text }}
      </li>
    </ul>
    <input v-model="newTodo" placeholder="Add a new TODO" @keyup.enter="addTodo">
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      todos: [
        { text: 'Learn Vue 3' },
        { text: 'Build a project' },
        { text: 'Deploy it' }
      ],
      newTodo: ''
    });

    const addTodo = () => {
      state.todos.push({ text: state.newTodo });
      state.newTodo = '';
    };

    return {
      todos: state.todos,
      newTodo: state.newTodo,
      addTodo
    };
  }
};
</script>

在此示例中，我们将TODO列表存储在响应式对象中，并使用addTodo()函数向TODO列表中添加项目。每当我们添加新的TODO项目时，它的UI都会自动更新。