vue3 ref 和 reactive 区别
前言
最近学习cloud项目,前端使用到 vue3 + ts 等技术,在写需求过程中遇到响应式数据问题,经百度查找相关笔记,在此记录一下,在实战中成长吧。
问题
出现的问题:定义一个默认数组并且 for 循环展示,后端返回数据并且赋值到数组中,但是展示的值并不会修改
<template><el-card class="layout-home"><div style="display: flex; margin-top: 20px; height: 100px;"><div v-for="(item,index) in array" :key="index" :index="item.name" ><transition name="el-fade-in-linear"><div class="transition-box"><h3>{{item.name}}</h3><p>{{item.num}}</p></div></transition></div></div></el-card>
</template>
<script lang="ts" setup>
import {initialization} from '@/api/sys/home'
let array = [{name: '卡密登录次数',num: 0},{name: '卡密使用个数',num: 0},{name: '短连接生成次数',num: 0},{name: '系统登录次数',num: 0}
]
initialization().then(res => {if (res != null && res.data) {const obj = res.dataarray[0].num = obj.secretKeyLoginNumarray[1].num = obj.secretKeyNumarray[2].num = obj.shortLinkNumarray[3].num = obj.sysLoginNumconsole.log('1111',array);}
})
</script>
原因
原因:在 js 中定义的 array 数组只是普通常量,并不是 响应式数组,它不会自动更新视图。
解决方案
方案:使用 vue3 提供的 reactive 和 ref 方法,来定义响应式数据。
import { reactive, ref } from 'vue'
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import {initialization} from '@/api/sys/home'
const array = reactive([{name: '卡密登录次数',num: 0},{name: '卡密使用个数',num: 0},{name: '短连接生成次数',num: 0},{name: '系统登录次数',num: 0}
])
initialization().then(res => {if (res != null && res.data) {const obj = res.dataarray[0].num = obj.secretKeyLoginNumarray[1].num = obj.secretKeyNumarray[2].num = obj.shortLinkNumarray[3].num = obj.sysLoginNumconsole.log('1111',array);}
})
</script>
ref
- ref允许创建一个任意类型的响应式的ref对象,在使用时需要带上 .value
- 在模板中使用 ref 对象时,若 ref 位于顶层,不需要使用value,它会自动解包,但 ref 对象是作为一个属性声明于对象之中,在模板中进行运算时依然要使用 .value
reactive
- 通常使用 reactive() 来创建一个响应式的对象或数组,这样的对象或数组状态都是默认深层响应式
- reactive() 只会对象类型有效,对基本数据类型无效,并且假如用一个新对象替换了原来的旧对象,那么原来的旧对象会失去响应性
ref 和 reactive 区别
ref 和 reactive 都是用来定义响应式数据的。
- ref 多用来定义基本数据类型(也可以定义对象,内部会自动通过reactive转为代理对象),而 reactive 只能用来定义对象数组类型
- ref 操作数据需要 .value ,reactive 操作数据不需要 .value
vue3 ref 和 reactive 区别相关推荐
- vue3 - ref和reactive的区别
文章搬运自wx60d4764eb475e 的vue3中ref和reactive的区别(系列六) 1. ref和reactive区别: 如果在template里使用的是ref类型的数据, 那么V ...
- vue3 ref,reactive请求后的赋值问题以及解决方法
vue3 ref,reactive请求后的赋值问题以及解决方法 开发的过程中,我们一定会进行接口的对接,将响应的结果赋值给我们页面上需要展示或者操作的变量,在vue3中,我们可能会稍微的有点不适应 ...
- vue3 ref 和reactive的区别
文章目录 Ref reactive 源码分析视频 点击进入 Ref ref数据响应式监听.ref 函数传入一个值作为参数,一般传入基本数据类型,返回一个基于该值的响应式Ref对象,该对象中的值一旦被改 ...
- 19.0 vue3 ref,reactive请求后的赋值问题以及解决方法
上一篇: 18.0 vue3 Vue Router的使用(1)_十一月的萧邦-CSDN博客 开发的过程中,我们一定会进行接口的对接,将响应的结果赋值给我们页面上需要展示或者操作的变量,在vue3中,我 ...
- ref和reactive区别
ref是什么类型变量都可以定义,而reactive只能定义数组和对象 比如 ref定义字符串 //定义 const msg=ref("hellow world");// //事件调 ...
- vue3 ref及reactive响应式原理案例 语法糖/非语法糖
非语法糖: <template> <h1>博主的信息</h1> <h2>姓名:{{name}}</h2> <h2>年龄:{{ag ...
- vue3.0语法糖及ref、reactive、toRef、toRefs的区别
vue3.0语法糖 前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. 1.什么是setup语法糖 起初 ...
- Vue3 初探 ref、reactive 、及改变数组的值
概况 Vue3 里要实现数据的响应式监听一共有两种方式既:ref 和 reactive 他们既有区别又有联系. ref() ref数据响应式监听.ref 函数传入一个值作为参数,一般传入基本数据类型, ...
- vue3之实现响应式数据ref和reactive
用途 ref.reactive都是vue3提供实现响应式数据的方法 ref() 接受一个内部值,返回一个响应式的.可更改的ref对象,此对象只有一个指向其内部的属性.value ref可以说是简化版的 ...
最新文章
- 2017年中国自动驾驶最全产业研究报告 99页
- Android中使用running services查看service进程内存
- MYSQL 取中位数
- MPLS TE基本配置-OSPF
- 经典C语言程序100例之六
- Android OpenGL ES(十)绘制三角形Triangle .
- 使用常识 | 如何在word中添加勾选框
- puppet 3+Unicorn+Nginx安装配置
- 华为交换机的端口hybrid端口属性配置
- LaTeX tikz初探——基本图形绘制(1)
- AST解析基础: 如何写一个简单的html语法分析库
- hibernate第一天
- GGally与pairs相关关系图_史上最全(二)
- 计算机关闭提示音,即将发布:如何关闭Apple计算机启动提示音
- 1620:质因数分解
- FreeType字体程序库介绍(转)
- 【游戏逆向】浅谈某平台调试软件检测分析
- 2016年高中计算机考试模拟试题,2016年计算机二级考试模拟试题及答案
- 广州软博前端实习生面经
- OKR考核体系使用的分析