解析vue3的ref, reactive的使用和原理

什么是vue3的ref和reactive

vue3 是一种流行的前端框架，它通过使用 ref 和 reactive 方法来管理应用程序状态。

ref 方法用于创建一个响应式数据对象，它可以包装变量并返回一个 ref 对象。ref 返回的对象具有 value 属性，它的值等于包装的变量的值。当包装的变量的值发生变化时，ref 对象的 value 属性也会被更新，并且会触发视图的重新渲染。

reactive 方法用于创建一个响应式数据对象，它可以包装一个 JavaScript 对象并返回一个响应式的代理对象。返回的代理对象中的每个属性都是响应式的，它们会在被访问和修改时触发视图的更新。

ref和reactive的使用

使用ref

import { ref } from 'vue'

// 创建一个响应式数据对象
const count = ref(0)

// 在模板中使用count的值
<template>
  <div>{{ count }}</div>
</template>

在上面的示例中，我们使用 ref 函数创建了一个响应式数据对象 count，并将其初始化为 0。在模板中使用 {{ count }} 来显示该响应式数据对象的值。

使用reactive

import { reactive } from 'vue'

// 创建一个响应式数据对象
const person = reactive({
  name: 'John',
  gender: 'male',
  age: 30
})

// 在模板中使用person的属性
<template>
  <div>
    <p>Name: {{ person.name }}</p>
    <p>Gender: {{ person.gender }}</p>
    <p>Age: {{ person.age }}</p>
  </div>
</template>

在上面的示例中，我们使用 reactive 函数创建了一个响应式数据对象 person，它包含 name、gender 和 age 三个属性。在模板中使用 {{ person.name }}、{{ person.gender }} 和 {{ person.age }} 来显示 person 对象的属性值。

ref和reactive的原理

vue3 使用了一种类似于观察者模式的机制来实现响应式数据更新。当一个响应式数据对象被创建并使用时，vue3 会为该对象创建一个响应式代理对象，并为该代理对象添加对应的观察者。

当响应式数据对象被修改时，vue3 会通知观察者，并自动更新视图。在 ref 中，由于返回的是一个响应式数据对象的引用，所以只需在修改数据时，通过 value 属性访问即可。而在 reactive 中，由于返回的是一个代理对象，数据的访问和修改都需要通过代理对象进行。

总结

vue3 的 ref 和 reactive 是管理应用程序状态的关键方法。它们提供了一种简单而强大的机制，使开发者能够轻松地创建和管理响应式数据对象，从而使视图和状态保持同步。