vue3 关于reactive的重置问题及解决
更新时间：2022年05月27日 08:36:17 作者：ViFong
这篇文章主要介绍了vue3 关于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对象
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue使用keep-alive保持滚动条位置的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了Vue3中如何检测数组的变化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
下面小编就为大家带来一篇vue中实现滚动加载更多的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了Vue SPA单页应用首屏优化实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了vue 3.0 vue.config.js文件常用配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
这篇文章主要介绍了vue Treeselect 树形下拉框:获取选中节点的ids和lables操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Vue中在setup下如何使用自定义指令，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
Vue3使用echarts tree高度自适应支持滚动查看功能
这篇文章主要介绍了Vue3使用echarts tree高度自适应支持滚动查看功能,文章同通过代码示例介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-06-06
在项目中,请求后台接口返回的值是秒,这篇文章主要给大家介绍了关于vue将秒数转成"时分秒"格式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
vue-cli项目代理proxyTable配置exclude的方法
今天小编就为大家分享一篇vue-cli项目代理proxyTable配置exclude的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论