vue3 关于reactive的重置问题及解决
目录
- 关于reactive的重置问题
- 理解vue3中的reactive
- 1.什么是reactive?
- 2.reactive注意点
关于reactive的重置问题
在vue3的reactive的使用, 有时候需要对里面的数据进行清空处理, 下面推荐一个方法
假如有一个info的reactive的数据
const info = reactive<{ name: string; age: string; gender: string }>({ name: "1", age: "2", gender: "3", });
重置方法
const clear = () => { const keys = Object.keys(info); let obj: { [name: string]: string } = {}; keys.forEach((item) => { obj[item] = ""; }); Object.assign(info, obj); };
理解vue3中的reactive
1.什么是reactive?
- reactive是Vue3中提供实现响应式数据的方法.
- 在Vue2中响应式数据是通过defineProperty来实现的.
- 而在Vue3响应式数据是通过ES6的Proxy来实现的
2.reactive注意点
- reactive参数必须是对象(json/arr)
- 如果给reactive传递了其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值的方式.
错误示范
当传递的是非对象时,页面不会发生响应
正确实例
arr正确实例
传入数组会转成proxy对象
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
详解vue3中setUp和reactive函数的用法
1 setUp的执行时机 我们都知道,现在vue3是可以正常去使用methods的. 但是我们却不可以在setUp中去调用methods中的方法. 为什么了??? 我们先了解一下下面这两个生命周期函数,分别是: beforeCreate 表示data 中的数据还没有初始化,是不可以使用的 Created : data已经被初始化了,可以使用 setUp在beforeCreate 和 Created 这两个函数之间. 是不是就知道为啥setUp中不可以去调用methods中的方法了. 2.setU
-
vue3组合API中setup、 ref、reactive的使用大全
1.初识setUp的使用 简单介绍下面的代码功能: 使用ref函数,去使用监听某一个变量的变化,并且把它渲染到视图上. setUp函数是组合API的入口函数.这个是非常重要的. setUp可以去监听变量的变化哈!我们将会利用它 ref 在vue中内置,需要导入. <template> <div>{{ countNum}}</div> <button @click="handerFunc">按钮</button> </te
-
Vue3中ref与reactive的详解与扩展
一.ref和reactive 死死记住:ref本质也是reactive,ref(obj)等价于reactive({value: obj}) vue3中实现响应式数据的方法是就是使用ref和reactive,所谓响应式就是界面和数据同步,能实现实时更新 vue2中响应式是通过defineProperty实现的,vue3中是通过ES6的Proxy来实现的 1.reactive reactive的参数必须是一个对象,包括json数据和数组都可以,否则不具有响应式 如果给reactive传递了其他对象(
-
vue3 关于reactive的重置问题及解决
目录 关于reactive的重置问题 理解vue3中的reactive 1.什么是reactive? 2.reactive注意点 关于reactive的重置问题 在vue3的reactive的使用, 有时候需要对里面的数据进行清空处理, 下面推荐一个方法 假如有一个info的reactive的数据 const info = reactive<{ name: string; age: string; gender: string }>({ name: "1", age
-
Vue3+vant+ts 上滑加载解决上滑调用多次数据的问题(推荐)
之前用vue2的时候,写过vue2的用法,文末扩展知识点击查看,用得挺好的,也没啥问题,照葫芦画瓢的做出来了,但是有问题,下滑之后调用多次数据,按理说 组件通过 loading 和 finished 这俩变量控制加载状态,当组件滚动到底部时,会触发 load 事件并将 loading 设置成 true.此时可以发起异步操作并更新数据,数据更新完毕后,将 loading 设置成 false 即可.若数据已全部加载完毕,则直接将 finished 设置成 true 即可. 但是我打印了一下,在调用方
-
vue3使用reactive包裹数组正确赋值问题
目录 使用reactive包裹数组正确赋值 提供几种办法 vue3的reactive重新赋值无效 vue3官方的文档说明 总结 使用reactive包裹数组正确赋值 需求:将接口请求到的列表数据赋值给响应数据arr const arr = reactive([]); const load = () => { const res = [2, 3, 4, 5]; //假设请求接口返回的数据 // 方法1 失败,直接赋值丢失了响应性 // arr = res; // 方法2 这样也是失败 // arr
-
Vue3中reactive函数toRef函数ref函数简介
目录 reactive函数 用法: toRef函数(了解即可) 用法: ref函数 定义响应式数据 直接定义使用 获取dom 获取组件实例对象 reactive函数 reactive用于定义响应式数据(可以理解 成data的替代品) 用法: 导入 import {reactive} from 'vue' 使用: const state=reactive({ 参数名:参数值 }) 访问: state.参数名 访问: state.参数名 toRef函数(了解即可) toRef:将响应式数据中某个字段
-
Vue3刷新页面报错404的解决方法
vue-router历史模式 最近在学习Vue3的过程中遇到了一个问题,那就是在写代码的过程中,每当代码发生了变动,页面一刷新,原先的页面就会变成这个样子: 打开控制台一看: 这时候刷新.在浏览器地址栏直接输入地址也不管用. 每次写一点代码,都不能及时看到结果,需要从8080重新进入才可以,其中的崩溃可想而知. 此时判断应该是路由跳转的问题,于是来到router.js文件看一看: import { createRouter, createWebHistory } from 'vue-router
-
对Vue3中reactive的深入理解
目录 Vue3 reactive的理解 1.什么是reactive? 2.reactive注意点 Vue3笔记 reactive函数 Vue3 reactive的理解 1.什么是reactive? reactive是Vue3中提供实现响应式数据的方法. 在Vue2中响应式数据是通过defineProperty来实现的. 而在Vue3响应式数据是通过ES6的Proxy来实现的 2.reactive注意点 reactive参数必须是对象(json/arr) 如果给reactive传递了其他对象,默认
-
Vue3中reactive与ref函数使用场景
目录 前言 简单了解 ref & reactive reactive ref reactive 能做的 ref 也能做,并且还是用 reactive 做的 ref 能做,但是 reactive 不能做 总结 前言 如果你使用过 Vue3,你知道的,在 Vue3 中有两个非常常用的响应式 API:reactive 和 ref.它们会把我们想要追踪的数据变成响应式. 而且我们在使用时一直被告知 ref 用于创建基础类型的响应式,也可以创建引用类型的响应式.而对于引用类型,底层也是转换为 reacti
-
vue3.2 reactive函数问题小结
reactive函数 上篇文章给大家介绍了Vue中的reactive函数操作代码,需要的朋友点击查看. reactive用来包装一个对象,使其每个对象属性都具有响应性(也就是深层次响应式). 语法:const 代理对象= reactive(源对象) . 接收一个对象(或数组),返回一个代理对象(简称proxy对象). 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作. 注意点1: 问题:reactive函数使用基本类型数据会报警告 注意点2: 总结:基础类型数据推荐
-
vue3.0 Reactive数据更新页面没有刷新的问题
目录 vue3.0 Reactive数据更新页面没有刷新 vue3.0中的reactive用法 在 reactive 使用基本类型参数 响应式代理 vs. 原始对象 总结 vue3.0 Reactive数据更新页面没有刷新 vue 3.0 ref 和 Reactive 数据响应式,以及使用 Reactive 数据已更新但页面没有同步刷新异常 Vue 3.0 中我们使用 reactive() 定义的响应式数据的时候,当我们对象再次赋值,我们发现数据已经修改成功,但是页⾯并没有自动渲染成最新的数据:
-
vue3中reactive数据被重新赋值后无法双向绑定的解决
目录 reactive数据被重新赋值后无法双向绑定 推荐写法 vue3数据的双向绑定 一.script setup 二.ref() 函数 三.reactive()函数 reactive数据被重新赋值后无法双向绑定 这是因为reactive数据被重新赋值后,原来数据的代理函数和最新的代理函数不是同一个,无法被触发 推荐写法 import {reactive, toRefs} from 'vue' setup(props, context) { const state = reactive({ my
随机推荐
- Prototype使用指南之base.js
- Mac环境下搭建svn环境和使用方法
- 深入学习C语言中的函数指针和左右法则
- Python greenlet实现原理和使用示例
- iOS scrollview实现三屏复用循环广告
- 详解javascript中对数据格式化的思考
- Android控件Gallery3D效果实例代码
- PHP开发微信支付的代码分享
- Android View移动的3种方式总结
- Node.js 异步编程之 Callback介绍(一)
- SQL学习笔记五去重,给新加字段赋值的方法
- Jquery阻止事件冒泡 event.stopPropagation
- Java 泛型有哪些好处详解
- 关于9行代码导致系统崩溃的分析整理
- Linux 平台上比较好的C/C++ IDE 清单
- ThreadPoolExecutor线程池原理及其execute方法(详解)
- spring cloud 之 Feign 使用HTTP请求远程服务的实现方法
- JAVA中的deflate压缩实现方法
- 全文搜索和替换
- SOHO的无线组网2