vue3?關于reactive的重置問題及解決
更新時間：2022年05月27日 08:36:17 作者：ViFong
這篇文章主要介紹了vue3?關于reactive的重置問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
關于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)響應式數(shù)據(jù)的方法.
- 在Vue2中響應式數(shù)據(jù)是通過defineProperty來實現(xiàn)的.
- 而在Vue3響應式數(shù)據(jù)是通過ES6的Proxy來實現(xiàn)的
2.reactive注意點
- reactive參數(shù)必須是對象(json/arr)
- 如果給reactive傳遞了其他對象,默認情況下修改對象,界面不會自動更新,如果想更新,可以通過重新賦值的方式.
錯誤示范
當傳遞的是非對象時,頁面不會發(fā)生響應
正確實例
arr正確實例
傳入數(shù)組會轉(zhuǎn)成proxy對象
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue使用keep-alive保持滾動條位置的實現(xiàn)方法
這篇文章主要介紹了vue使用keep-alive保持滾動條位置的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了Vue3中如何檢測數(shù)組的變化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
下面小編就為大家?guī)硪黄獀ue中實現(xiàn)滾動加載更多的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了Vue SPA單頁應用首屏優(yōu)化實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了vue?3.0?vue.config.js文件常用配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue Treeselect 樹形下拉框:獲取選中節(jié)點的ids和lables操作
這篇文章主要介紹了vue Treeselect 樹形下拉框:獲取選中節(jié)點的ids和lables操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue中在setup下如何使用自定義指令，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue3使用echarts tree高度自適應支持滾動查看功能
這篇文章主要介紹了Vue3使用echarts tree高度自適應支持滾動查看功能,文章同通過代碼示例介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-06-06
vue將秒數(shù)轉(zhuǎn)成"時分秒"格式實例代碼
在項目中,請求后臺接口返回的值是秒,這篇文章主要給大家介紹了關于vue將秒數(shù)轉(zhuǎn)成"時分秒"格式的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
vue-cli項目代理proxyTable配置exclude的方法
今天小編就為大家分享一篇vue-cli項目代理proxyTable配置exclude的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09