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
随机推荐
- 详解基于angular路由的requireJs按需加载js
- validator验证控件使用代码
- 用JAVA 设计生成二维码详细教程
- java异常处理详细介绍及实例
- python字典get()方法用法分析
- 在asp.net(c#)下实现调用cmd的方法
- asp.net调用飞信免费发短信(测试有效)
- JavaScript 异步调用框架 (Part 6 - 实例 & 模式)
- js微信应用场景之微信音乐相册案例分享
- 用JavaScript实现字符串切分功能
- Thinkphp实现MySQL读写分离操作示例
- PHP – EasyUI DataGrid 资料存的方式介绍
- 深入讲解Python编程中的字符串
- 忠网广告 系统 用到的几个函数
- C语言排序算法之冒泡排序实现方法【改进版】
- Android如何在Gradle中更改APK文件名详解
- JS 判断undefined的实现代码
- Ajax + PHP session制作购物车
- WMLScript脚本程序设计第1/9页
- PowerShell中使用Get-Alias命令获取cmdlet别名例子