Vue3 学习 基本类型响应式数据语法（ref ,reactive）

什么是数据响应式:

“响应式”，就是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新：(数据响应式是指当数据发生变化时，相关的代码会自动感知到这个变化，并进行相应的更新。在 Vue 中，数据响应式是通过 Vue 的响应式系统实现的)。

在vue2 中基本类型的响应式数据都是通过 在Vue data 实列中完成的 : 我们这里通过一个案例展示:

在上面的示例中，我们声明了一个 `message` 属性，并将其绑定到 `<p>` 元素中。当点击按钮时，调用 `update` 方法，将 `message` 的值更新为 `'张三'`。由于 `message` 是响应式数据，所以当它的值发生变化时，相关的视图会自动更新，显示新的消息。

Vue3 声明 和使用  基本类型数据的响应式数据 :

1:ref 创建和声明响应式数据 :首先需要我们 引入 ref 配置 

当我们需要对基础数据 声明为响应式数据的时候 只需要 将创建的基础数据使用 ref 包裹起来即可:如图:这里可以将基础数据设置为对象形式  也可以设置单个字符形式进行插值 

这里我们将 前面  1,2 声明为响应式数据  不通过ref函数方法包裹的数据在控制台打印的效果如下:

通过ref 将数据封装为了一个对象的形式 这就已经基本数据类型变成引用实现的实例对象 

这里我们将数据变成响应式数据   通过方法进行数据的实时更新的时候和vue2不同 我们需要将数据通过.vaule 的方法对数据进行更新  所以读的使用，要使用xx.value去读。人家vue3底层是调用get。改的时候底层调用的是set 这是一个小细节噢 ;(注意:在Vue 3中，ref可以用于包裹对象类型的响应式数据。ref函数接受一个参数，并返回一个包装后的响应式对象。如果传入的参数是一个对象，ref会将其转换为响应式对象。

)

2：1:reactive :创建声明对象类型的响应式数据

  首先需要我们 引入 reactive 配置 

这里接一个小案例  当我们将reactive 对象进行包裹就可以对数据进行响应式修改了 

控制台输出的数据格式 使用 Proxy 可以创建一个代理对象。它能够实现对其他对象的代理，这里的关键词是其他对象，也就是说，Proxy 只能代理对象，无法代理非对象值，例如字符串、布尔值等。当我们的数据使用reactive 包裹格式为 Proxy 我们的对象就是响应式的数据了