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
相关推荐
昔冰_G3 天前
Vue内置组件KeepAlive——缓存组件实例
vue.js·缓存·vue3·vue2·keep-alive·vue组件缓存·vue内置组件
wxr06165 天前
部署Spring Boot项目+mysql并允许前端本地访问的步骤
前端·javascript·vue.js·阿里云·vue3·springboot
知识分享小能手6 天前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3
上单带刀不带妹12 天前
Vue3 全局 API 转移详解
前端·javascript·vue.js·vue3·api
雪山上的小灰熊14 天前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks
路光.17 天前
统一配置管理根据不同域名展现不同信息或相近信息 Vue3类单例模式封装
前端·单例模式·typescript·vue3
Wiktok1 个月前
【pure-admin】pureadmin的登录对接后端
vue3·pureadmin
Wiktok1 个月前
【Wit】pure-admin后台管理系统前端与FastAPI后端联调通信实例
前端·vue3·pureadmin
Wiktok1 个月前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
知识分享小能手1 个月前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3