简单谈谈Vue3中的ref和reactive

一、Vue3中的ref和reactive是什么？

Vue3中的ref和reactive都属于Vue3的响应式系统。这个响应式系统支持应用的状态自动更新，并且Vue3的响应式系统相较于Vue2有很大的改进。

在Vue2中，响应式数据只能定义在Vue组件实例的data选项中，而在Vue3中，ref和reactive可以定义在任何地方。

ref是一个函数，它可以将传入的数据变成响应式数据，并且返回一个指向这个数据的引用。在JavaScript中，简单类型（number，string，boolean，null，undifined）的直接赋值是不可变的，而ref可以让这些简单类型的变量响应式起来，即当变量发生变化时，组件会自动重新渲染。

reactive是Vue3中的另一个函数，它可以将一个对象变成响应式数据，并且返回一个Proxy对象。当这个对象的某个属性发生变化时，组件会自动重新渲染。

二、ref和reactive的使用示例

1. ref的使用示例

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    }
  }
}
</script>

在这个示例中，我们定义了一个ref变量count，它的初始值为0。increment函数用于将count的值加1。在模板中，我们使用{{ count }}来渲染count变量，同时使用增加来响应用户的点击事件。当按钮被点击时，increment函数会被执行，count的值会加1，组件会自动重新渲染。

1. reactive的使用示例

<template>
  <div>
    <p>{{ person.name }}</p>
    <p>{{ person.age }}</p>
    <button @click="incrementAge">增加年龄</button>
  </div>
</template>

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

export default {
  setup() {
    const person = reactive({
      name: "张三",
      age: 18
    });

    function incrementAge() {
      person.age++;
    }

    return {
      person,
      incrementAge
    }
  }
}
</script>

在这个示例中，我们定义了一个reactive变量person，它是一个代理对象，包含name和age两个属性。incrementAge函数用于将person对象的age属性加1。在模板中，我们使用{{ person.name }}和{{ person.age }}来渲染person的属性值，同时使用增加年龄来响应用户的点击事件。当按钮被点击时，incrementAge函数会被执行，person的age属性会加1，组件会自动重新渲染。

三、总结

ref和reactive是Vue3中的重要概念，它们是Vue3响应式系统的核心。ref可以将传入的数据变成响应式数据，并且返回一个指向这个数据的引用，reactive可以将一个对象变成响应式数据，并且返回一个Proxy对象。在实际开发中，我们可以根据业务场景，选择合适的响应式数据定义方式，从而更好地利用Vue3的响应式系统。