ref 简单讲解

什么是 ref？

ref 是 Vue 3 中创建响应式数据的工具函数，主要用于包装基本类型数据（字符串、数字、布尔值）。

基本用法

import { ref } from 'vue'// 创建响应式数据
const name = ref('张三')
const age = ref(18)
const isActive = ref(true)

关键特点

1. 访问和修改

// 读取值：需要 .value
console.log(name.value)  // '张三'// 修改值：需要 .value
name.value = '李四'
age.value = 20

2. 在模板中自动解包

<template><p>姓名：{{ name }}</p>  <!-- 不需要 .value --><p>年龄：{{ age }}</p>   <!-- 不需要 .value -->
</template>

3. 响应式更新

function changeName() {name.value = '王五'  // 页面会自动更新
}

ref 核心要点

// 创建
const name = ref('张三')// 读取（需要 .value）
console.log(name.value)// 修改（需要 .value）
name.value = '李四'// 模板中自动解包（不需要 .value）
<template><p>{{ name }}</p>
</template>

一句话总结：ref 是 Vue 3 的"响应式包装器"，让基本类型数据变成响应式，使用时需要 .value，模板中自动解包。