快捷導(dǎo)航

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

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

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

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

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

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

2.reactive注意點(diǎn)

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

錯(cuò)誤示范

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

在這里插入圖片描述

正確實(shí)例

在這里插入圖片描述

arr正確實(shí)例

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

在這里插入圖片描述

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

您可能感興趣的文章:

相關(guān)文章

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