ref 简单讲解

2401_837088502025-08-23 13:16

什么是 ref？

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

基本用法

javascript 复制代码

import { ref } from 'vue'

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

关键特点

访问和修改

javascript 复制代码

// 读取值：需要 .value
console.log(name.value)  // '张三'

// 修改值：需要 .value
name.value = '李四'
age.value = 20

在模板中自动解包

javascript 复制代码

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

响应式更新

java 复制代码

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

ref 核心要点

javascript 复制代码

// 创建
const name = ref('张三')

// 读取（需要 .value）
console.log(name.value)

// 修改（需要 .value）
name.value = '李四'

// 模板中自动解包（不需要 .value）
<template>
  <p>{{ name }}</p>
</template>

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