vue3中ref和reactive响应式数据、ref模板引用(组合式和选项式区别)、组件ref的使用

news2025/4/3 11:15:52

目录

Ⅰ.ref

1.基本用法:ref响应式数据

2.ref模板引用

3.ref在v-for中的模板引用

​4.ref在组件上使用

​5.TS中ref数据标注类型

Ⅱ.reactive 

 1.基本用法:reactive响应式数据

 2.TS中reactive标注类型

Ⅲ.ref和reactive的使用场景和区别

Ⅳ.小结&常见疑问解答



Ⅰ.ref

1.基本用法:ref响应式数据

ref 可以对原始类型(基本数据类型)和对象(引用类型)的数据进行响应式处理。
ref 的核心作用是将一个普通的 JavaScript 数据转换成响应式的。它返回一个特殊的对象,这个对象包含一个名为 .value 的属性,我们在JS中就需要通过操作 .value 访问和修改这个ref的响应式数据,但是在模板中不需要加.value来访问这个ref响应式数据的。

基本概念解析
基本数据类型:number, string, boolean, undefined, null
响应式数据:Vue的响应式数据(Reactivity)是Vue.js框架最重要的特性之一,它是Vue实现数据绑定的核心机制。 在Vue中,当数据发生变化时,相关的DOM元素会自动更新,而不需要手动操作DOM。 这种自动更新的机制使得开发者在编写代码时可以更加专注于数据的状态和业务逻辑,而不必担心如何去更新视图。

 如果我们想让一个 名为count的变量 变成响应式的,就可以这样写:

import { ref } from 'vue';

//count是基本数据类型,变为响应式
const count = ref(0);    

现在,count变量就不再是一个普通的数字了,而是一个包含 .value 属性的对象,它的值可以通过 count.value 来访问和修改。当我们修改 count.value 的值时,任何依赖于 count 的页面元素都会自动更新。
我们在JS中访问或修改该 count变量的值的时候,需要加上 .value来进行访问,但是在模板中访问 count 的时候,不需要加上 .value,直接写变量名count即可访问count的值

//在模板中,我们可以不加..value来访问count变量的值:
<template>
  <div>{{ count }}</div>
</template>

//在JS中,我们要加上.value来访问/修改count变量的值:
console.log(count.value); // 0
count.value = 1; 

我们还可以让 包含count属性的对象 变成一个响应式的数据:

//我们可以直接用 ref 包裹整个 对象

//count是对象的属性
const data = ref({ count: 0 })    //对象也可以变成响应式的

这样一来,data 就变成了一个响应式对象,它的所有属性,包括 count,都会变成响应式的。我们在JS中访问或修改该 data对象的属性的时候,需要加上 .value来进行访问,并且在模板中访问 data.count 的时候,也需要加上 .value

//在模板中访问data对象属性count
<template>
<div>{{ data.value.count }}</div>
</template>

//在JS中访问data对象对象count
console.log(data.value.count); // 0

假如我们直接将一个 ref 对象赋值给一个对象的属性,而 ref没有使用.value进行赋值,那么这个属性不会变成响应式的。

有一个名为 data 的对象,我们想让它的 name 属性变成响应式的,下面这种写法是错误的:

因为 data.name 现在存储的是 nameRef 对象本身,而不是它的值。
当我们修改改 nameRef.value 时,data.name 并不会随之改变,页面也不会更新。

const data = { name: 'John' };
const nameRef = ref('John');
data.name = nameRef;   //ref没有使用.value进行赋值,data.name是不会变成响应式的

正确的做法是将 nameRef.value 赋值给 data.name 或者可以直接用 ref 包裹整个 data 对象,以下是正确示例:

//使用nameRef.value进行赋值
data.name = nameRef.value;

//或者直接用ref包括整个data对象
const data = ref({ name: 'John' });

ref 小结:ref 是 Vue 3 中创建响应式数据的基本方法,但它并不会直接将一个普通的 JavaScript 对象变成响应式的。我们需要通过 .value 来访问和修改响应式数据,或者直接用 ref 包裹整个对象,才能实现真正的响应式更新。

2.ref模板引用

如果我们需要直接访问组件中的底层DOM元素,可使用vue提供特殊的ref属性来进行访问

我们可以在元素上使用ref属性来设置需要访问的DOM元素

  • ref属性值是 字符串 的形式;
  • ref属性值还可以是用v-bind::ref形式绑定的函数,该函数的第一个参数是该元素;

如果元素的 ref属性值 采用的是字符串形式:

  • 在组合式API的JS中,我们需要声明一个同名的ref变量,来获得该模板的引用;
  • 在选项式API的JS中,可通过this.$refs来访问模板的引用;

 组合式API:

<template>

  <!-- 字符串形式的 ref -->
  账号输入框:<input type="text" ref="account">
  <button @click="accountInputStyle">改变账号输入框的样式</button>

  <!-- 函数形式的 ref ,必须采用 v-bind 或 : 的形式来给ref绑定属性值 -->
  密码输入框:<input type="password" :ref="passwordFn">
  <button @click="passwordInputStyle">改变密码输入框的样式</button>

</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'

//定义响应式数据(同名ref变量)
// ref 变量名 和 对应DOM元素的ref属性值 相等
let account = ref(null)
let password = ref(null)

const accountInputStyle = () => {
  //account是获取的输入框DOM元素
  account.value.style.padding = '15px'
  account.value.style.caretColor = 'red'
  account.value.className = 'rounded'
  account.value.focus()
}

// 使用函数给ref绑定属性值,该函数的第一个参数为该元素
// 在页面渲染的时候会自动执行
// 函数式生命的 ref,不会在 this.$refs 中获取
const passwordFn = (el) => {
  // el是DOM元素,这里是密码输入框
  password.value = el
  console.log(password.value)
}
const passwordInputStyle = () => {
  //此处设置的 style 均为行内样式
  password.value.style.border = '4px solid green'
  password.value.style.padding = '15px'
  password.value.focus()
}

onMounted(() => {});
</script>

<style scoped>
</style>

选项式API:

<template>

  <!-- 字符串形式的 ref -->
  账号输入框:<input type="text" ref="account">
  <button @click="accountInputStyle">改变账号输入框的样式</button>

  <!-- 函数形式的 ref ,必须采用 v-bind 或 : 的形式来给ref绑定属性值 -->
  密码输入框:<input type="password" :ref="passwordFn">
  <button @click="passwordInputStyle">改变密码输入框的样式</button>

</template>

<script>
export default {
    data: () => ({
        accountEl: null,
        passwordEl: null
    }),
    methods: {
        changeAccountInputStyle() {
            this.accountEl = this.$refs.account // 获取账号输入框的 DOM
            console.log(this.accountEl)
            this.accountEl.style = "padding: 15px"
            this.accountEl.className = "rounded"
            this.accountEl.focus()
        },
        passwordRef(el) { 
            this.passwordEl = el  // el 元素是密码输入框
        },
        changePasswordInputStyle() {
            console.log(this.passwordEl) 
            console.log(this.$refs) // 函数式声明的 ref,不会在this.$refs中获取
            this.passwordEl.style = "padding: 15px"
            this.passwordEl.className = "rounded"
            this.passwordEl.focus()
        },
    }
}
</script>

<style>
</style>

3.ref在v-for中的模板引用

当在v-for中使用模板引用时:(注意:需要 v3.2.25 及以上的版本;)

  • 如果 ref 值是 字符串 形式,在元素被渲染后包含对应整个 列表的所有元素【数组】
  • 如果 ref 值是 函数 形式,则会每渲染一个列表元素就会执行对应的函数【不推荐使用】;

 组合式API:

<template>
  <ul>
    <li v-for="b in books" :key="b.id" ref="bookList">
      {{ b.name }}
    </li>
  </ul>
</template>

<script setup>
import { onMounted, ref } from "vue";

// 书本
let books = ref([
  { id: 1, name: "海底两万里" },
  { id: 2, name: "骆驼祥子" },
  { id: 3, name: "老人与海" },
  { id: 4, name: "安徒生童话" },
]);

let bookList = ref(null);

onMounted(() => {
  console.log(bookList.value); // 获取引用的 DOM 对象并打印,发现是数组
  bookList.value[2].className = "error";
});
</script>

<style>
.error {
  border: 1px solid red;
}
</style>

选项式API:

<template>
  <ul>
    <!-- 如果 ref 值是字符串形式,在元素被渲染后包含对应整个列表的所有元素【数组】 -->
    <li v-for="b in books" :key="b.id" ref="bookList">
      {{ b.name }}
    </li>
  </ul>
  <button @click="changeBookListStyle">点我查看 bookList</button>

  <hr />
  <!-- 如果ref值是函数形式,则会每渲染一个列表元素则会执行对应的函数【不推荐使用】 -->
  <ul>
    <li v-for="s in students" :key="s.id" :ref="studentsRef">
      {{ s.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data: () => ({
    books: [
      { id: 1, name: "红楼梦" },
      { id: 2, name: "三国演义" },
      { id: 3, name: "水浒传" },
      { id: 4, name: "西游记" },
    ],
    students: [
      { id: 1, name: "Jack" },
      { id: 2, name: "Annie" },
      { id: 3, name: "Tom" },
    ],
  }),
  methods: {
    changeBookListStyle() {
      console.log(this.$refs.bookList);
      this.$refs.bookList[2].style = "color: red";
    },
    studentsRef(el) {
      console.log(el);
    },
  },
};
</script>

两种运行效果:


4.ref在组件上使用

模板引用也可以被用在一个子组件上:这种情况下引用中获得的值是组件实例

  • 如果子组件使用的是组合式API<script setup>,那么该子组件默认是私有的,则父组件无法访问该子组件,除非子组件在其中通过defineExpose宏采用对象形式显示暴露特定的数据或函数
  • 如果子组件使用的选项式API默认情况下父组件可以随意访问该子组件的数据和函数,除非在子组件使用expose选项来暴露特定的数据或函数,那么父组件就只能访问在expose种暴露的数据或函数,没有暴露的就不能访问了。expose值为字符串数组

 组合式API:

  • 父组件:
    <template>
      <h3>登录页面</h3>
      <hr>
      <!-- 组件上的 ref 的值为该组件的实例 -->
      <Vue1 ref="login_vue"></Vue1>
      <hr>
      <button @click="showSonData">查看子组件的信息</button>
    </template>
    
    <script setup>
    //组合式API中,默认情况下,子组件中的数据、函数等等都是私有的,不能访问
    //如果 子组件 通过 defineExpose 宏采用对象形式显式暴露特定的数据或函数等等
    
    import Vue1 from '@/components/src/test.vue'    //导入子组件
    import { ref, onMounted } from 'vue'
    const login_vue = ref(null)
    const showSonData = () => {
      console.log(login_vue.value.account)
      console.log(login_vue.value.password)
      login_vue.value.toLogin()
    }
    onMounted(() => {});
    </script>
    
    
  • 子组件:
    <template>
      账号:<input type="text" v-model="account">
      <br>
      密码:<input type="text" v-model="password">
      <hr>
      <button @click="toLogin">登录</button>
    </template>
    
    <script setup>
    import { ref } from 'vue'
    const account = ref('admin')
    const password = ref('123456')
    const toLogin = () => {
      alert('登录中……')
    }
    // 使用 defineExpose 将指定数据、函数等暴露出去
    defineExpose({
      account,
      toLogin
    });
    </script>

 效果展示:


选项式API:

  • 父组件:
<template>
  <h3>登录页面</h3>
  <hr>
  <!-- 组件上的 ref 的值为该组件的实例 -->
  <Vue1 ref="loginVue"></Vue1>
  <hr>
  <button @click="showSonData">查看子组件的信息</button>
</template>

<script>
//选项式API中,默认情况下,父组件可以随意访问子组件的数据和函数、计算属性等等
//如果 子组件 增加 expose 选项之后,就只能访问 expose 暴露的属性和函数等等

import Vue1 from '@/components/src/test1.vue'
export default {
  name: 'App',
  components: { Vue1 },
  data: () => ({
    login_vue: null
  }),
  methods: {
    showSonData () {
      console.log(this.login_vue.account)
      console.log(this.login_vue.password)
      this.login_vue.toLogin()
    }
  },
  mounted () {
    // 打印出来的式子组件的ref对象
    this.login_vue = this.$refs.loginVue
    console.log(this.login_vue)
  }
}
</script>

子组件:

<template>
  账号:<input type="text" v-model="account">
  <br>
  密码:<input type="text" v-model="password">
  <hr>
  <button @click="toLogin">登录</button>
</template>

<script>
export default {
  name: 'Vue1',
  data: () => ({
    account: 'admin',
    password: '123456'
  }),
  methods: {
    toLogin () {
      alert('登录中……')
    }
  },
  //向外暴露属性函数,增加这个选项之后,父组件只能访问该组件暴露的属性或方法等等
  expose: ['account', 'password']
}
</script>

<style scoped lang='scss'>
</style>

效果展示:

5.TS中ref数据标注类型

import { ref, Ref } from 'vue'
const ref1: Ref<number> = ref(0);

Ⅱ.reactive 

 1.基本用法:reactive响应式数据

reactive 不能基本类型的数据变为响应式,只适用于引用类型的数据(对象)。

reactive响应式数据由于是 proxy 代理的对象数据,可以直接获取到数据,不必添加 .value,即不论是在模板中还是JS中不需要加.value即可访问或修改reactive响应式数据的值。

const data = reactive({ num: 0});    //只能是引用类型,不能是基本类型
console.log(data.num); // 0

 2.TS中reactive标注类型

传给 reactive 函数的对象类型是什么,就给返回值对应的什么类型即可。

注意:如果这个对象当中又包含了 ref,这个时候 ref 是不需要添加对应的类型的,vue 会自动将其解包。

import { reactive } from 'vue'
const data: { num: number } = reactive({ num: 0});

//如果对象中本身就包含了ref时:
import { reactive } from 'vue'
const reactive1: { num: number } = reactive({ num: ref(0)});

Ⅲ.ref和reactive的使用场景和区别

  1. 如果需要一个响应式原始值,那么使用 ref() 是正确的选择,要注意是原始值
  2. 如果需要一个响应式对象,层级不深,那么使用 ref 也可以
  3. 如果需要一个响应式可变对象,并且对象层级较深,需要深度跟踪,那么使用 reactive

Ⅳ.小结&常见疑问解答

1. 为什么在模板中访问 ref 数据不需要加上 .value
在模板中,Vue 会自动解包 ref 数据,所以我们可以直接使用 count 而不是 count.value,但是在 JavaScript 代码中,我们需要使用 .value 来访问 ref 数据的值。

2. 如何在组件之间传递 ref 数据?
可以通过 props 传递 ref 数据。在子组件中,可以使用 defineProps 来接收 ref 数据,并使用 .value 来访问它的值。

3. 如何监听 ref 数据的变化?
可以使用 watch 函数来监听 ref 数据的变化。watch 函数接收两个参数:第一个参数是要监听的数据,第二个参数是一个回调函数,当数据发生变化时,回调函数会被执行。

4. ref 可以用于哪些类型的数据?
ref 可以用于任何类型的 JavaScript 数据,包括基本类型(例如数字、字符串、布尔值)、对象、数组等等。(所以也可以使用ref贯穿始终...)


参考文章

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2309166.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Oracle VM VirtualBox 7.1 安装与虚拟机创建全流程指南(Windows平台)

一、软件定位与核心功能 Oracle VM VirtualBox 是开源跨平台虚拟化工具&#xff0c;支持在 Windows、Linux、macOS 系统上创建和管理虚拟机&#xff08;VM&#xff09;&#xff0c;其核心功能包括&#xff1a; 多系统兼容&#xff1a;可安装 Windows、Ubuntu、CentOS 等 50 操…

细说 Java GC 垃圾收集器

一、GC目标 业务角度&#xff0c;我们需要追求2个指标&#xff1a; 低延迟&#xff08;Latency&#xff09;&#xff1a;请求必须多少毫秒内完成响应&#xff1b;高吞吐&#xff08;Throughput&#xff09;&#xff1a;每秒完成多少次事务。 两者通常存在权衡关系&#xff0…

第2章 windows故障排除(网络安全防御实战--蓝军武器库)

网络安全防御实战--蓝军武器库是2020年出版的&#xff0c;已经过去3年时间了&#xff0c;最近利用闲暇时间&#xff0c;抓紧吸收&#xff0c;总的来说&#xff0c;第2章开始带你入门了&#xff0c;这里给出了几个windows重要的工具&#xff0c;说实话&#xff0c;好多我也是第一…

量子关联特性的多维度探索:五量子比特星型系统与两量子比特系统的对比分析

模拟一个五量子比特系统&#xff0c;其中四个量子比特&#xff08;编号为1, 2, 3, 4&#xff09;分别与第五个量子比特&#xff08;编号为5&#xff09;耦合&#xff0c;形成一个星型结构。分析量子比特1和2的纠缠熵随时间的变化。 系统的哈密顿量H描述了量子比特间的相互作用…

HarmonyOS学习第12天:解锁表格布局的奥秘

表格布局初相识 不知不觉&#xff0c;我们在 HarmonyOS 的学习旅程中已经走到了第 12 天。在之前的学习里&#xff0c;我们逐步掌握了 HarmonyOS 开发的各种基础与核心技能&#xff0c;比如组件的基本使用、布局的初步搭建等&#xff0c;这些知识就像一块块基石&#xff0c;为我…

《Python实战进阶》No 11:微服务架构设计与 Python 实现

第11集&#xff1a;微服务架构设计与 Python 实现 2025年3月3日更新了代码和微服务运行后的系统返回信息截图&#xff0c;所有代码在 python3.11.5虚拟环境下运行通过。 微服务架构通过将复杂应用拆分为独立部署的小型服务&#xff0c;显著提升了系统的可扩展性和维护性。本集…

Android15 Camera HAL Android.bp中引用Android.mk编译的libB.so

背景描述 Android15 Camera HAL使用Android.bp脚本来构建系统。假设Camera HAL中引用了另外一个HAL实现的so &#xff08;例如VPU HAL&#xff09;&#xff0c; 恰巧被引用的这个VPU HAL so是用Android.mk构建的&#xff0c;那Camera HAL Android.bp在直接引用这个Android.mk编…

P8720 [蓝桥杯 2020 省 B2] 平面切分--set、pair

P8720 [蓝桥杯 2020 省 B2] 平面切分--set、pair 题目 分析一、pair1.1pair与vector的区别1.2 两者使用场景两者组合使用 二、set2.1核心特点2.2set的基本操作2.3 set vs unordered_set示例&#xff1a;统计唯一单词数代码 题目 分析 大佬写的很明白&#xff0c;看这儿 我讲讲…

postgresql源码学习(60)—— VFD的作用及机制

首先VFD是Virtual File Descriptor&#xff0c;即虚拟文件描述符&#xff0c;既然是虚拟的&#xff0c;一定先有物理的。 一、 物理文件描述符&#xff08;File Descriptor, FD&#xff09; 1. 什么是 FD 它是操作系统提供给用户程序访问和操作文件或其他 I/O 资源的抽象接口…

【CSS—前端快速入门】CSS 选择器

CSS 1. CSS介绍 1.1 什么是CSS? CSS(Cascading Style Sheet)&#xff0c;层叠样式表&#xff0c;用于控制页面的样式&#xff1b; CSS 能够对网页中元素位置的排版进行像素级精确控制&#xff0c;实现美化页面的效果&#xff1b;能够做到页面的样式和 结构分离&#xff1b; 1…

Linux安装jdk,node,mysql,redis

准备工作&#xff1a; 1.安装VMware软件&#xff0c;下载CentOs7镜像文件&#xff0c;在VMware安装CentOs7 2.宿主机安装Xshell用来操作linux 3. .宿主机安装Xftp用来在宿主机和虚拟机的linux传输文件 案例1&#xff1a;在 /home/soft文件夹解压缩jdk17&#xff0c;并配置环…

深度求索(DeepSeek)的AI革命:NLP、CV与智能应用的技术跃迁

Deepseek官网&#xff1a;DeepSeek 引言&#xff1a;AI技术浪潮中的深度求索 近年来&#xff0c;人工智能技术以指数级速度重塑全球产业格局。在这场技术革命中&#xff0c;深度求索&#xff08;DeepSeek&#xff09;凭借其前沿的算法研究、高效的工程化能力以及对垂直场景的…

Minio搭建并在SpringBoot中使用完成用户头像的上传

Minio使用搭建并上传用户头像到服务器操作,学习笔记 Minio介绍 minio官网 MinIO是一个开源的分布式对象存储服务器&#xff0c;支持S3协议并且可以在多节点上实现数据的高可用和容错。它采用Go语言开发&#xff0c;拥有轻量级、高性能、易部署等特点&#xff0c;并且可以自由…

阿里云 | 快速在网站上增加一个AI助手

创建智能体应用 如上所示&#xff0c;登录阿里云百炼人工智能业务控制台&#xff0c;创建智能体应用&#xff0c;智能体应用是一个agent&#xff0c;即提供个人或者企业的代理或中间件组件应用&#xff0c;对接阿里云大模型公共平台&#xff0c;为个人或者企业用户提供大模型应…

原型链与继承

#搞懂还是得自己动手# 原型链 function Person(name) { this.name name; } Person.prototype.sayName function() { console.log(this.name); };const p new Person("Alice"); 原型链关系图&#xff1a; 原型链&#xff1a;person->Person.prototype->O…

动态规划 ─── 算法5

动态规划&#xff08;Dynamic Programming&#xff0c;简称 DP&#xff09;是一种用于解决复杂问题的算法设计技术&#xff0c;特别适用于具有重叠子问题和最优子结构性质的问题。动态规划通过将问题分解为更小的子问题&#xff0c;并存储子问题的解来避免重复计算&#xff0c;…

博客系统--测试报告

博客系统--测试报告 项目背景项目功能功能测试①登录功能测试②发布博客功能测试③删除文章功能测试④功能测试总结&#xff1a; 自动化测试自动化脚本执行界面&#xff1a; 性能测试 本博文主要针对个人实现的项目《博客系统》去进行功能测试、自动化测试、性能测试&#xff0…

【博资考4】网安学院-硕转博考试内容

【博资考4】硕转博考试内容 - 网络安全与基础理论 写在最前面一. **21年硕转博面试内容回顾**网络、逆向、操作系统、攻防、漏洞1. **网络安全常见攻击方式及其防范措施**1.1 **DDoS攻击&#xff08;分布式拒绝服务&#xff09;**1.2 **SQL注入攻击**1.3 **XSS攻击&#xff08;…

GPT-4.5 怎么样?如何升级使用ChatGPTPlus/Pro? GPT-4.5设计目标是成为一款非推理型模型的巅峰之作

GPT-4.5 怎么样&#xff1f;如何升级使用ChatGPTPlus/Pro? GPT-4.5设计目标是成为一款非推理型模型的巅峰之作 今天我们来说说上午发布的GPT-4.5&#xff0c;接下来我们说说GPT4.5到底如何&#xff0c;有哪些功能&#xff1f;有哪些性能提升&#xff1f;怎么快速使用到GPT-4.…

基于专利合作地址匹配的数据构建区域协同矩阵

文章目录 地区地址提取完成的处理代码 在专利合作申请表中&#xff0c;有多家公司合作申请。在专利权人地址中&#xff0c; 有多个公司的地址信息。故想利用这里多个地址。想用这里的地址来代表区域之间的专利合作情况代表区域之间的协同、协作情况。 下图是专利合作表的一部分…