Vue3:响应式数据的基本使用(ref、reactive)

一、前言

  • 在Vue3中,如果数据不是响应式数据,当数据的值发生改变时,页面上的数据是不会发生改变的。
  • 因此本文主要介绍Vue3中响应式数据的使用,包括ref和reactive的基本使用。

二、ref

1、ref ------ 创建基本类型的响应式数据
  • ref 可以定义基本类型的响应式变量
  • 语法 :
javascript 复制代码
let xxx=ref(初始值)
  • 返回值:
    是一个RefImpl的实例对象,简称ref对象或ref,ref对象中的value属性是响应式的。
  • 其他:
    在JS中操作数据需要使用 "xxx.value"的形式,但在模板中不需要用. value,直接使用即可。
(1)引入ref
javascript 复制代码
import {ref} from ' vue '
(2)代码
  • 代码解析
  • 完整代码
javascript 复制代码
<template>
  <p>个人信息:</p>
  <p>性别:{{ gender }}</p>
  <p>年龄:{{ age }}</p>
  <button @click="ageChange">点击年龄加1</button>
</template>

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

// 数据
let gender = ref("女");
let age = ref(25);

// 方法
function ageChange() {
  age.value += 1;
}
</script>
  • 结果:

  • 点击按钮,响应式数据会在页面上发生变化:

2、ref ------ 创建对象类型的响应式数据

ref也可以创建对象类型的响应式数据。

(1)代码解析
  • ref可以定义以下类型的数据:
  • 修改ref的数据时记得.value的使用以及使用顺序:

  • 在模板中,不需要使用.value

(2)完整代码
javascript 复制代码
<template>
  <p>小明的年龄是:{{ info.age }} 岁</p>
  <p>小明的身高是:{{ info.height }} cm</p>
  <button @click="ageChange">点击年龄加1</button>
  <button @click="heightChange">点击身高加1</button>

  <br />
  <h2>星座列表:</h2>
  <ul>
    <li v-for="item in Constellation" :key="item.id">{{ item.star }}</li>
  </ul>
  <button @click="ConstellationChange">点击修改第二个星座名称</button>
</template>
    
<script setup>
import { ref } from "vue";

// 数据
let info = ref({
  age: 20,
  height: 165,
});
let Constellation = ref([
  { id: 1, star: "双子座" },
  { id: 2, star: "狮子座" },
  { id: 3, star: "巨蟹座" },
]);

// 方法
function ageChange() {
  info.value.age += 1;
}
function heightChange() {
  info.value.height += 1;
}
function ConstellationChange() {
  Constellation.value[1].star = "处女座";
}
</script>  

三、reactive

1、概念

reactive只能定义对象类型的响应式数据,例如:

  • 数据1:
javascript 复制代码
let info = reactive({
  age: 20,
  height: 165,
});
  • 数据2:
javascript 复制代码
let Constellation = reactive([
  { id: 1, star: "双子座" },
  { id: 2, star: "狮子座" },
  { id: 3, star: "巨蟹座" },
]);
  • 而以下代码是错误的(reactive不能定义基本类型的数据):
javascript 复制代码
let name=reactive("张三")
2、代码
javascript 复制代码
<template>
  <p>小明的年龄是:{{ info.age }} 岁</p>
  <p>小明的身高是:{{ info.height }} cm</p>
  <button @click="ageChange">点击年龄加1</button>
  <button @click="heightChange">点击身高加1</button>

  <br />
  <h2>星座列表:</h2>
  <ul>
    <li v-for="item in Constellation" :key="item.id">{{ item.star }}</li>
  </ul>
</template>
  
<script setup>
import { reactive } from "vue";

// 数据
let info = reactive({
  age: 20,
  height: 165,
});
let Constellation = reactive([
  { id: 1, star: "双子座" },
  { id: 2, star: "狮子座" },
  { id: 3, star: "巨蟹座" },
]);

// 方法
function ageChange() {
  info.age += 1;
}
function heightChange() {
  info.height += 1;
}
</script>
  • 结果:

  • 点击按钮,响应式数据会在页面上发生变化:

3、注意事项
  • reactive重新分配一个新对象, 会失去响应式;可以使用object . assign去整体替换,举例:

原本有数据如下:

javascript 复制代码
// 数据
let info = reactive({
  age: 20,
  height: 165,
});

点击按钮对整体数据进行修改:

javascript 复制代码
function infoChange() {
  info={
  age: 30,
  height: 185,
}
}

但是这样修改数据之后,点击按钮数据并不会修改:

而使用object . assign可以让页面的数据进行更新:

javascript 复制代码
function infoChange() {
  Object.assign(info, {
    age: 30,
    height: 185,
  });
}

结果如下:

四、总结

  • ref可以定义基本类型 数据、对象类型 数据;reactive只能定义对象类型数据
  • 若需要一个响应式对象,层级不深,ref 、reactive 都可以
  • 若需要一个响应式对象,且层级较深 ,推荐使用reactive
相关推荐
鼠鼠我捏,要死了捏12 小时前
Spring WebFlux 性能优化实践指南
reactive·performance-optimization·spring-webflux
har01d4 天前
【CSS3】录音中。。。
前端·css·vue.js·vue·vue3·css3
知识分享小能手4 天前
Vue3 学习教程,从入门到精通,Vue 3 + Tailwind CSS 全面知识点与案例详解(31)
前端·javascript·css·vue.js·学习·typescript·vue3
青柠代码录13 天前
【ElementPlus】深入探索ElementPlus:前端界面的全能组件库
前端·vue3·elementplus
知识分享小能手15 天前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3
咔咔一顿操作15 天前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
汪叽家的兔子羡17 天前
vue模块化导入
前端·javascript·vue.js·typescript·vue3·vue2·vite
鼠鼠我捏,要死了捏17 天前
基于Spring WebFlux的高并发响应式系统性能优化实践指南
性能优化·reactive·spring webflux
朝阳3919 天前
vue3【组件封装】超级表单 S-form.vue
vue3·组件封装
清岚_lxn24 天前
vue3 antd modal对话框里的前端html导出成pdf并下载
pdf·vue3·html2canvas·jspdf