【Vue3】使用ref与reactive创建响应式对象

在Vue 3中，可以使用ref()和reactive()来创建响应式对象。ref()用于创建基本类型的响应式引用，而reactive()用于创建对象类型的响应式数据。

以下是使用ref()和reactive()的示例代码：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
 
    <p>Name: {{ person.name }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>
 
<script>
import { ref, reactive } from 'vue';
 
export default {
  setup() {
    // 使用 ref 创建响应式基本类型
    const count = ref(0);
    function increment() {
      count.value++;
    }
 
    // 使用 reactive 创建响应式对象
    const person = reactive({
      name: 'Vue Master'
    });
    function changeName() {
      person.name = 'Vue3 User';
    }
 
    // 返回响应式数据和方法，供模板使用
    return {
      count,
      increment,
      person,
      changeName
    };
  }
};
</script>

在这个例子中，count是一个响应式的引用，持有一个基本类型的值。increment函数增加count.value的值。person是一个响应式的对象，其属性name可以被追踪并响应式地更新。changeName函数更新person.name的值。