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对象

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue3中ref与reactive的详解与扩展

    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组合API中setup、 ref、reactive的使用大全

    vue3组合API中setup、 ref、reactive的使用大全

    1.初识setUp的使用 简单介绍下面的代码功能: 使用ref函数,去使用监听某一个变量的变化,并且把它渲染到视图上. setUp函数是组合API的入口函数.这个是非常重要的. setUp可以去监听变量的变化哈!我们将会利用它 ref 在vue中内置,需要导入. <template> <div>{{ countNum}}</div> <button @click="handerFunc">按钮</button> </te

  • 详解vue3中setUp和reactive函数的用法

    详解vue3中setUp和reactive函数的用法

    1 setUp的执行时机 我们都知道,现在vue3是可以正常去使用methods的. 但是我们却不可以在setUp中去调用methods中的方法. 为什么了??? 我们先了解一下下面这两个生命周期函数,分别是: beforeCreate 表示data 中的数据还没有初始化,是不可以使用的 Created : data已经被初始化了,可以使用 setUp在beforeCreate 和 Created 这两个函数之间. 是不是就知道为啥setUp中不可以去调用methods中的方法了. 2.setU

  • vue3 关于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的解决方法

    Vue3刷新页面报错404的解决方法

    vue-router历史模式 最近在学习Vue3的过程中遇到了一个问题,那就是在写代码的过程中,每当代码发生了变动,页面一刷新,原先的页面就会变成这个样子: 打开控制台一看: 这时候刷新.在浏览器地址栏直接输入地址也不管用. 每次写一点代码,都不能及时看到结果,需要从8080重新进入才可以,其中的崩溃可想而知. 此时判断应该是路由跳转的问题,于是来到router.js文件看一看: import { createRouter, createWebHistory } from 'vue-router

  • 对Vue3中reactive的深入理解

    对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函数使用场景

    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数据被重新赋值后无法双向绑定的解决

    vue3中reactive数据被重新赋值后无法双向绑定的解决

    目录 reactive数据被重新赋值后无法双向绑定 推荐写法 vue3数据的双向绑定 一.script setup 二.ref() 函数 三.reactive()函数 reactive数据被重新赋值后无法双向绑定 这是因为reactive数据被重新赋值后,原来数据的代理函数和最新的代理函数不是同一个,无法被触发 推荐写法 import {reactive, toRefs} from 'vue' setup(props, context) { const state = reactive({ my

随机推荐