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傳遞了其他對象,默認情況下修改對象,界面不會自動更新,如果想更新,可以通過重新賦值的方式.
錯誤示范
當傳遞的是非對象時,頁面不會發(fā)生響應
正確實例
arr正確實例
傳入數組會轉成proxy對象
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了element?表格多級表頭子列固定的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
vue?demi支持sfc方式的vue2vue3通用庫開發(fā)詳解
這篇文章主要為大家介紹了vue?demi支持sfc方式的vue2vue3通用庫開發(fā)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
vue中報錯Duplicate?keys?detected:'1'.?This?may?c
我們在vue開發(fā)過程中常會遇到一些錯誤,這篇文章主要給大家介紹了關于vue中報錯Duplicate?keys?detected:‘1‘.?This?may?cause?an?update?error的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
本篇文章主要介紹了用Vue.extend構建消息提示組件的方法實例，具有一定的參考價值，有興趣的可以了解一下2017-08-08
vue項目引入百度地圖BMapGL鼠標繪制和BMap輔助工具
這篇文章主要為大家介紹了vue項目引入百度地圖BMapGL鼠標繪制和BMap輔助工具的踩坑分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要為大家詳細介紹了vue+elementUI組件table實現前端分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
Vue3.0監(jiān)聽器watch與watchEffect詳解
在 Vue 3 中,watch 仍然是一種用于監(jiān)聽數據變化并執(zhí)行相應操作的方式,不過在組合式 API 中,watch 的使用方式與選項式 API 略有不同,這篇文章主要介紹了Vue3.0監(jiān)聽器watch與watchEffect,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue后臺管理如何配置動態(tài)路由菜單，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue?插槽?(Slots)?源碼解析與用法,通過實例,我們全面了解了默認插槽、具名插槽和作用域插槽的用法,并深入理解了其在Vue源碼中的實現原理,需要的朋友可以參考下2024-01-01
關于vue.extend和vue.component的區(qū)別淺析
最近工作中遇到了vue.extend,vue.component，但二者之間的區(qū)別與聯(lián)系是什么呢？下面這篇文章主要給大家介紹了關于vue.extend和vue.component區(qū)別的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08