Vue3 ref响应式变量详解

Vue3 ref介绍:

在Vue 3中，ref是一个函数，用于创建响应式数据。它接受一个初始值作为参数，并返回一个可变的响应式对象。
使用ref创建的响应式对象可以直接在模板中使用，并且当其值发生变化时，相关的组件会自动重新渲染。与Vue 2中的data选项不同，Vue 3推荐使用ref来创建响应式数据。
在使用ref创建的响应式对象上，可以使用.value属性来访问和修改其值。
示例:

import { ref } from 'vue';
 
const count = ref(0);
 
console.log(count.value); // 输出：0
 
count.value++; // 修改值
 
console.log(count.value); // 输出：1

需要注意的是，在模板中直接使用ref创建的响应式对象时，不需要使用.value来访问和修改其值。例如：

<template>
  <div>{{ count }}div>
template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
    
    return {
      count
    };
  }
}
script>

以上是ref的基础使用

ref 更多使用方法:

非响应式包装对象：

ref函数可以用于将任意非响应式对象包装成响应式对象。例如，将一个普通的JavaScript对象包装成响应式对象：

JavaScript

const data = ref({ name: 'Alice', age: 25 });

这样，data就成为了一个包装了普通对象的响应式对象，可以对其进行访问和修改。

1. 响应式对象的解包：

通过.value属性访问响应式对象的值是一种解包操作，Vue 3提供了更方便的解包语法。使用toRefs函数可以将一个包含多个响应式对象的组合对象解包为独立的响应式对象。

JavaScript

import { ref, toRefs } from 'vue';
 
const person = {
  name: ref('Alice'),
  age: ref(25)
};
 
const { name, age } = toRefs(person);
 
console.log(name.value); // 输出：'Alice'
console.log(age.value); // 输出：25

这样，name和age都成为了独立的响应式对象，可以直接访问其值。

1. 获取响应式对象的只读引用：

有时候我们希望获取一个响应式对象的只读引用，以防止意外地修改其值。可以使用readonly函数来创建一个只读的响应式对象。

JavaScript

import { ref, readonly } from 'vue';
 
const count = ref(0);
const readOnlyCount = readonly(count);
 
console.log(readOnlyCount.value); // 输出：0
 
readOnlyCount.value++; // 抛出错误，不能修改只读的响应式对象

通过readonly函数可以将一个响应式对象转换为只读的响应式对象，从而保护其值不被修改。

总结起来，除了基本的创建响应式数据外，ref还可以用于包装非响应式对象、解包响应式对象、以及创建只读的响应式对象。这些特性提供了更灵活和高级的用法，能够满足不同场景下的需求。