vue3?關(guān)于reactive的重置問題及解決

更新時間：2022年05月27日 08:36:17 作者：ViFong

這篇文章主要介紹了vue3?關(guān)于reactive的重置問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

關(guān)于reactive的重置問題

在vue3的reactive的使用, 有時候需要對里面的數(shù)據(jù)進行清空處理, 下面推薦一個方法

假如有一個info的reactive的數(shù)據(jù)

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中提供實現(xiàn)響應(yīng)式數(shù)據(jù)的方法.
在Vue2中響應(yīng)式數(shù)據(jù)是通過defineProperty來實現(xiàn)的.
而在Vue3響應(yīng)式數(shù)據(jù)是通過ES6的Proxy來實現(xiàn)的

2.reactive注意點

reactive參數(shù)必須是對象(json/arr)
如果給reactive傳遞了其他對象,默認(rèn)情況下修改對象,界面不會自動更新,如果想更新,可以通過重新賦值的方式.

錯誤示范

當(dāng)傳遞的是非對象時,頁面不會發(fā)生響應(yīng)

在這里插入圖片描述

正確實例

在這里插入圖片描述

arr正確實例

傳入數(shù)組會轉(zhuǎn)成proxy對象

在這里插入圖片描述

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue使用keep-alive保持滾動條位置的實現(xiàn)方法
這篇文章主要介紹了vue使用keep-alive保持滾動條位置的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue3中如何檢測數(shù)組的變化方式
這篇文章主要介紹了Vue3中如何檢測數(shù)組的變化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
vue中實現(xiàn)滾動加載更多的示例
下面小編就為大家?guī)硪黄獀ue中實現(xiàn)滾動加載更多的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
Vue SPA單頁應(yīng)用首屏優(yōu)化實踐
這篇文章主要介紹了Vue SPA單頁應(yīng)用首屏優(yōu)化實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
vue?3.0?vue.config.js文件常用配置方式
這篇文章主要介紹了vue?3.0?vue.config.js文件常用配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue Treeselect 樹形下拉框:獲取選中節(jié)點的ids和lables操作
這篇文章主要介紹了vue Treeselect 樹形下拉框:獲取選中節(jié)點的ids和lables操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue中在setup下如何使用自定義指令
這篇文章主要介紹了Vue中在setup下如何使用自定義指令，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue3使用echarts tree高度自適應(yīng)支持滾動查看功能
這篇文章主要介紹了Vue3使用echarts tree高度自適應(yīng)支持滾動查看功能,文章同通過代碼示例介紹的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下
2024-06-06
vue將秒數(shù)轉(zhuǎn)成"時分秒"格式實例代碼
在項目中,請求后臺接口返回的值是秒,這篇文章主要給大家介紹了關(guān)于vue將秒數(shù)轉(zhuǎn)成"時分秒"格式的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
vue-cli項目代理proxyTable配置exclude的方法
今天小編就為大家分享一篇vue-cli項目代理proxyTable配置exclude的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09