Vue3 响应式

Vue3引入了一种新的响应式系统，与Vue2的响应式系统有一些重大差异。在Vue3中，响应式数据的创建不再依赖于Vue实例，而是通过reactive函数来创建。reactive函数接受一个普通JavaScript对象并返回一个响应式数据对象。

使用Vue3响应式系统的基本步骤如下：

1. 导入reactive函数：

import { reactive } from 'vue';

1. 使用reactive函数创建响应式数据对象：

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

1. 在模板中使用响应式数据：

<template>
  <div>{{ state.count }}</div>
</template>

1. 在脚本中更新响应式数据：

state.count++;

Vue3的响应式系统还支持ref函数，它用于创建一个包装器对象，将普通值包装成响应式数据。在使用ref创建的响应式数据上，访问其值需要使用.value：

import { ref } from 'vue';

const count = ref(0);

console.log(count.value); // 输出0

这是Vue3响应式系统的基本用法，它提供了更灵活和高效的方式来处理响应式数据。