Vue3中ref和reactive用法与双向数据绑定

JiaLin_Denny2026-08-06 10:15

一、Ref和Reactive

javascript 复制代码

基本数据类型例如字符串、数值通常用ref来定义
let name = ref('张三')
let age = ref(8)
引用类型常用reactive来定义
let person = reactive({
   name: '张三',
   age: 8
})

二、Ref说明

html 复制代码

 <template>
    <div>
        <span>姓名</span><input type="text" v-model="name">
        <span>年龄</span><input type="number" v-model="age"> 
        <el-button type="primary" size="small" @click="handleAgeAdd">增加年龄</el-button>
    </div>
 <template>
<script setup lang="ts">
import { ref } from 'vue'
  let name = ref('张三')
  let age = ref(8)
  function handleAgeAdd() {
    console.log(name)
    name.value = '李四'
    age.value += 1
  }
</script>

此时控制台中会打印name，可以看到name是一个refImpl对象，并且具有value属性。因此修改通过ref定义的name和age时候不能写成name='李四'而是需要写成name.value='李四'。同理age要写为age.value+=1

三、Reactive说明

html 复制代码

<template>
  <div>
    <span>姓名</span><input type="text" v-model="person.name">
    <span>年龄</span><input type="number" v-model="person.age"> 
    <el-button type="primary" size="small" @click="handleAgeAdd">增加年龄</el-button>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
  let person = reactive({
    name: '张三',
    age: 8
  })
  function handleAgeAdd() {
    console.log(person)
    person.name = '李四'
    person.age += 1
  }
</script>

此时控制台中会打印person，可以看到person是一个proxy对象。因此修改通过reactive定义的person只需要写成person.name='李四'。同理age要写为person.age+=1。不再需要访问.value来修改数据了。

四、双向数据绑定

Vue3中一大特性就是双向数据绑定，使用v-model即可实现。具体使用方式可以参考上面的的代码片段使用即可。