ref()函数

在Vue 3中，ref 函数是组合式 API (Composition API) 中用于创建响应式引用（reactive references）的一种方式。它可以用于定义响应式的数据，使得该数据在变化时会触发视图的重新渲染。

ref 函数的语法和使用

引入 **ref** 函数

import { ref } from 'vue';

1. 创建一个响应式引用

ref 函数可以接受一个初始值，并返回一个包含该初始值的响应式引用对象。

const count = ref(0);

1. 访问和修改响应式引用的值

创建的响应式引用对象有一个 .value 属性，用于访问和修改其值。

const count = ref(0);

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

count.value++;
console.log(count.value); // 输出: 1

在 Vue 组件中使用 ref

下面是一个完整的示例，包括导入、创建响应式引用、绑定到模板和处理事件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 创建响应式引用
const title = ref('Hello Vue 3!');
const count = ref(0);

// 方法：增加计数器
const increment = () => {
  count.value++;
};
</script>

ref 与 reactive 的区别

• **ref**：用于简单类型（如数字、字符串、布尔值）以及对象类型。通过 .value 访问和修改值。
• **reactive**：用于创建嵌套对象的响应式状态，返回的对象是一个响应式代理，不需要通过 .value 访问属性。

1. 示例：使用 **reactive**

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  title: 'Hello Vue 3!'
});

console.log(state.count); // 0
state.count++;
console.log(state.count); // 1

1. 何时使用 **ref** 和 **reactive**

• 使用 ref 来处理原始值（如数字、字符串、布尔值）以及需要单独处理某个对象引用的情况。
• 使用 reactive 来处理嵌套对象以及需要对整个对象进行响应式处理的情况。

1. 示例：混合使用 **ref** 和 **reactive**

在实际项目中，可以混合使用 ref 和 reactive 来满足不同的需求：

<template>
  <div>
    <h1>{{ state.title }}</h1>
    <p>Count: {{ state.count }}</p>
    <button @click="increment">Increment</button>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 创建响应式对象
const state = reactive({
  count: 0,
  title: 'Hello Vue 3!'
});

// 创建响应式引用
const message = ref('This is a reactive message.');

// 方法：增加计数器
const increment = () => {
  state.count++;
};
</script>

在这个示例中，state 是一个使用 reactive 创建的响应式对象，而 message 是一个使用 ref 创建的响应式引用。这样可以根据数据的性质选择最合适的响应式处理方式。